Adding your own custom fonts

One of the problems of the Web has been the lack of any font which you can guarantee will be on the user's computer.  If your chosen font does not exist on their computer they will not see your pages as you wanted them to.

Font failure

Create a new HTML page and save it as fontface.html.  Create a paragraph with some text in it.  Then add this rule set to the embedded style sheet:

p {
    font-family:Verdana, Helvetica, sans-serif;
}

Note the appearance of the font carefully.  Now change the rule to this by adding the Driftwood font:

font-family:Driftwood, Verdana, Helvetica, sans-serif;

Look again at fontface.html in your browser and the text should be unchanged (unless you just happen to have the Driftwood font on your computer).  The page still works because the browser will just move on to the next font in the list.

Font-face

This was created by Microsoft to allow downloadable fonts in Web pages.  Download the driftwood font and save it in the intermediatesite folder with textcss.html.  Try textcss.html again if you want but it will still not work.

In fontface.html add this CSS above the p rule set:

@font-face {
    font-family: 'Driftwood';
    src: url('driftwood.ttf') format('truetype');		           
}

This sets the name for a new font and tells the browser where the font file is.  Save and refresh and this time the font should work and the difference should be clear.  The browser realised that the font didn't already exist on the computer and downloaded it.

Note that in Internet Explorer and Edge there is a security precaution which prevents fonts being used in this way if their status (set within the font file itself) is not set to installable.  You can use a font editor or other utility to change this setting.

Other font types

The above font is a truetype or opentype font which has historically been the most reliable type to use.  In the future though try to use woff or woff2 fonts where possible:

• truetype - the most compatible but probably on the way out
• woff - also well supported but quicker
• woff2 - an improved version which looks like being the future preferred format
• embedded-opentype - Microsoft only and should not be used

Best compatibility

You can include several different font types in the @font-face declaration by separating them with commas (don't do this now):

src: url(url('webfont.woff2') format('woff2'), url('webfont.ttf')  format('truetype');

The browser will use the first one if it can and if it cannot it will try the next in the list.

Other variations

Most fonts will come with a bold version.  Some may also have an italic version.  If you want to use these you would set them up in the same way as the one above.  That means that to use a font with standard and bold variants you need to download both font files and then do this (again don't yet):

@font-face {
    font-family: 'Ebrima';
    src: url('ebrima.ttf') format('truetype');               
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ebrima';
    src: url('ebrimabd.ttf') format('truetype');               
    font-weight: bold;
    font-style: normal;
}