Daily Life, Design

Useful tool for web designers

I am kind of excited about this… not going to lie! Call me a nerd, I know that I am.

Anyway, I have been coding several sites lately where the site owners want to use a specific font on all of the pages. As most of you designers may know, this is hard to accomplish in IE since it does not support font embed for CSS3.

Well, I found this great online tool that converts TTF to EOT!

For those of you who are unaware, EOT is the only font type that is supported when embedding fonts in the stylesheet for IE.

And, the online tool does all of the work for you (and you don’t have to install anything)! It even gives you the code you need to use!

Check it out here.

I want to make sure this is really clear for everyone, so here are some further instructions.

  1. Convert the .tff you want to use on the website using this tool.
     
  2. Once the font is converted, save it into your website folder (along with the .ttf if it isn’t already).
     
  3. Copy the code it gives you. I edited it a bit so it goes in the styesheet and not the head of your website.

    @font-face {font-family: jenkins; src: url(“JENKINSV.eot“) /* EOT file for IE */}
    @font-face {font-family: jenkins; src: url(“JENKINSV.TTF“) /* TTF file for CSS3 browsers */}

  4. The information that is in bold is unique to my font. You will have your own name. For the font family, pick a name that you will remember and use what you wish.
     
  5. When it comes time to use the font in a tag, it will look something like this:
    .post-title {font-family:jenkins,Georgia,”Times New Roman”,Times, serif;}

    or

    .post-title {font:10pt jenkins,Arial,Helvetica,sans-serif;}

  6. Walla! Once you upload all of the fonts and the stylesheet, it will now be working!

I hope you all enjoy this tool and love it as much as me!

Leave a Reply

Your email address will not be published. Required fields are marked *