Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
font-display

9 Articles
{
,

}
Direct link to the article A font-display setting for slow connections
font-display performance typography

A font-display setting for slow connections

Me, I really dislike FOUT. I like that it’s an option, because not displaying text quickly on the web is no good. I know font-display: swap; is popular because it’s good for performance, but that FOUT stuff pains me. Matt …

Avatar of Chris Coyier
Chris Coyier on Dec 31, 2020
Direct link to the article Web Performance Calendar
font-display

Web Performance Calendar

The Web Performance Calendar just started up again this year. The first two posts so far are about, well, performance! First up, Rick Viscomi writes about the mythical “fast” web page:

How you approach measuring a web page’s performance

…
Avatar of Robin Rendle
Robin Rendle on Dec 7, 2020
Direct link to the article Google Fonts is Adding font-display
font loading font-display google fonts

Google Fonts is Adding font-display

Google announced at I/O that their font service will now support the font-display property which resolves a number of web performance issues. If you’re hearing cries of joy, that’s probably Chris as he punches the air in celebration. He’s wanted …

Avatar of Robin Rendle
Robin Rendle on May 14, 2019 (Updated on May 17, 2019)
Direct link to the article Fighting FOIT and FOUT Together
font loading font-display perceived performance performance

Fighting FOIT and FOUT Together

Lots from Divya with the setup:

There are 2 kinds of problems that can arise when using webfonts; Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) … If we were to compare them, FOUT is of

…
Avatar of Chris Coyier
Chris Coyier on Dec 19, 2018 (Updated on Dec 21, 2018)
Direct link to the article Google Fonts and font-display
font loading font-display google fonts

Google Fonts and font-display

Hey! This whole article is about a time before May 2019 in which Google Fonts didn’t offer a way to use font-display without self-hosting the fonts.

To use font-display with Google Fonts, you include a URL parameter like &display=swap in …

Avatar of Chris Coyier
Chris Coyier on Dec 19, 2018 (Updated on Apr 12, 2021)
Direct link to the article Hey hey `font-display`
font-display performance

Hey hey `font-display`

Y’all know about font-display? It’s pretty great. It’s a CSS property that you can use within @font-face blocks to control how, visually, that font loads. Font loading is really pretty damn complicated. Here’s a guide from Zach Leatherman to …

Avatar of Chris Coyier
Chris Coyier on Apr 17, 2018
Direct link to the article eBay’s Font Loading Strategy
font-display

eBay’s Font Loading Strategy

Senthil Padmanabhan documents how:

  1. Both FOUT and FOIT are undesirable.
  2. The best solution to that is font-display.
  3. Since font-display isn’t well supported, the path to get there is very complicated.
  4. They open sourced it.

They went with replicating …

Avatar of Chris Coyier
Chris Coyier on Oct 3, 2017
Direct link to the article font-display
font-display web fonts

font-display

The font-display property defines how font files are loaded and displayed by the browser. It is applied to the @font-face rule which defines custom fonts in a stylesheet.

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  
…
Avatar of Geoff Graham
Geoff Graham on Apr 17, 2017 (Updated on Mar 25, 2020)
Direct link to the article `font-display` for the Masses
accessibility CSS font-display font-face font-family typography web fonts

`font-display` for the Masses

Updated on January 12, 2017: Proper support checks are now part of the article body. Added information about the block value. Minor tweaks and copy edits. Enjoy!

If you’re a regular reader here at CSS-Tricks, chances are good you know …

Avatar of Jeremy Wagner
Jeremy Wagner on Aug 19, 2016 (Updated on Nov 14, 2019)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top