Knowledge of Font – Part 2

fountain-of-knowledgeWhy not use an image?  If you put the text into an image and make the image background the same as your site background, you can use any font on your system and not have to worry whether the user has it on their system or not.  There are several reasons why this is usually not the best strategy.  First, this may create problems for people browsing with images turned off and for the visually impaired using a screen reader.  Second, although you can and should use alt (alternative) text for your images, this is not ideal for SEO.

There are image replacement techniques but these can be cumbersome.  One of the simpler ones involved using the image as a DIV background and the text goes in a SPAN with a huge negative margin to push it off the screen.  This way the text is still available to screen readers but unseen by those browsing normally.  These techniques are no longer needed as you can see below.

The @font-face CSS rule allows you to specify a font that you have available.  This rule is available in all of the modern browsers(IE from version 9+).  The syntax is:

@font-face {
font-family: myfont;
src: url(myfont.woff); }

Presuming that you have placed the font file “myfont.woff” on the server in the same directory as your CSS,  this rule will allow you to use the font “myfont” as you would any other i.e. in your font stack.  Be aware that loading your own font will add weight to your page.  Again, as with images, you need to have the necessary permissions to use the font in this way.

Another way to use beautiful fonts is by accessing hosted fonts.  Google hosts a number of freely available fonts.  As per Google’s site, these can be accessed by adding a LINK tag to the head of your HTML file with the following format:

<link rel="stylesheet" type="text/css" href="">

The new font can be accessed by CSS like so:

CSS selector {
font-family: 'Font Name', serif;

I agree with their suggestion that you should always include at least the generic font family name as a back-up.

So go out there and explore the world of new fonts!

About Robert

Robert is a novice web site developer. A lack of professional training has not prevented him from creating some very nice websites for small businesses who would otherwise have gone without a web presence.


Subscribe to our e-mail newsletter to receive updates.

No comments yet.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.