Use Your Favorite Font on Your Website with CSS Web Fonts [con't]
The Perfect Solution: CSS Web Fonts
The solutions described in the previous section try to work around the problem rather than solving it at its root. What if you could continue to build your site using HTML, which is extremely light and plays nicely even with slow Internet connections, and yet display the text in your favorite font? That would be perfect, wouldn't it?
The solution to this problem lies in CSS Web fonts. Using CSS, you can tell modern browsers that when a user doesn't have the font you are using, it should download it so that the text can be rendered in the particular font. You will be amazed to see how easy this is.
First, you need to define a new font face in CSS and then use it as though it is a regular font. Here is an example:
@font-face construct is simple to understand. The font-family attribute specifies the name of the font that will be used to refer to it in other styles, and the src attribute specifies where the font file is located.
Next, you need to upload the font file to your server just as you upload images. And that's it!
For a demo of Web font in action, try this code:
Google Web Fonts
While you can upload the font to your server, Google hosts a good collection of fonts that you can link to from your site. All you need to do is to link to a stylesheet from Google, and the results are wonderful:
For more information, read the Google Web fonts primer and read through the list of available fonts from Google.
Find a programming school near you