The use of Web fonts (Web typography) is increasing massively due to improving support by Internet Browsers, widening ease of use within Websites and increased standardisation such as the Web Open Font Format (WOFF) and the introduction of HTML5 and CSS3. The use of Web fonts extends the number of fonts that may be used on websites as well as the ease with which additional fonts may be included. In most Websites a standard set of fonts are used as all major brands of computers and Browser support this core (but small) set of font families such as Arial and Times New Roman. With Web fonts (using the @font-face CSS rule) the font to be used is referenced and, if it isn’t already in the installed set on the visitor’s computer/Browser, the font is downloaded from the reference (link).
Is using Web Fonts Slow?
It seems logical that if a font needs to be downloaded before it is used, then that will slow Page load speeds. Unfortunately this is a downside of using Web fonts! Not only will extra data (i.e. the font) need to be downloaded by the browser, but there will also be additional http requests which may negatively impact Page load speeds. As the use of Web fonts increases so will the chance that the Web font used on a Page has been downloaded in the past by the Browser and so needn’t be downloaded again.
There are also steps being taken by both Web font distributors and Browser developers to improve the visitor experience when downloading Web fonts is necessary. For example most of the Web font distributors are compressing the fonts for faster download and Mozilla Firefox uses ‘Flash of unstyled text’ where the text is displayed in a default font until the Web font has been downloaded at which time the font changes to the Web font (Google Chrome and Apple Safari display a blank space until the font has been downloaded whereas with Internet Explorer the action taken depends on where the stylesheet <link> tag is placed in the head section).
Use Web Fonts in WordPress
Jul 30, 2010 hreview by Gary Eckstein
WordPress Website/Blog/CMS is easily achieved. I have recently been playing with the ‘WP Google Fonts’ WordPress Plugin which makes using the free Web fonts from the Google Font Directory (using the Google Font API) with WordPress very simple (well done to Adrian Hanft, the Plugin author). The Google Font Directory offers a fairly limited selection of fonts to use but the number offered is sure to grow substantially as the use of web fonts increases. The great thing about the WP Google Fonts Plugin is that it allows the use of additional CSS controls for use with the Web font family used (e.g. drop-shadows) so the ‘look and feel’ of the Web fonts can be easily amended. Although the WordPress plugin page notes that the Plugin is compatible up to WordPress v2.9, I have tested it with WordPress 3 and with Artisteer templates and haven’t encountered any errors. This is a great way to use Web fonts in WordPress and I recommend using this Plugin.
[...] to where the font may be found is included in the CSS. If using this font for the first time the Browser downloads and stores the font so that it needn’t be downloaded again when another Webpage uses the same font. This means [...]