Historically fonts available for use on a website were limited to just a few, ensuring compatibility across multiple operating systems and installed fonts. Modern browsers support the inclusion of referenced fonts, downloading them on demand.
In-line Font Specification
Originally fonts were specified in-line. To change the font within a section of text an additional parameter was added to the <p> and <span> tags.
<p font=”arial”>The quick brown fox</a>
<p>The <span font=”arial”>quick</span> brown fox</p>
Specifying a Font in CSS
Within programming there is a desire to separate code into defined sections. For a website this means separating the rendering style as CSS code into separate files. The HTML code is used for the layout. Using common classes and CSS styling allows a single change to act globally across a website making changes to all instances. Our font usage above is changed in the html file and becomes:
<p class="fontClass">The quick brown fox</a> <p>The <span class="fontClass">quick</span> brown fox</p>
Within a CSS entry, either for a named ID or a class, the font is specified using the font-family parameter. Typically a list of entries is given. The browser taking the first entry from the left which it is able to support. For example while writing the article The HTML Font Tag I couldn’t understand why the Comic Sans font example wasn’t showing correctly. I was using the Iceweasel browser on a Linux Computer, without support for the Comic Sans font.
In the example given below the font parameters are defined for a class called fontClass, the fonts to be used will be a definition called futura-pt, followed by arial and sans-serif.
.fontClass{
font-size:12px;
font-weight:bold;
font-family; "futura-pt",arial,sans-serif;
}
Importing a font in CSS
Below example import of font using CSS3
@font-face {
font-family: Anivers;
src: url(../fonts/Anivers.otf) format("opentype");
}
Here the name to be used is specified in the font-family parameter. The source for the file is specified using src and url. Note this specification can appear anywhere in the file. Although I prefer to keep them near to the top for easier administration of the file.
Which Font is a Browser Rendering?
Some fonts can be similar in their styling. When the browser works through the defined list of fonts and chooses one to use which of the available fonts is it actually using to render the text? Both FireFox and Chrome support add-ons which can help to realise this. I have used the FireFox add-on Font Finder previously to understand which font is being rendered.
Default Browser Font
The default font specified by a browser may also be significant. Take a look in the browser configuration for the details
| Browser | Settings | Default |
|---|---|---|
| FireFox | Tools > Options > Content : Fonts & Colors: Advanced | Times New Roman (16) |
| Iceweasel | Edit/Preferences > Content/ > Fonts & Colours | Serif 16 |
| IE (10) | Settings > Internet Options > Fonts | Times new Roman |
| Chrome | Tools/Settings > Advanced > Web Content > Fonts and Encoding | Balker |
| Opera | Settings > Preferences > Web Pages | DejaVu Serif |
| Safari | Toolbar > Preferences > Appearance | Times 16 |
FireFox Fails to Reference Fonts
FireFox may not reference the external fonts.
- Browser navigation enter about:config, hit enter
- acknowledge the warning and proceed
- search for: network.http.sendRefererHeader
- a value of 2 is required for it to work
Also to be checked are the following setitngs:
- gfx.downloadable_fonts.enabled
By default FireFox fails to load fonts referenced from a domain other than the website. This is done to help preventing fonts being linked from your website server and the stealing of bandwidth and to respect your copyright.
Tools
Most browsers support the option to Inspect Element to discover the HTML and CSS settings for a particular element on a web page.
Firefox supports the use of Add Ons to provide tools. I have found the following useful
- FireBug
- Font Finder
Google chrome has its own extensions
- WhatFont
