Google Fonts Now Supports font-display!
Publikováno: 16.5.2019
font-display is a CSS feature that allows us to control how we load fonts.
Google Fon...
font-display is a CSS feature that allows us to control how we load fonts.
Google Fonts are used by many websites (including Scotch.io) and up until now, we didn't have the ability to control how we loaded the fonts.
Now we can add a font-display through a url parameter!
## How do I use font-display with Google Fonts? We just have to add a url parameter **&display=** to our Google Fonts url: ```markup https://fonts.googleapis.com/css?family=Calligraffitti https://fonts.googleapis.com/css?family=Calligraffitti&display=fallback ``` ## Why is font-display important? Google takes performance into account when it ranks your sites. One of the things that it figures into the performance rating is: **Ensure text remains visible during webfont load**. This is running a Lighthouse Audit \(found in Chrome Dev Tools\) **without any font-display set**.  Google Audits will penalize a site that doesn't show text to slow network users. By using font-display, users on slow connections can see the text of your site and then get the fancy webfont version after it loads \(with swap or fallback\). ## What are the types of font-display? The types of font-display are: * **font-display: block**: flash of invisible text until the font loads * **font-display: swap**: fallback font until custom font loads \(flash of unstyled text\) * **font-display: fallback**: between block and swap. invisible text for a short time * **font-display: optional**: like fallback, but browser can decide to not use custom font For a more thorough look at font-display, [Monica Dinculescu](https://twitter.com/notwaldorf) wrote up a fantastic post \([font-display.glitch.me/](https://font-display.glitch.me/)\) to visualize the different:  ## Go Forth and Use font-display! It's a quick change to add font-display updates to your sites. After making the changes, we've seen some people get some nice performance boosts!Shipped! @GoogleFonts now let's you control web font loading using `font-display`. Say hello to the `display` parameter ????
— Addy Osmani (@addyosmani) May 15, 2019
What's font-display? https://t.co/Q7RDeESwkmpic.twitter.com/sn27ySza1B
Using Google Font's new display param saved us 800ms on First Meaningful Paint @addyosmani@SpeedCurve#webperfpic.twitter.com/Oa9HpXtzC3
— Josh Deltener (@hecktarzuli) May 16, 2019