Forums

Hi Jennifer,

One requirement for a font to show in a visitors web page is that the specified font is installed in the visitors operating system. That is why, when you specify a font in CSS you should always specify a font-family. This way the web browser can select a similar font if the font is missing.

There is a solution to use a custom font in your web pages based on CSS3.

1. To make custom fonts work in all modern web browsers including Internet Explorer you need to prepare 2 font files, one ttf or otf-file. This is a format that FF, Chrome and Safari can use. For Internet Explorer you also need to create a .eof-file. It can't use ttf/otf-files.
2. Upload the custom font files to your web site.
3. Add a @font-face declaration to your CSS file:

Code:
@font-face{
       font-family: my_custom_font;
       src:url('http://www.website.com/path/to/font/nice_font.eot');
       src: local(my_custom_font), url(''http://www.website.com/path/to/font/nice_font.ttf')   
             format('opentype');
}



As you can see there are 2 src-assignments above. What happens is that the second assignment will overwrite the first one but since Internet Explorer doesn't understand the "local" keyword it will skip this assignment. It is not pretty but it gets the job done. It is very important that the IE assignment comes first and the "local" assignment after this.

4. Then you can use the font in your CSS

Code:
.span{
      font-family: my_custom_font;
}

There are also font tools that you can upload your font to and it will create the necessary files ttf/otf and eot files + CSS declarations.

Hope this was what you were looking for.

Google has this awesome service that makes embedding fonts really easy http://www.google.com/webfonts.

When do we get Yahoo! Fonts on the Yahoo CDN? I can see a lot of value in having browser-specific CSS for fonts delivered in the same combo as other CSS.

Hi,

Can you explain how to include fonts in your css file? Pretty new to this stuff

Thanks
Mike

With CSS you can use custom fonts on your website, usually visitors can only see the fonts that are already installed on their computers. So if you use a font that is not installed on your website visitor’s computer then his or her browser will show some other font that is there on the computer.

Hi, lots of the Google fonts looked really good and original but disappointing (though obvious) to read that others who visit your site will only be able to appreciate them if they happen to have them installed on their computer.
That wouldn't bother me too much except that I don't think you can predict what visitors default font will be and therefore won't be able to predict the relative font size, which makes it very risky to deviate from the boring standard stuff.
For example, I nearly always use Freestyle Script in blue to appear to be my signature. But this font is tiny compared to Tahoma or Georgia etc so I have to go up three sizes to get the scale right.
So if there was a similar Google font, it would be likely to look huge in someone esle's browser, which would make you look like an egomaniac!
Helen