FireÂfox 3.5 was released earÂliÂer today, and joins Safari in supÂportÂing the @font-face rule with OpenÂType and TrueÂType font famÂiÂlies, allowÂing you to use a wider range of fonts in your designs (as long as they are corÂrectÂly licensed, of course).
One slight drawÂback of the techÂnique is the blank space thatâs disÂplayed as the new font is loaded into the browsÂer; this is espeÂcialÂly unnecÂesÂsary for users who already have that font nativeÂly on their system.
The way to get around that is quite simÂple; use local()
to check if the font is on the userâs sysÂtem first.
The synÂtax is:
@font-face { font-family: 'Graublau Sans Web'; src: local('Graublau Web'), local('GraublauWeb-Regular'), url('GraublauWeb.otf'); }
Youâll notice there are two calls to local()
; the first is for the full name, the secÂond for the PostÂscript name; this is required for Safari in OS X.
The casÂcade is used so that only if the first two conÂdiÂtions arenât met (that is, the font is not on the userâs sysÂtem) will the third come into play, loadÂing the font into the browserâs cache. This wonât get rid of the blank space, of course, but it will reduce the numÂber of users who see it.
Hereâs an examÂple paraÂgraph which will disÂplay in the excelÂlent Graublau Sans Web famÂiÂly menÂtioned above â as long as you have a browsÂer which supÂports the feature.
Donât forÂget, you will need to declare the rule for each face (bold, italÂic, etc) in the font famÂiÂly. Thereâs a good introÂducÂtion to the whole topÂic at BeauÂtiÂful Fonts With @font-face.
Peter, Iâm totalÂly digÂging the font on your webÂsite using my shiny new verÂsion of FireÂfox 3.5!
Neal G [July 1st, 2009, 03:26]
It seems that FireÂfox 3.5 renÂders the font for a secÂond or two as Times New Roman, and then after the font is loaded, renÂders it propÂerÂly (if you use the web only method). Safari on the othÂer hand leaves a blank space and then renÂders the font.
I find FireÂfoxâs techÂnique a bit annoyÂing as it seems âtoo noticeÂableâ almost like IEâs old âflash of unstyled conÂtentâ bug.
Most of the fonts Iâm testÂing with are from free font sites which I doubt many users have localÂly on their computers.
Neal G [July 1st, 2009, 04:15]
Hi Neal,
The BlauÂgrau Web font famÂiÂly is very cool; I hope to see it used more often.
Out of interÂest, what platÂform are you on? I hadÂnât noticed that FireÂfox disÂplays a serif font before loadÂing in the new one.
Peter [July 1st, 2009, 09:43]
Hi Peter,
Graublau also has a bold verÂsion, do we need to do anyÂthing speÂcial for OS X as you did with the regÂuÂlar font?
Thanks, Karl
Karl [July 3rd, 2009, 11:21]
Hi Karl,
Yes, youâll have to declare it in the same way;
@font-face {
font-famÂiÂly: âGraublau Sans Webâ;
font-weight: bold;
src:
local(âGraublau Web Boldâ),
local(âGraublauWeb-Boldâ),
url(âGraublauWebBold.otfâ);
}
You can get the PostÂScript name of a font by openÂing Font Book and clickÂing âShow Font Infoâ.
Peter [July 3rd, 2009, 11:48]
[âŠ] Checa si la fuente que quieres utiÂlizar estĂĄ instaÂlÂaÂda en la comÂputaÂdoÂra del usuario, para eviÂtar descarÂgarÂla inĂștilmente. [âŠ]
¿Y quién diablos es @font-face? [May 24th, 2010, 14:08]
[âŠ] Checa si la fuente que quieres utiÂlizar estĂĄ instaÂlÂaÂda en la comÂputaÂdoÂra del usuario, para eviÂtar descarÂgarÂla inĂștilmente. [âŠ]
TipografĂas en tu web. @font-face | MusaConfusa [January 24th, 2011, 07:46]