@font-face and font-size

Question

The idea in the following is the first @font-face is for Firefox, the second for IE, and Arial for anything else that can't make sense of the first two. Its all working except for I want to give a different size in the case of Arial, and haven't figured out the syntax to do that.

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.ttf"); format("truetype");
}

@font-face {
  font-family: TribecaIE;
  src: url("Tribec0.eot");
}

BODY
{
    FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}

Answer 1

This is not supported by normal CSS rules..

I believe your options are

• the font-size-adjust property of css 3
• javascript (jQuery), and check for current font to see which one of the three is effective and adjust the font-size accordingly.. http://www.w3.org/TR/css3-fonts/#font-size-adjust ( you should also have a look at the http://www.modernizr.com/ )

Answer 2

I don't believe this is possible with css alone; we will probably need to use javascript.

All we want to do is specify a different font-size if Arial is the active font. Detecting the active font is not exactly straightforward, but here is one method that will work for our particular purpose. We can create a temporary element containing some Arial characters and measure its width, and then create a second element containing characters without specifying a font (so that it defaults to the "active" font) and compare widths. This won't tell us which font is currently active, but can indicate whether or not one of the embedded fonts was loaded with @font-face as they certainly won't have the same width as Arial. If the two elements' widths aren't equal we know that Arial could not have loaded, and so we will only adjust the font-size if the widths are equal.

Even if the browser is unable to load the Arial font, our test is still functional, because when we specify Arial during the test, the browser will default to the same font as it would for the second element. Both elements will still have equal width if the browser is unable to load the embedded fonts with @font-face.

If anyone would like me to further illustrate with code, I'll be happy to write the javascript.

Answer 3

I believe it is this (close to what you have):

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.ttf");
}

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.eot");
}

body {
    font-family: Tribeca, Arial;
}

IE won't know how to open the ttf, so it won't bother. Then it will open the eot. Then, you just specify the font by the given name in the body declaration.

Answer 4

@font-face {
    font-family: 'Tribeca';
    src: url(Tribeca.eot);
    src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
    }

MSIE will ignore the last line cos it doesn't understand format rule. and yes as pointed by porneL above, format() should go in the src property.

local() will make supporting browsers use local font file if user has it instead of downloading from your server (and probably make IE ignore the line too).

as for the font-size adjustment, as pointed by Gaby: CSS 3 font-size-adjust. but it looks like it's not widely supported, yet.

Answer 5

Target your browsers by knowing which one reads which type of declaration. Conditional Comment load different CSS calls. Then you can specifically tell each one to do something different per rule.

Also there is typekit

Answer 6

To void code duplication with @font-face, you can do this via server side. If you use for example some urlrewrite, detect UA, if it's IE - return file with .eot extension, if it's normal browser - ttf.

As for me, it works great.

And for this case, you shouldn't change your css files, just should have 2 files: .ttf & .oet.

Answer 7

Although it's against normal good-practices when using CSS, you could use the !important declaration in your conditional CSS.

As an example, we create two stylesheets: the 'default' one, which will have a section for Firefox-specific styles and an Internet Explorer stylesheet.

Then, using the standard <link rel="" /> method of importing stylesheets:

<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">

<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

Within the 'default' stylesheet, our Firefox styles are wrapped in the following:

@-moz-document url-prefix() {

    #my-id { font-size: 100%; }

}

This works because the @-moz-document url-prefix() section is how Firefox addons style webpages. So, other browsers don't understand it and therefore just skip it.

Answer 8

BODY
{
    FONT: 140% Arial;
    FONT: 195% Tribeca,TribecaIE;
}