Font size for @font-face alternative

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?


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.

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.

Need Your Help

TextView setTextColor() not working

android colors textview

I programmatically create a list (no a ListView, just adding them to the parent) of such elements:

Apache Conf - FilesMatch allow only in current folder, not subfolder

apache .htaccess httpd.conf

is it possible to allow access to a specific file via &lt;files&gt; or &lt;filesmatch&gt; so that this rule is not applied to identically named files in subfolders?