With the release of Firefox 3.5, Mozilla has brought lot more cool stuffs to both the web developers and end users. For the end user it’s faster and cleaner browser. For the web developer, a improved JavaScript engine, HTML 5 supports and few more. One of which is the download-able fonts support, introduced by Firefox 3.5.
The background:
One of the challenge the web developers around the world often face is the availability of the custom fonts that they use in their websites. Usually, the end user may not have installed any fonts other than the default/standard fonts provided by their operating system. This restrict the web designers to use only the standard fonts in their web sites.
Firefox 3.5 brings in a cool stuff that enables the web designers to use whatever font they wish to use. Now the fonts used in a website need not to be installed on the client/end user’s system. The browser will just make a request to the remote site that hosts that custom font, download it and it will use that font.
Specifying download-able fonts in your style sheet – @font-face:
The CSS tag you use to specify the remote font is @font-face. This takes two parameters: font-family: the font name and src: the remote URL where the font is hosted. See below for a sample use of this tag.
@font-face {
font-family: "MyCustomFont";
src: url("http://mysite.com/fonts/MyCustomeFont.ttf");
}
p { font-family: "MyCustomFont", verdana }
Above code specifies a remote fonr named MyCustomFont and the URL to find that custom font. Then it uses the downloaded font in other style definitions.
Local fonts also can be used along with Remote fonts:
It is possible to use both local fonts that are installed in user’s computer and the remote fonts that are downloaded via @font-face tag.
@font-face {
font-family: SomeFont;
src: local("SomeFont"),
url(http://somesite.com/SomeFont.ttf);
}
The above code first looks for the SomeFont in user’s computer. If not found, it will then make a request to the URL given in the @font-face’s url option and will download the font for further use.
With the availability of this downloadable font feature, it’ll be sure that website typography will improve a lot. Please feel free share your thoughts on the @font-face tag support in Firefox 3.5
