Embed custom fonts on your website with the @font-face property
Ryan Boudreaux shows you how to get custom fonts into a usable form for your website designs by employing the @font-face property.
My last post on getting font inspiration from film and television pointed out several custom fonts that were created based on the opening credit titles for films such as Men In Black and Back To The Future and television series such as I Dream of Jeannie and Gilligan's Island. In this second part, I will show you how to embed these custom fonts into your websites, enabling users to view and appreciate the nifty fonts no matter the browser or device.
Viewing custom fonts from your website
Now that you have downloaded a collection of nifty film and television true type fonts, you may be wondering how you get them to a useful state on your website. Unless your users have the same fonts installed on their local devices, they will not be able to view your clever custom fonts. Luckily, there is a way to get these customs fonts onto your user's devices using several options; the first is to employ a graphic image editor, and the second is to incorporate the@font-face property in your CSS.
One alternative to solving the problem becomes the task of creating titles, logos, or headings from your favorite graphic image editor, presuming that you have already installed the font on the local PC, then all you need to do is create the textual content utilizing the particular custom font. Similar steps for creating titles in this manner are described in the tutorial, "Create a minimalist web design layout using Photoshop," in particular, the part which describes creating the header section in the post. A portion of the process is shown with the "Web Site Name" text in Figure Abelow. However, this process means that your website titles and headings will give up some SEO recognition, since text displayed as images will not register in most search engine scans.Figure A
A better option entails pushing the custom fonts to a central directory on your web sever, and then creating a set of CSS style properties to call them as defined. For instance, you might place all your web fonts in a directory such as /htdocs/web/fonts.
In this example I will use the Back to the Future font for first level headings, the I Dream of Jeannie font for the second level headings, and the Gilligan's Island font for paragraphs. This might not be the best use of typography for a web page; however, this is for demonstration purposes only. I downloaded and copied the three *.ttf files to my font directory, and then created the index.html file along with CSS file styles.css.
Utilizing the @font-face property in the CSS allows you to call any custom fonts and ensures that they will be displayed for any user. You can add an unlimited number of @font-face property declarations as you wish; as in this case, I have three as displayed in the CSS code snippet below:
@font-face {
font-family: bttf_font;
src: local(bttf_font), url('fonts/bttf.ttf') format('opentype');
}
@font-face {
font-family: jeannie_font;
src: local(jeannie_font), url('fonts/jeannie.ttf') format('opentype');
}
@font-face {
font-family: gilligan_font;
src: local(gilligan_font), url('fonts/gilligan.ttf') format('opentype');
}
Then the font-family is assigned to the individual elements:
h1 {
font-family:bttf_font;
font-size:32px;
font-stretch:extra-expanded;
}
h2 {
font-family:jeannie_font;
font-size:24px;
font-stretch:extra-expanded;
}
p {
font-family: gilligan_font;
font-size:18px;
}
Internet Explorer
There is a known issue with older versions of Internet Explorer that do not render *.ttf file types, and they must be converted to an *.eot file type. In these cases, you would need to convert the *.ttf file to an *.eot file and then add that to your @font-face property. In the case of the Back to the Future font, it would appear first in the font stack:
@font-face {
font-family: bttf_font;
src: url('bttf.eot');
src: local(bttf_font), url('fonts/bttf.ttf') format('opentype');
}
Check out the MSDN Library on About Font Embedding for more information on creating the *.eot files for your custom font stack.
The demonstration files are available for download, and the demo page is displayed in Figure Bas shown in Chrome 20.0.1.Figure B
Do you use any custom fonts for your websites? If so, tell us which fonts you use and how you have implemented them.
