Menu
I'm using @font-face that has to be given a large font-size. for example the font-size of the title is 54px which is normally so big, but in this font it appears medium.
So the problem is, while the page loads, the alternative font appears veeeery big and breaks the whole layout.
Is there a way i can specify a font-size for alternative font?
348
You might be able to use Modernizr. It adds classes to the <html> element which represent features that the browser supports. In this case, the class it adds for @font-face support is fontface.
What I would do is set the title size to what looks good for the alternative font, then nest the proper font-size, like so:
.title {
font-size: 20px;
font-family: arial, sans-serif;
}
.fontface .title {
font-size: 50px;
font-family: 'alternative-font', arial, sans-serif;
}
Though, even then I guess it might not change in the right order... Generally, I'd not worry about the layout looking funny while loading, but hopefully this helps.
97
I would try to retrieve the name of the font being used via JavaScript or jQuery and if it's not the @font-face font then adjust the font-size accordingly.
Edit:
Here's a JavaScript Font Detection plugin to test when the fallback font is being rendered.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
