Search code examples
htmlcssgoogle-webfonts

CSS .wf-inactive

Will adding the following code to my CSS work in providing an alternative font whilst the webfont from Google is inactive? All I have done is add the following link to my HTML: 

<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Shrikhand" rel="stylesheet">

I've added this to the CSS: 

.wf-inactive body {

font-family: serif;
font-size: 1em;
line-height: 1.4em;
letter-spacing: 0;
word-spacing: 0.035em;
margin-top: 0.65em;
margin-bottom: 0.55em;

/* To match body, p, section, etc's active content */

}

Is there anymore to it than this?

Solution

  • I recommend using a font stack, which is specifically designed so that if one font fails, your browser will fall to the next one in line.

    font-family: 'Playfair Display', Arial, sans-serif;

    What this tells your browser is to prioritize Playfair, and if that doesn't work, switch to Arial. If your user doesn't have Arial, it'll switch to the default san-serif on their computer.