Sample page showing the use of @font-face

This page demonstrates the use of @font-face with self-stored non-web-standard fonts and fonts served from a font service's web server. You can view the source code to see how each of these styles was achieved by choosing 'View Source' from your browser menu. The CSS is provided in the head tag of the page for your convenience. Please note, I have not given much thought to the fonts I have used in this tutorial but simply chosen fonts that are somewhat different to regular web-safe fonts. I probably would not use these under normal circumstances.

This H2 is styled using Google's service

The H2 tag above is styled using Google's webfont service. Here, we are using Bowlby 1. The font is downloaded from Google's servers when the page loads and is rendered using CSS.

This H3 is styled using fonts stored on my server

The H3 tag above this paragraph is styled using the Chunk Five Regular font that I downloaded from Font Squirrel and installed on my server. Font Squirrel provides a sample style sheet that can be used as the basis for inserting the CSS, if this helps you. However, make sure that you add the correct path to the files that you have stored on your server in the src urls, otherwise the font replacement will not work.