Why is my font acting weird on bootstrap nav?

I'm using Bootstrap v3.2.0 on this site. On mobile, when the nav is collapsed, when I click to open it, the font's aren't correct right away. Only after the nav is fully open do the fonts "snap" into using the webfonts. I created a video to give you a better understanding. I am not able to post code right now, as I know this would help, but I am wondering if anyone has seen this before and knows of a fix. I can post code later if need be. Thank you!

Video Example of Issue

JSFiddle Code

HTML

<header>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button class="navbar-toggle" data-target=".navbar-collapse"
            data-toggle="collapse" type="button"><span class="sr-only">Toggle
            navigation</span> <span class="icon-bar"></span> <span class=
            "icon-bar"></span> <span class="icon-bar"></span></button>
            <a class="navbar-brand" href="/">Company Name</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">Products</a>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href=
                    "#">Locations <span class="caret"></span></a>

                    <ul class="dropdown-menu subNavLeft">
                        <li>
                            <a href="#">Location 1</a>
                        </li>

                        <li>
                            <a href="#">Location 2</a>
                        </li>

                        <li>
                            <a href="#">Location 3</a>
                        </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href=
                    "#">Company <span class="caret"></span></a>

                    <ul class="dropdown-menu subNavLeft">
                        <li>
                            <a href="#">Our History</a>
                        </li>

                        <li>
                            <a href="#">Brands</a>
                        </li>

                        <li>
                            <a href="#">Contact Us</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#">Blog</a>
                </li>

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href=
                    "#">Media <span class="caret"></span></a>

                    <ul class="dropdown-menu subNavLeft">
                        <li>
                            <a href="#">Videos</a>
                        </li>

                        <li>
                            <a href="#">Logos</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#">Careers</a>
                </li>

                <li>
                    <a class="login" href="#">Login</a>
                </li>

                <li class="hidden-md">
                    <a class="socialIcon fbIcon fa fa-fw fa-facebook" href="#"
                    style="font-style: italic" target="_blank"></a>
                </li>

                <li class="hidden-md">
                    <a class="socialIcon fa fa-fw fa-twitter" href="#" style=
                    "font-style: italic" target="_blank"></a>
                </li>

                <li class="hidden-md">
                    <a class="socialIcon fa fa-fw fa-youtube" href="#" style=
                    "font-style: italic" target="_blank"></a>
                </li>
            </ul>
        </div>
    </div>
</header>

CSS

html {
    background:#000
}

body {
    margin:0;
    padding:0;
    font-family:'Georgia',serif;
    font-weight:400;
    font-style:normal;
    font-size:19px;
    color:#6f6666;
    background:#fff
}

a,a:visited {
    color:#c02037;
    text-decoration:none
}

a:hover {
    color:#c02037;
    text-decoration:underline;
    transition:.3s;
    -webkit-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -o-transition:.3s
}

header {
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:999
}

.logo {
    float:left;
    margin:0 21px 0 30px;
    padding:0
}

.navbar {
    padding:17px 0;
    font-family:arial;
    -webkit-box-shadow:0 1px 6px rgba(0,0,0,0.1);
    -moz-box-shadow:0 1px 6px rgba(0,0,0,0.1);
    box-shadow:0 1px 6px rgba(0,0,0,0.1);
    border-bottom:1px solid #F1F1F1;
    behavior:url(/PIE.htc)
}

.navbar-default {
    background:#fff;
    border:none
}

.navbar-brand,.navbar-right {
    margin:0;
    padding:0
}

.collapse {
    margin-right:30px
}

.collapse .navbar-nav li a,.collapse .navbar-nav li a:visited {
    margin:0;
    padding:25px 19px 20px;
    font-size:18px;
    color:#6f6666;
    text-transform:uppercase;
    line-height:20px
}

.collapse .navbar-nav li a:focus,.collapse .navbar-nav li a:active {
    color:#c02037!important;
    background:none!important
}

.collapse .navbar-nav li a:hover {
    color:#c02037;
    text-decoration:none
}

.collapse .navbar-nav li a.login,.collapse .navbar-nav li a.login:visited {
    color:#c02037;
    padding:25px 40px 20px 20px
}

li.dropdown ul.dropdown-menu {
    box-shadow:none;
    top:82px;
    border-top:none
}

li.dropdown ul.dropdown-menu li a,li.dropdown ul.dropdown-menu li a:visited {
    padding:15px 20px!important;
    font-size:17px
}

li.dropdown ul.dropdown-menu li a:hover {
    background:none;
    text-decoration:none
}

.collapse .navbar-nav li a.socialIcon,.collapse .navbar-nav li a.socialIcon:visited {
    width:30px!important;
    height:30px!important;
    margin:16px 15px 0 0!important;
    padding:7px 0 0 1px!important;
    -webkit-border-radius:15px!important;
    -moz-border-radius:15px!important;
    border-radius:15px!important;
    background:#C5C3C3!important;
    text-align:center!important;
    display:block
}

.collapse .navbar-nav li a.socialIcon:hover {
    background:#c02037!important;
    text-decoration:none
}

