font-display: fallback

[FunkOPhilSpectator]

Hi!

I am having some speed optimization issues with the webfonts available in the theme as well as with Linearicons.

How can I make sure that the text remains visible while loading – particualr for Linearicons but also for Google Fonts? This doesn’t seem to be optimized for the Vitrine Theme (see image attached).

I am talking in particular about using CSS and the font-display: fallback function.

Attachments:

You must be logged in to view attached files.

[SomiKeymaster]

Hi dear friend,

I did not understand you well. Do you want to use CSS code (font-display: fallback ) to achieve your purpose about the visibility of text while loading the icons?

Please provide me an example if you have on your website to understand you more, then I can help you better.

Best regards.

[FunkOPhilSpectator]

Hi!

Yes, I want to use CSS code to achieve this purpose.

The example is in the screen shot attached. It is an issue with the Linearicons you are using to display icons for account / wishlist / facebook … etc…

Essentially, I want to have a code like this for Linearicons…but whenever I try it…it does not work on my website http://www.picadera.de

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-display: fallback;
}

[SomiKeymaster]

Hi dear friend,

Please read the information on the following link :

https://css-tricks.com/snippets/css/using-font-face/

I think it would be helpful.

Best regards.