0

I found a very nice font for my next project. (This here: https://www.1001freefonts.com/surfing-capital.font)

Now I have the problem, that when my css-file is loaded and the font is applied to the p-Element, my page freezes.

I wanted to create a little loading animation, because I thougt, I can show this to my visitors, while my CSS-File is processed. But as soon as the css-rule gets applied, my animation freezes too.

So, loading of the css-file is not the problem and works without blocking, only if the css-rule with the font-family is applied to the text everything else gets blocked.

I also tried to load the css with media=none:

<link rel="stylesheet" type="text/css" href="style.css" media="none"/>

but here too, the page freezes until the text is displayed in the font.

Is there a trick, so that my animation doesn't freeze, while the css-rule is in progress?

Kind regards, Netherstorm

Netherstorm
  • 143
  • 1
  • 1
  • 6
  • I think if you use `media="none"` you have to include it later too: take a look at [this answer](https://stackoverflow.com/a/34358162/4907552) – jaunt Oct 27 '17 at 21:39
  • It doesn't help :c When the font-family property is applied to the text, everything freezes. You could say, for every letter one second. – Netherstorm Oct 27 '17 at 21:50
  • Can you create a live example of the problem? If not it's hard to suggest what to do, have a look at [this page](https://davidwalsh.name/font-loading) for a few more tips – jaunt Oct 28 '17 at 12:05

0 Answers0