How To Safely Use Non Web-Safe Fonts

A big part of great design is great typography. But when it comes to web design, this can become difficult. There are only a few generic fonts such as Arial and Times that are deemed “web-safe”. Anything else, and you can’t be sure that the user has it installed on their computer and it will display properly. Most people just use images. But this causes problems from an SEO standpoint, and increases site loading times, and is unrealistic for body content. That’s why I’m going to show you a better way.

The answer lies in CSS3’s @font-face.

It’s very simple, all you need to do is upload your font files to your server, add a few lines of code in your CSS file, and you’re ready to go! That is how many helpful services such as Google web fonts and TypeKit work. While they are nice, their font supply is limited, you may have to pay for the service or you may have their watermark on your site. Why not just do that yourself? Here’s how.

Convert your font to .ttf (for most browsers), .eot (for Internet Explorer), and .svg (for mobile browsers) using a service like Font2Web.

Upload your these three font files to your server.

Insert this code into your style sheet.

@font-face {
	font-family: ‘your-font’;
	src: url(your-font.eot’);
	src: url(your-font.woff’) format(‘woff’), 
	     url(your-font.ttf’) format(‘truetype’), 
             url(your-font.svg’) format(‘svg’);
}
h1 (or whatever element, class, etc. you're applying it to) {
	font-family: your-font;
}

Enjoy your beautiful custom now web-safe fonts!

Note: Be sure you have the proper license to do this. A good place get fonts free for commercial use is Font Squirrel.

Get this delivered to your inbox!

It's quick, free, and painless.

Comments

  1. Well, it looks like you’ve already gotten your first backlink from a self-allegedly crapy webmaster. Congratulations, that’s something I’ve never managed to achieve. 😀

    No seriously, this is really good content. I’ve always used Google Fonts up to this point but you’ve taken it a step further!

    Is this compatible in all IE versions?

    You’re welcome to use whatever colors you wish here, but I think I’d give the link colors a bit of coloring (maybe reverse the a and a:hover colors?) Bloggers use bold prose to emphasize a point, and most readers might not know it’s anchor text here. Just my two pennies.

  2. Hi Daniel,

    I have just started using the Genesis framework for the 1st time, and think this is one of the best themes I’ve seen, certainly for my needs, paid or otherwise.

    I have found that these custom fonts are stripped out in IE8 (didn’t notice at first as I use firefox mainly).

    DOn’t like to ask to many questions, as it’s an excellent free theme you are offering, but how have you got a logo to display instead of text in the header, as I have tried following the Genesis instructions of uploading the logo.png and changing this in the settings, but this results in no logo or text been displayed.

    I have noticed that you use a logo on this example?

    Any help appreciated, but keep up the wonderful work!

    Jon

  3. Update: I have now got the fonts to display correctly in IE8, I had to add a little extra code which was in the css thrown out of http://www.font2web.com/ after converting a font.

    Can’t work out the image logo though?

    • I’m sorry the custom font isn’t working correctly in IE. I use a Mac, so I have to rely on web services like http://netrenderer.com/. I’ll have to get that working on the theme.

      If the Genesis custom header function isn’t working correctly, you can just go into your stylesheet and add these lines to #title-area

      background: url(images/logo.png);
      text-indent: -9999px;

      Just put your logo with that name in /images of course and be sure it’s the right width/hight or edit the width and height of the element.

      Don’t worry about asking to many questions; that’s fine. I’m glad you like the theme. 😉

      • Thanks for the reply Daniel.

        I did get it working quite easily using this code (I think a small part of this is missing in your css, but heh, I only got this from the resources you suggested:

        @font-face {
        font-family: ‘MYFONTNAME’;
        src: url(‘MYFONTNAME.eot’);
        src: local(‘☺’), url(‘MYFONTNAME.woff’) format(‘woff’), url(‘MYFONTNAME.ttf’) format(‘truetype’), url(‘MYFONTNAME.svg’) format(‘svg’);
        }

        Thanks for the tip on the header logo. I was going to replace the font with an image, but I now like the fact I can use these custom fonts, so I may stick with that.

        I’m enjoying working with your theme, it’s so clean. I’m finding a few tweaks are required but that’s the fun bit. I’ll send you the link when I finished and be sure to credit you 🙂

  4. This is such a great resource, Daniel. I’m finding myself coming back to your articles. That Font2Web site is magical — and like Jon says above, they even provide you with the CSS to implement the new font on your site. Saves a ton of Photoshop work, and the fonts come out cleaner than they otherwise would. I’m loving this.

    • Thanks, Martyn. Yes, Font2Web is an extremely helpful site! I don’t understand why that happens, but yeah, text is always more crisp than a regular jpg or png image.

  5. If you do this can people not view the source of your webpage and find the url to your font files. If they download them could you be in trouble for file sharing?

  6. Hamidjon says:

    Browsers showing the tickness of fonts (PT Sans) unproportionally… Maybe this is a bug of Font2Web?

    • I don’t know why exactly that would happen. Have you compared what shows in the browser to the .ttf file?

      • That is why .ttf file seemed differently in other browsers and I see the differences… browsers show .ttf file different (more accurate).

  7. Yes! Finally something about computers.

  8. Hi,

    I have a number of fonts (i.e. bold and italic version of the normal font) that I’d like to use.

    How do I reference those in the CSS?

    Eloise

  9. Hi there,

    Thanks for the great advice. My question is: if I want to make my new web-safe font appear on a blog, in this case powered by Blogger, where the server is not my own, where do I upload the files?

    The blog belongs to a friend of mine and she does have her own domain name for it rather than the standard generated blog address; is there any possibility of uploading the fonts through whatever hosts that domain at all? (Sorry if this is a silly question; I’m a real rookie at this stuff!)

  10. Just wanted to say thanks for the article. I’m sure there’s plenty of info about this stuff on the web but yours was simple and well explained. 🙂

  11. Unquestionably believe that which you said. Your favorite reason appeared to be on the web the simplest thing to be aware of.
    I say to you, I certainly get irked while people consider worries that they plainly don’t know about.
    You managed to hit the nail upon the top as well as
    defined out the whole thing without having side effect ,
    people can take a signal. Will likely be back to get more.

    Thanks

Trackbacks

  1. […] View original here: How To Safely Use Non Web-Safe Fonts | Code Chirps […]

Leave a Reply to Eloise Cancel reply

*