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
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:
Find the TrueType font file or other font file that you need and save it to a directory on your web server.
Edit the CSS file and add the following lines to the very top of the file:
font-family: "Century Gothic";
src: local("Century Gothic"), url("http://yourdomainname.com/images/GOTHIC.TTF") format("truetype");
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.
font-family:"Century Gothic", Helvetica, sans-serif;
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.