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 Comments on “How-to: Using Your Own Fonts in a Web Site”
Leave a Reply
You must be logged in to post a comment.
Nic
2 August 2012 at 23:35This 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!
Barry Christian
26 May 2011 at 05:46That is the first time I’ve commented proper here and I ought to say you give real, and quality information for bloggers! Wonderful job.
Carl - Web Courses Bangkok
25 May 2011 at 12:57I love Google for giving us the font directory. It is also nice that it is just so easy to install and the fonts are free for use.
Also the list of fonts is getting bigger and bigger!
admin
25 May 2011 at 17:15It really is a good service. I sure did enjoy the article Laura put on your web site about it. Very useful.
auto diagnostic scanner
14 May 2011 at 11:39Very interesting. I never noticed that this could be done. Hopefully now I can finish one of my pages that contain the different types of font I was talking about.