From Google Fonts to @ Font-Face


From Google Fonts to @ Font-Face

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.

Squirrel Font @font-face Generator

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.

Font Squirrel Download

Next you will have the option to select and download your kit.

Download

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.

Zipped File from Font Squirrel

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.

Fonts Folder

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……


@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;

}

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!


h1,h2,h3,h4,h5,h6 {
font-family: 'TrajanProBold';
}

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!

The best way to say you like this article is to comment

  • cristina

    Thanks Riad, very nice tut!! I’m trying to do what you say. First of all I have my Trajan pro font that I like to use in my Mac but when I try to add the font an alert say: “Adobe has requested that their font Trajan Pro Regular be blacklisted by the Generator. You will not be able to convert this font.” I have only the otf font. How can I do?
    Many thanks
    Cristina

    • Cristina, try copying the font onto the desktop first. If it is in the default installation directory, it may not work. Also, if you have permission to use the font, if it is not working, try to rename it. If you don’t have permission to reuse the font, try to search for an alternative font. It is open source though, so download it from here.

      http://www.fontpalace.com/font-download/TrajanPro-Regular/

      Once it is downloaded you can follow the instructions I posted and make sure you check the box that says, “Yes the fonts I am uploading are legally elgible to be embeded”

      If you have any more trouble, just let me know

      • Same here… can’t use trajan pro… 🙁

        “Adobe has requested that their font Trajan Pro Regular be blacklisted by the Generator. You will not be able to convert this font.”

        Is there any way you would be willing to share your already converted and readily usable files for it? 🙂

      • F

        same here pls share the kit with trajan yuo already converted… thanks

        • An update: For those wanting Trajan Pro, you can use Font2Web.com. I verified that it works, so do it fast.

  • An update: For those wanting Trajan Pro, you can use Font2Web.com. I verified that it works, so do it fast.

    • Emman

      Thanks it works. ^_^