CODEWITHSUNDEEP
javascriptjqueryhtmlcssfadein
eshapiro42
eshapiro42

Reputation: 186

Flash of unstyled content when fading in text

I can't figure out a way to prevent a flash of unstyled content when fading in text which is supposed to be styled with a font from Google Fonts.

It looks like fonts.googleapis.com loads when the page loads, but it isn't until the text is supposed to fade in that fonts.gstatic.com will load, which leads to a brief and unsightly flash of text in Times New Roman or whatever the default font is before it is abruptly styled properly.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">

    <!-- Static CSS -->
    <link rel='stylesheet' type='text/css' href="main.css"/>
</head>

<body>
    <div>
        <button id="startButton">Start</button>
    </div>

    <div id="textDiv">
        <p id="textContents"></p>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>

    <!-- Static JavaScript -->
    <script src="main.js"></script>
</body>

CSS

#textDiv {
    font-size: 40px;
    font-family: 'Quicksand';
}

Javascript

var textDiv = $('#textDiv');
var text = $('#textContents');
var button = $('#startButton');

// handle click and add text
button.bind("click", function() {
    textDiv.hide();
    text.html("<p>Hello</p>");
    textDiv.fadeIn();
})

https://jsfiddle.net/eshapiro42/xmf23uqw/15/

Any help figuring out how to prevent this would be greatly appreciated!

Upvotes: 0

Views: 225

Answers (3)

Richard Woods
Richard Woods

Reputation: 2283

Use the display=block request parameter when referencing the font from Google. Full URL for your example:

https://fonts.googleapis.com/css?family=Quicksand&display=block

This in turn will cause the Google stylesheet to use the font-display: block rule in its @font-face declaration. This rule will specify that you would rather that the text remain unrendered until the font is loaded, than render the text in a local font and re-render when the webfont is ready.

Source:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#customize_the_text_rendering_delay https://css-tricks.com/google-fonts-and-font-display/

Upvotes: 2

Rojo
Rojo

Reputation: 2869

In the CSS, you could add display: none; and the in your JavaScript add 

$(function() {
  $('#textDiv').css('display', 'block');
});

Upvotes: 1

Jay Kariesch
Jay Kariesch

Reputation: 1482

You can preload fonts when you're referencing an actual font. What you're referencing here is a stylesheet that adds @font-face to your document with different variations of Quicksand.

The solution is to go to paste the stylesheet link in your browser and grab the direct link to the font, and then load it as a reference in your html document with this:

<link rel="preload" href="ttps://fonts.gstatic.com/s/quicksand/v15/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-xDwxUD2GFw.woff" as="font" crossorigin>

Upvotes: 3

Related Questions