.collapse .navbar-nav li a.socialIcon i {
    color:#fff
}

.subNavLeft {
    right:auto!important
}

.subNavLeft::before {
    left:12px!important;
    right:auto!important
}

.subNavLeft::after {
    left:13px!important;
    right:auto!important
}

/* -------------------------------- MEDIUM SIZE ---------------------------------- */
@media (min-width: 1024px) and (max-width: 1199px) {
    .collapse {
        margin-right:47px
    }

    .collapse .navbar-nav li a,.collapse .navbar-nav li a:visited {
        padding:25px 17px 20px
    }

    .collapse .navbar-nav li a.login,.collapse .navbar-nav li a.login:visited {
        padding:25px 0 20px 20px
    }
}

/* ------------------------------------ SMALL SIZE ----------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .navbar {
        padding:17px 0 32px
    }

    .navbar-toggle {
        margin:15px 30px 0 0
    }

    .collapse,navbar-collapse {
        margin:30px 0 0
    }

    .collapse .navbar-nav li a,.collapse .navbar-nav li a:visited {
        margin:0 0 0 30px;
        padding:21px 0 0;
        font-size:22px
    }

    .collapse .navbar-nav li a.login,.collapse .navbar-nav li a.login:visited {
        margin:0 0 0 30px;
        padding:23px 0 0
    }

    li.dropdown ul.dropdown-menu li a,li.dropdown ul.dropdown-menu li a:visited {
        padding:15px 20px 5px!important;
        font-size:20px
    }

    li.dropdown ul.dropdown-menu li a:hover {
        color:#c02037!important
    }

    .collapse .navbar-nav li a.socialIcon,.collapse .navbar-nav li a.socialIcon:visited {
        float:left;
        width:34px!important;
        height:34px!important;
        margin:16px 15px 0 0!important;
        padding:7px 0 0 1px!important;
        -webkit-border-radius:17px!important;
        -moz-border-radius:17px!important;
        border-radius:17px!important;
        background:#C5C3C3!important;
        text-align:center!important;
        display:block
    }

    .collapse .navbar-nav li a.socialIcon:hover {
        background:#c02037!important
    }

    .collapse .navbar-nav li a.fbIcon,.collapse .navbar-nav li a.fbIcon:visited {
        margin:16px 15px 0 30px!important
    }
}

/* ------------------------------------ X-SMALL SIZE ----------------------------------- */
@media (max-width: 767px) {
    .navbar {
        padding:17px 0 10px
    }

    .collapse,navbar-collapse {
        margin:11px 0 0
    }

    .collapse .navbar-nav li a,.collapse .navbar-nav li a:visited {
        margin:0 0 0 30px;
        padding:15px 0 7px;
        font-size:24px
    }

    .collapse .navbar-nav li a.login,.collapse .navbar-nav li a.login:visited {
        margin:0 0 0 30px;
        padding:18px 0 7px
    }

    li.dropdown ul.dropdown-menu li a,li.dropdown ul.dropdown-menu li a:visited {
        padding:15px 20px 5px!important;
        font-size:20px
    }

    li.dropdown ul.dropdown-menu li a:hover {
        color:#c02037!important
    }

    .collapse .navbar-nav li a.socialIcon,.collapse .navbar-nav li a.socialIcon:visited {
        float:left;
        width:44px!important;
        height:44px!important;
        margin:15px 15px 20px 0!important;
        padding:8px 0 0!important;
        -webkit-border-radius:22px!important;
        -moz-border-radius:22px!important;
        border-radius:22px!important;
        background:#C5C3C3!important;
        text-align:center!important;
        display:block;
        font-size:28px
    }

    .collapse .navbar-nav li a.socialIcon:hover {
        background:#c02037!important
    }

    .collapse .navbar-nav li a.fbIcon,.collapse .navbar-nav li a.fbIcon:visited {
        margin:15px 15px 20px 30px!important
    }

    .navbar-toggle {
        margin:5px 15px 0 0
    }
}

Solution

While clicking watch the elements in your inspector. The class is changing or the inline style is changing on click of this button. If it is then your issue is in your Javascript.

If you like the final font when it opens, I would recommend making sure that font is placed on those elements via CSS instead of through JS.

If you do not like the font in the end, you could remove the part of the JS that is making that change

after reviewing the fiddle you posted, which was very helpful, I found that the font is not changing. Instead, if i remove

.collapse .navbar-nav li a, .collapse .navbar-nav li a:visited {
    margin:0;
    color:#6f6666;
    line-height:20px;
    text-transform:uppercase;
    padding:25px 19px 20px 19px;
    font-size:18px;
}

and from

@media (max-width: 767px)

remove

    .collapse .navbar-nav li a, .collapse .navbar-nav li a:visited {
         margin: 0 0 0 30px;
         padding: 15px 0 7px 0;
         font-size: 24px;
    }

    .collapse, navbar-collapse {
         margin: 11px 0 0 0;
    }

There are no unwanted changes happening after opening the collapsed navigation. If you are okay with the way it looks you can use it other wise. You could make the necessary changes to your colapse nav to achieve your desired results.

Here is the fiddle