HTML Fonts - How to Use Typography Correctly

Using HTML Fonts and @font-face Declarations (Correctly!)

This is a joint HTML5 and CSS3 Tutorial. If you have not started learning CSS, then start at the beginning of our CSS3 Tutorials and then pop back here!

Using Fonts: The ‘Old’ Way

Before the era of being able to embed and use any font you want on your web pages, you had to think carefully before defining any given typeface on your web pages. This is because if you specify a font you have on your computer but your visitors don’t have that font, then your page would look different to them compared to what you were seeing.

This meant that, on the whole, sites had to use standard or ‘system fonts’ – those generally installed by default on computers at the point they were bought. This was further compounded by the fact that ‘standard’ fonts on a Windows machine would not be identical to those installed on a Mac. Basically, your choice of fonts was very much limited if you wanted consistent display for all visitors (which incidentally, you do!).

<font face="Trebuchet MS, Verdana, Arial, sans-serif" color="#ff0000" size="3">A sentence which could be displayed in up to 4 different fonts, in red at scale 3</font>

In this ‘old school’ example, anything situated between the <font> and </font> tags would follow these rules:

face: the person loading the site could see the text in 4 different typefaces. Their computer would search for ‘Trebuchet MS’ first – if that was not on their machine, then it would look for ‘Verdana’ and so on down the list. Once the computer found a font specified it would display it in that typeface and ignore the rest of the list. The face attribute is the full name of the font they wanted to use.
color: note, for any non-US English-speakers that HTML uses the American English spelling for everything – color and center being two of the most common. Color could be specified as a hexidecial code (which is preceded by a #). Alternatively there are some colours which can be specified in their full English form – e.g. red, green and blue – though the list is much longer.

size: and this is where it got a bit confusing. The size attribute was a ‘scale’ rather than an ‘absolute’ size. Before HTML5 you used to be able to set ‘global’ rules over the whole page as part of the <body> tag. Other sizes specified were relative to that global rule. To complicate things further, you could set font sizes in your browser (which you still can for accessibility purposes) and the font would scale accordingly. This led to pages possibly looking completely different on one person’s machine to another.

Why You Shouldn’t Use the <Font> Tag

The main problem with the font tag (apart from it being an outdated method) is that you had to ensure that everything was wrapped in font tags. And every single page would have to have these tags. If you have a poor memory, they could easily be forgotten, meaning the display of different pages on the same website would also not be consistent.

When considering website design, a key element is that users have the same look and feel (‘theme’) to all your pages – you must be consistent. Consistency in design, is where CSS3 comes into its own.

Setting Font Options via CSS3

Whether you’re experimenting with CSS as part of a <style> tag, or whether you’re using an external stylesheet, the syntax is the same for setting the site-wide font rules:

body{ font-family:'Trebuchet MS','Verdana','Arial','sans-serif'; color:#ff0000; size:14px;}

By setting the rule over the <body> tag, you’re guaranteed the same ‘starting point’ for your fonts on all your pages. As CSS cascades, you can redefine fonts and colours for individual page items such as table cells, bullet lists, or quotations.

font-family

Unlike the <font> tag, CSS uses font-family. This is important, as font-face or even face will not work! Another notable difference between the HTML and CSS versions is that the list of typefaces is split differently:

HTML: encapsulate the whole list in speech marks – "Trebuchet MS,Verdana,Arial,sans-serif"
CSS: encapsulate each font name in speech marks – 'Trebuchet MS','Verdana','Arial','sans-serif'

For single-word names, in CSS, you don’t have to use speech marks, but it is better to have the habit of adding them to all font names.

color

Counter-intuitively maybe, color refers to the font colour (or color). As with HTML, you can specify the colour with hexidecimal, or an English name. But you can also specify it in RGB, which is a series of 3 numbers (the first being ‘red’, the second being ‘green’ and the third being ‘blue’ – RGB). So here’s CSS which produces the same result:

color:red; color:#ff0000; color:rgb(255,0,0);

You can see in the screenshot that this particular shade of red is #ef1111 in hexidecimal and 239,17,17 in RGB.

CMYK For Printing
When it comes to printing, colours on screen look different to those in print. This is because printing uses a combination of letters called CMYK. These stand for Cyan, Magenta, Yellow and Black and is a colour combination used most often when preparing colours for printing – e.g. leaflets, flyers, business cards and the like. You don’t need to worry about CMYK for websites, but if you create a site and then want to create consistent colours for printing, you’ll need these.

(You can ignore the H, S, V from this screenshot as it does not affect coding).

font-size

Unlike the HTML size="3" reference, you can use font-size in quite a few ways:

Absolute Size: set the actual height of the text. You can use pixels (px), picas (pc) and even ‘print measurements’ such as millimeters or centimeters (mm, cm).

Relative Size: if you set your ‘default’ size in the body{ }, you can that set a relative size to that for other elements (e.g. p{ }. This can be done by using ’em’. Therefore 1.1em will make that element a bit bigger than your default size and 0.9em will make it a bit smaller.
Relative Size – Percentage: If em is a bit harder to get your head around, then you can use percentages. So if your body{ } has a set font size, but you want paragraphs to be 10% larger than that setting, then you might use p{ font-size:110%; }

So there is a lot of flexibility. The key thing to bear in mind is that you should set your site-wide font rules in the body{ } or html{ } CSS declarations. Other page elements will (generally) follow those rules unless you give them rules of their own.

Importing Fonts Using @font-face

Enter stage left the ability to use your own fonts. Technically the @font-face method for embedding your own typefaces has been around pre-HTML5, but seems to have taken off more since the HTML specification changed. The ability to use your own fonts avoids the issue of needing the user to have installed that font on their own machine because they are stored on your web server instead.

For simplicity you should put any font imports at the top of your CSS file so that when you refer to it anywhere in your CSS, it correctly pulls it through.

CSS Tricks calls this method the one with ‘deepest support’ – i.e. one which works in pretty much all browsers:

@font-face {  font-family: 'MyWebFont';  src: url('webfont.eot'); /* IE9 Compat Modes */  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */}

font-family is where you define the name you’re going to use anywhere else in your CSS. The various src entries are font files in various formats (because different browsers support different font file embedding. Note that the path you’re using is relative to the .css file. So if your font is in a sub-folder you will need to adjust your src declarations: e.g. src: url('subfolder/webfont.eot');.

Converting Your Font Into These Formats

Presuming your font has an appropriate license permitting you to use it for website embedding, then you can convert the file you download or purchase. There are a number of available tools, but by far one of the best (which also checks that the font you are trying to convert permits you to do so) is Font Squirrel’s Generator.

Once you have converted your font, then update your CSS and upload your fonts to the webserver to see them in action.

Importing Fonts Using the <LINK> Tag

A second way you can use fonts is to use the <link> tag inside your <head> of your CSS. Here’s the syntax:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">

This example is taken from Google Fonts (a great source of free fonts). Unlike @font-face you cannot set your own font name if you’re using another domain’s CSS, so always check your font-family usage in your CSS for typos if the font isn’t rendering properly.

Older Browsers

The reason I don’t often encourage this method of using custom fonts is that some older browser (especially old Internet Explorer versions) don’t support this. Hopefully with the dawn of Windows 10, this issue will gradually fade into the past. But for now, both for server control and website speed, I recommend using the @font-face method over the <link> tag method. Although the observant will notice this website’s theme uses the <link> but that’s how the original creator of the theme chose to do it. When you’re building your own site from scratch, you make the rules!

Still Provide a ‘Fallback’

We covered above that you should have a list of fonts in your CSS. This should still be the case when using custom fonts, in case the browser viewing your website has disabled them (which they can). So this means you should still have (say, in your body{ } declaration:

font-family:'My Custom Font','Trebuchet MS','Verdana','Arial','sans-serif';

So that you still have some control over the display of your page.

TL;DR – HTML, CSS and Fonts

With the dawn of custom fonts a lot more flexibility has been given to website owners in how their sites look. Abandon the old HTML methodology and embrace CSS fonts, whether you store them on your web server or link to an external font library. And always check your URLs to the font files are correct, and provide a fallback list of typefaces.

Well done on getting this far. You’ve earned a cookie!