Change fallback font for font-display:swap

user_7302498 0
Viewed 365

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
}
fonts css
1 Answers

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

user_21594020
Related