Bootstrap nav changes the font for a brief second on load momentarily shifting the buttons size

user_4863700 0
Viewed 52

Bootstrap nav (in WordPress using the Understrap starter theme) loses the font styling for a moment on page load, loading a default font for a split moment, and momentarily shifting the button size, what's happening here and how to fix it?

I've tried using !important with font-family, adding .navbar .navbar-nav before all the CSS selector names, and adding an id on the body tag, and prefacing the CSS selectors with that id. I'm still getting this momentary font shift.

Fonts are being loaded from Google Fonts.

li a.nav-link, li a.nav-link:link, li a.nav-link:hover{
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #fff;
    background-color: #000;
    border-bottom: 4px solid #fff;
    font-size: 15px;
    float: left;
    list-style: none;
    text-align: center;
    margin-left: 10px;
    padding: 2px 16px 0 16px;
    line-height: 36px;
}

li a.nav-link:active, .active a.nav-link, li a.nav-link:focus{
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color:  #000;
    background-color: #fff;
    border-bottom: 4px solid $000;

    font-size: 15px;
    float: left;
    list-style: none;
    text-align: center;
    margin-left: 10px;
    padding: 2px 16px 0 16px;
    line-height: 36px;
}
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>

<nav id="main-nav" class="navbar navbar-expand-md bg-primary" aria-labelledby="main-nav-label">
    
     <h2 id="main-nav-label" class="sr-only">
                Main Navigation</h2>
    
       <div class="container">

        <div id="navbarNavDropdown" class="collapse navbar-collapse">
            <ul id="main-menu" class="navbar-nav align-items-end ms-auto">
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-73 nav-item"><a title="Home" href="/" class="nav-link">Home</a></li>
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 nav-item"><a title="" href="/section1/" class="nav-link">Section 1</a></li>
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 nav-item"><a title="" href="/section2/" class="nav-link">Section 2</a></li>
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76 nav-item"><a title="" href="/section3/" class="nav-link">Section 3</a></li>
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-38 current_page_item active menu-item-77 nav-item"><a title="" href="/section4/" class="nav-link" aria-current="page">Section 4</a></li>
            </ul>
        </div>
       </div>
</nav>

twitter-bootstrap css html
1 Answers

This seems to be a common problem in WordPress. Check out this thread related to the problem.

On slower connections, we display text in the theme’s default font first. This way, people can start reading your content before the custom font loads, instead of waiting while looking at a blank page.

-- Said by WordPress staff member, "fstat"

With that being said, let's look at ways we can work around this and make the google font the themes default font as a priority.

Option 1: You can import the google font using CSS and using the @font-face selector.

@font-face {
  font-family: 'Roboto', sans-serif;
  src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
}

Option 2: You can set font-family to the body and * universal selector.

This would entail putting the <body> tags around your HTML.

body {
  font-family: 'Roboto', sans-serif;
}

* {
  font-family: 'Roboto', sans-serif;
}


li a.nav-link, li a.nav-link:link, li a.nav-link:hover{
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
    background-color: #000;
    border-bottom: 4px solid #fff;
    font-size: 15px;
    float: left;
    list-style: none;
    text-align: center;
    margin-left: 10px;
    padding: 2px 16px 0 16px;
    line-height: 36px;
}

li a.nav-link:active, .active a.nav-link, li a.nav-link:focus{
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 400;
    color:  #000;
    background-color: #fff;
    border-bottom: 4px solid $000;

    font-size: 15px;
    float: left;
    list-style: none;
    text-align: center;
    margin-left: 10px;
    padding: 2px 16px 0 16px;
    line-height: 36px;
}
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<nav id="main-nav" class="navbar navbar-expand-md bg-primary" aria-labelledby="main-nav-label">
    
     <h2 id="main-nav-label" class="sr-only">
                Main Navigation</h2>
    
       <div class="container">

        <div id="navbarNavDropdown" class="collapse navbar-collapse">
            <ul id="main-menu" class="navbar-nav align-items-end ms-auto">
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-73 nav-item"><a title="Home" href="/" class="nav-link">Home</a></li>
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74 nav-item"><a title="" href="/section1/" class="nav-link">Section 1</a></li>
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75 nav-item"><a title="" href="/section2/" class="nav-link">Section 2</a></li>
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76 nav-item"><a title="" href="/section3/" class="nav-link">Section 3</a></li>
                <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-38 current_page_item active menu-item-77 nav-item"><a title="" href="/section4/" class="nav-link" aria-current="page">Section 4</a></li>
            </ul>
        </div>
       </div>
</nav>
</body>

user_164963570
Related