All geek questions in one place

Font size for @ font-face alternative

I use @ font-face, which should be set to a large font size. for example, the font size of the header is 54px, which is usually so large, but in this font it looks medium.

So the problem is that while the page is loading, the alternate font appears veeeery large and breaks the whole layout.

Is there a way to specify the font size for an alternate font?

+6
source share
2 answers

You might be able to use Modernizr . It adds classes to the <html> element, which represents the functions supported by the browser. In this case, the class that it adds to support @font-face , fontface .

What I would do is set the header size to what works well for the alternate font, and then attach the correct font size, for example:

 .title { font-size: 20px; font-family: arial, sans-serif; } .fontface .title { font-size: 50px; font-family: 'alternative-font', arial, sans-serif; }

Although, even then I think that this may not change in the correct order ... Actually, I will not worry about the layout looking funny at boot time, but I hope this helps.

+2
source

I would try to extract the name font used via JavaScript or jQuery, and if it is not the font @font-face , then adjust the font-size accordingly.

Edit:
Here's the JavaScript Font Detection plugin to check when the backup font is rendered.

+2
source

Source: https://habr.com/ru/post/920559/

More articles:


All Articles