How-to: Using Your Own Fonts in a Web Site

Do you have a great design idea for web site that uses a very nice looking or special font face?

For Web Designers, this has been a problem because the only way a visitor can view your work of art is if they have the same font installed on their computer. If they don’t your beautiful web design is ruined with a standard looking font face.

Well now you can force your font face styles to be loaded with a web page so the visitor can appreciate your design skills to the fullest. There are currently two methods for providing custom fonts on your web site:

1.) Using Google’s Web Fonts
2.) Using the @font-face attribute in your CSS file

There is a very well written, simple and concise tutorial by Laura at Web Courses Bangkok site on How To Put a Custom Font on Your Web Site using Google Web Fonts.

If you wish to use Google Web Fonts, I recommend you read Laura’s post. It works for most browsers as well.

The other method to embed fonts also works with most browsers, except for the oldest of IE releases (if you use TrueType fonts).
Here is how to use method 2:

Step 1:
Find the TrueType font file or other font file that you need and save it to a directory on your web server.

Step 2:
Edit the CSS file and add the following lines to the very top of the file:

1
2
3
4
5
6
@font-face {
       font-family: "Century Gothic";
       src: local("Century Gothic"), url("http://yourdomainname.com/images/GOTHIC.TTF") format("truetype");
       font-weight: normal;
       font-style: normal;
}

Modify the items to match your domain name, directory, font file name and any associated settings.

You should also modify the styles that you wish to use the new font, with a fallback to a more common font, just in case.

1
     font-family:"Century Gothic", Helvetica, sans-serif;

That’s it!

The above process displays the Century Gothic font correct in Chrome, Firefox, IE7 and IE8.

Leave us a comment and let us know how this process worked for you.

5 thoughts on “How-to: Using Your Own Fonts in a Web Site

  1. This is brilliant! I’m going to try it with a font I made from my own handwriting. If you’re interested in getting your handwriting made into a font, http://www.FontPanda.com will do it for free! They also have some interesting handwriting fonts for free download. Cheers!

    1. It really is a good service. I sure did enjoy the article Laura put on your web site about it. Very useful.

Comments are closed.

 
 
 
%d bloggers like this: