CODEWITHSUNDEEP
cssfonts
Astrophage
Astrophage

Reputation: 1439

Change fallback font for font-display:swap

As far as i am aware if you use the option "swap" for the property "font-display", Apple Mac uses Helvetica as fallback font and Windows Arial. Is it possible to define my own web-safe font like "Tahoma"?

Example code:

@font-face {
  font-family: 'MyFancyFont';
  src: local('MyFancyFont'), url(/fonts/MyFancyFont/MyFancyFont.woff2) format('woff2');
  font-display: swap;
  UseMyCustomFallbackFont: Tahoma
}

Upvotes: 1

Views: 734

Answers (1)

Quinn Keaveney
Quinn Keaveney

Reputation: 1604

I believe this is done in the font-family definition, not the @font-face itself.

ex.

.my-text{
  font-family: MyFancyFont, Tahoma;
}

This will show Tahoma until MyFancyFont is loaded.

You can get even more specific control if you use something like Webfont loader. https://github.com/typekit/webfontloader

Upvotes: 1

Related Questions