Many of you already know that you can use web services like Google Fonts and Cufon to get custom embedded fonts in your website. Those were great except for your site relied on JavaScript to embed and render the fonts onto the site. The problem with this is that some users might have JavaScript turned off which will cause the fonts to not display as you want. Now all that hard work we put in to making the site look awesome is all gone. There is a solution though! It is by using a little CSS3, and the @ font-face element. Currently, my site uses the Google Font service, but I am changing right now to @font-face, and inviting you to join along for this quick but powerful change!
First we are going to visit this nice little site called Font Squirrel. Font Squirrel is a site that allows you to easily generate @ font-face code. It is free to use and was founded by Ethan Dunham. If you use it, and like it, I recommend that you send Ethan a shot out @Ethan Dunham and say thanks!
For my site, I use Trajan Pro for my Headers. We will need to upload the font in the @font-face generator. Be sure to check the eula’s for the site you want to use.
Just choose the default settings, and you should be fine. Check Yes, the fonts I’m uploading are legal, and then click the Add Fonts Button at the top.
Next select the font you want to generate and click Open.
Next you will have the option to select and download your kit.
Now once the Font Has been generated, go ahead and download.
When you download, you will get a zipped file. Unzip it and it should look like below.
What we want to do now is copy the EOT File, SVG Document, TrueType font file and WOFF File to our site. In my case, I created a fonts folder in my site.
Next, open up the stylesheet and copy and paste the code that was generated for you into your existing stylesheet and edit the file source url. In my case it would be url(‘fonts/trajanpro-bold-webfont……
[code language=”css”]
@font-face {
font-family: ‘TrajanProBold’;
src: url(‘fonts/trajanpro-bold-webfont.eot’);
src: url(‘fonts/trajanpro-bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/trajanpro-bold-webfont.woff’) format(‘woff’),
url(‘fonts/trajanpro-bold-webfont.ttf’) format(‘truetype’),
url(‘fonts/trajanpro-bold-webfont.svg#TrajanProBold’) format(‘svg’);
font-weight: normal;
font-style: normal;
}[/code]
To use the embeded font, all you have to do now is just use the font-family:’TrajanProBold’; that was generated in the style. Now that I have that done, I need to change my heading classes. I am going to target all on my h tags in one line!
[code language=”css”]
h1,h2,h3,h4,h5,h6 {
font-family: ‘TrajanProBold’;
}[/code]
Thats it! Now I have changed my embedded fonts for my heading tags. The best part is, it is fully cross browser compatible. All I have left now is to remove the script src for the Google fonts, and clean up the old css from Google Fonts.
Update: Font Squirrel has become a little more strict on fonts that are allowed to be uploaded. As an alternative, you can use http://www.font2web.com/
If you liked this, share and comment!
