Delicious.Com Bookmark this on Delicious StumbleUpon.Com  Recommend at StumbleUpon

Introduction to using Google Web Fonts

I would like to thank www.computershopper.co.uk/ magazine for getting me started with Google Web Fonts. Nik Rawlinson's "Web Expert" column in the "September" 2012 issue gave me my start. While I continue my subscription mainly on simple momentum, a gem like this from time to time always stays my "cancel it" hand. The web is great for many things, but you can't beat a team of editors scouring the web for things that are worth your time... and safe.

This page will show you about using Google Web Fonts... (with a footnote about avoiding the need!) The following should have been rendered in a typeface I like, but which isn't on your computer or mine...

Testing the Quick Brown Fox jumping over the lazy dog, 0123456789

What you see above (should be!) rendered in a typeface which looks like it was drawn with a calligrapher's pen, and in blue. I.e. it should be a blue, and smaller, version of the following which should be in green...

Text as graphic

Before we go forward with HOW to do that, we should ask do you WANT to do it? If you just want a little pretty text in your webpage, e.g. a header, you can do what I did to create the green version of the text, the second example... I created a graphic of the text I wanted, in the typeface I wanted, and that is displayed using the HTML "img" tag.

Before you sneer too aloofly at this crude "answer", be advised that it has numerous advantages... principally that it is a simple answer, which will impose few burdens on your readers' systems. It does of course, though, have shortcomings. If you are reading this, you probably know what they are, and are ready to move forward.

If the first version of "Testing the Quick Brown Fox..." is NOT in the calligraphic typeface, then I would love to hear from you as to what operating system you are using... Mac? Linux (which flavor)? XP?... and which browser.

And if the first version is not in the calligraphic typeface, you have a nice example of why the simple answer, for all its shortcomings, appeals to me!

One other reason for not using Google Web Fonts is that you will be asking your readers to wait while the fonts you use download, on a use- by- use basis. On a fast system, if you don't go mad ("Typesetting by Monty Python"), this will probably not be an issue. Especially as browsers are so clever about buffering. Who would have thought that something like Google Maps' smooth scrolling would ever be possible? But... be careful. Not everyone's system is as fancy as yours.

On the other hand, the blue version above, using Google's Web Fonts, has active word wrap, renders crisply at different zoom levels. (Zoom levels?? Haven't you tried, at least with Firefox, holding down your ctrl key, and then pressing the "+" sign? (Use ctrl-0 (zero) to get things back to normal!)

Furthermore, if you choose to use a Google Web Font for extensive parts of the text in your page, you will soon pass a "break even" point between the overheads of downloading the font and using images.

How to use Google Web Fonts... the simple answer...

Well... relatively simply! Probably not a good answer, but one I can understand!

This material follows on from material on another page I wrote about CSS use. If the following "goes to quickly", you may want to look at that other material first.

For my "simple" answer, all I did was....

1)Go off to the Google Web Fonts site (www.google.com/webfonts) and browse around until I found a font I liked. I then used the "Quick Use" button to move to the page with the HTML I needed...

<link href='http://fonts.googleapis.com/css?family=Redressed' rel='stylesheet' type='text/css'>

The HTML you need is a little way down the Google page. If it "isn't there", don't forget to scroll down! (What you fetch, for the typeface of your pleasure, will be very similar, differing in the "Redressed" part... that was the name of the typeface I've been using.)

I copied and pasted the HTML into the page you are reading. Not the best answer. Part of the simple answer. Read on. Google tells you to make that the first line in the <head> section of your page. On mine, it is near the end of the HEAD section, but BEFORE the tag linking to my stylesheet.

Here's a bit more from Google on where to put the "link" tag...

Note: For best display in IE, make the stylesheet <link> tag
the first element in the HTML <head> section. In IE, if
the link is placed after <script> tags, the entire page will
block and not display anything until the web font is loaded.

2) Then I made a stylesheet (I used a crude name: "CSSforHH4goowebf.css") containing...

p.SimpleTest {color:#0033CC;
  font-family:"Redressed","courier new";}

... and saved that in the same place as the page you are reading is served from.

3) In the <head> section of the page you are reading, I put...

<link rel="stylesheet" href="CSSforHH4goowebf.css">

That's it!

That's everything in place! Robert is your father's brother, as they say.

What did it take, in addition to steps 1 to 3 above to arrange for the previous paragraph to appear the way the blue "The Quick Brown Fox..." appears?

The paragraph "That's everything..." was in my page as follows...

<p class="SimpleTest">That's everything....</p>

After the way has been prepared, you just add the class="SimpleTest" bit when starting a paragraph.

Yes... you can create custom classes for other page elements, e.g. an <h2 class="SimpleTest">Header</h2>

You can even re-define basic elements, like the <p>Paragraph</p> and<h2>Header</h2> blocks.

Ta da!... but let's go one better....

Better answer...

What I described a moment ago is how my page USED to be.

What was wrong with that? I'd rather not have the...

<link href='http://fonts.googleapis.com/css?family=Redressed' rel='stylesheet' type='text/css'>

... in the page. "Good" CSS separates the "how" out from the "what".

"All" I did, to achieve a "better" result was to move the...


... stuff from the page you are reading, to MY CSS stylesheet, "", the one that says how the page you are reading should be rendered.

Why better? Imagine you had ten pages like this one. And you wanted to change the typeface used in al text of a given class across all ten pages? Much easier to change one line of the CSS file, than a line in each of the ten page headers!

Not only is that easier, but it also creates a more robust system... you don't have to worry about forgetting the tweak in one of the dependent pages. Of course, it also means more "hidden stuff" "doing things" behind the scenes.

But HOW you "move" that single line is the trick!

Instead of the "<link href='http://fonts.googleapis..." in the page with the text to be displayed, you put....

@import url(http://fonts.googleapis.com/css?family=Redressed);

... in the stylesheet "driving" the page!

Note! It would be usual to use the same .css file to control the appearance of several pages. In normal use, the name of the .css file would not tie it so closely to a single page of HTML as the name I've used for this page. The name could be, say "AFoolishName.css"... as long as you used that in each relevant place. The name is up to you. Choose something that helps you, like "HtmlTutorialsPages.css", which would be a fine name for the .css for a number of pages with help on writing HTML.

A warning...

"In the land of the blind, the one-eyed man is king".

I am perhaps a "half eyed man" when it comes to CSS. And CSS is notorious for working inconsistently across different platforms. I hope the above has been interesting and useful. Please let me know if you have problems with what I've commended to you?

External typefaces not wanted?

If you are reluctant to complicate things with external fonts, I'm with you!

For many, many years I simply left the way text looked to you, gentle reader. (You can configure your browser in all sorts of ways.) I've unbent a little... but not a lot. I will use styles and CSS to help make computer code stand out, I admit.

At July 12, http://www.w3.org/TR/CSS21/fonts.html lists the following as the available generic font-family names: serif, sans-serif, cursive, fantasy, monospace. (A little detail: Note that the last is the name for a font-family. You cannot get, say, Times New Roman to give up its proportional spacing by sticking "monospace" in somewhere. Sorry!)

Quoting from the w3 page: "Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected."

To set up this fallback mechanism, always include one of the generic family names at the right hand end of the list of fonts following any use of "font-family".

If you want to be a little adventurous with typefaces, I was pointed to the web design page just cited by Nik Rawlinson in his excellent "Web Expert" column in the ink-on-paper from Computershopper.co.uk of September 2012. He also told us that...

You can now assume that everyone with a
desktop computer or laptop... will have
(in addition to the early standard fonts,
   Verdana, Arial, Courier New, Times New Roman,
   Serif and San Serif)
Palatino, Arial Black and Narrow, Lucida Sans...

A full list....


At that site, there is a nice "sampler", and information on what you need to put in your HTML to get something close to the typeface of your want to display on whatever device, with whatever browser.

Here are just a few samples of some fonts used a simple, direct way. (I am indebted to http://catcode.com/styleinfo/family.html for that approach to using "font-family".)

Before the samples, I will show you the HTML which produced the first few...

<div class="tmpTKB">
<span style="font-family: serif;">Generic serif text</span><br>
<span style="font-family: monospace;">Generic monospace text</span><br>
<span style="font-family: cursive;">Generic cursive text</span><br>
<span style="font-family: fantasy;">Generic fantasy text</span><br>
<span style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;">Lucida Sans/ Grande text, with san-serif fallback</span><br>

The first few don't use a "named" font, from your operating system. They "demand" your browser's default font. (It will, of course, be something from your OS... but I wanted to stress the selection mechanism for you.)

Whenever you use "font-family", as explained in the quote from w3.com, it is wise to finish the list of fonts you hope to use with one of the HTML defined "generic font family" names... in case the browser can't find any of the other font families you listed. (The browser will work through the list from left to right until it finds a font it can use.)

The Lucida example is fancier in two ways.

The basic form of the line, using words all in caps for things to be replaced in a specific instance of the line, is....

<span style="font-family: LIST-OF-FAMILY-NAMES;">TEXT-TO-DISPLAY</span>

The following would be fine as a LIST-OF-FAMILY-NAMES (hereafter called a "LIST")....


(That, by the way, is a legitimate LIST.)

To make things simple for the browser, so it can be fast, we've agreed that a space will be important. Therefore, the following would cause problems, even though there is a commonly available font-family called "Times New Roman"...

Times New Roman, serif

We can hide spaces by enclosing them in single quotes. Thus, the following is fine...

<span style="font-family: 'Times New Roman', serif;">Times New Roman (or, failing that, "serif") text</span>

We had to use single quotes around the Times New Roman name to hide the space without the problem we'd have if we used double quotes. If we'd used double quotes, it would look like we were closing the open quotes which happened just after the style =, wouldn't it?

And another thing... Why three names in 'Lucida Sans Unicode', 'Lucida Grande', sans-serif? And how do we know what we can use in a LIST?

'Lucida Sans Unicode' is a commonly found font on Windows computers. 'Lucida Grande' is a similar font commonly found on Macs, and both are similar to what the "built in" 'sans-serif' typeface should look like.

How did I know those names? They're in the sampler at http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html, which I commended to you earlier.

Here's the result of the code given above, and a few more, similar lines....

Generic serif text
Generic monospace text
Generic cursive text
Generic fantasy text
Lucida Sans/ Grande text, with san-serif fallback
Impact, Impact5, Charcoal6, sans-serif text
Lucida Console, Monaco5, monospace text

(Note the Lucida Console option... a monospaced font alternative to 'Courier new').

A little bonus...

At the excellent http://www.w3.org/TR/CSS21/fonts.html you can read details, if you need them, of the following...

Just as you specified the "font-family", you can also include the following after <span style=". Separate these with semicolons. I'll do an example in a moment.

font-style: italic
font-weight: bold
font-variant: small-caps

Play with these at your own risk! There are pros and cons. They are also the sort of thing that "falls down" with some browsers.

If you want to manipulate the size of text... I've done a page about changing text size for you!

Examples using the other font-family attributes...

Generic serif text
Generic serif text.. with "style italic"
Generic serif text.. with "weight bold"
Generic serif text.. with "weight bold"and"style italic"!

(If you are thinking "I can already do that with, e.g., <b>, you are missing something. When you start using CSS, you can set the look of whole sections of your pages by including this sort of stuff in the CSS. It is like using "styles" in word processing.)

Here's what produced the above...

<span style="font-family: serif;">Generic serif text</span><br>
<span style="font-family: serif; font-style: italic">Generic serif text.. with "style italic"</span><br>
<span style="font-family: serif; font-weight:bold">Generic serif text.. with "weight bold"</span><br>
<span style="font-family: serif; font-style: italic; font-weight:bold">Generic serif text.. with "weight bold"<b>and</b>"style italic"!</span><br>

Here's "An example of small caps"... typed like that... but displayed with font-variant:small-caps

An example of small caps

Other useful arguments allowed for font-style:

Other arguments allowed for font-weight:

Note that there are often "bold" or "italic" versions of major typefaces. You can either treat them as a "different face", and select them by name, or you can achieve something similar to, say, the typeface Arial Black by using font-weight:bold with the "basic" Arial....

Arial, without font-weight:bold
Arial, with font-weight:bold
Arial Black (with font-weight:normal)

(The advantage of using the "different" font is that it will have been crafted by a human, not just created by applying a "bulk it up" rule. You could "tweak" things to get all of them to appear at the same size.)

The above created with...

<div class="tmpTKB">
<span style="font-family: Arial,san-serif;">Arial, without font-weight:bold</span><br>
<span style="font-family: Arial,san-serif; font-weight: bold">Arial, with font-weight:bold</span><br>
<span style="font-family: 'Arial Black', 'Arial Black', Gadget, sans-serif; font-weight: normal">Arial Black (with font-weight:normal)</span><br>

Other arguments allowed for font-variant:

What use is "normal"? Why not just leave the font alone, if you want normal. Ah! Grasshopper... Glad you asked!

I really have to get back to working on my "day job", but...

We've seen how we can do lots of things to various elements of a web page.

If you are using font-family, font-weight, etc, in style sheets (CSS), there is an additional really cool dimension which is more fully explained at http://www.w3.org/TR/CSS21/fonts.html#font-styling...

If, say, you have redefined how anything between the <h3> tags will ordinarily appear, then you can over-ride your generic settings. Probably either with inline tags, like the ones used for almost every effect on this page, or even in the CSS.

The following is a quote from the page just cited. I leave it to you to "get it working"!!! (No... I haven't said anything on this page about this "emphasized" text spoken of in the quote. Sorry! Day job needs me!)

If you've set things up...

h1, h2, h3 { font-style: italic }

... and after that, in you CSS, you further say....

h1 em { font-style: normal }

... then emphasized text within 'H1' will appear in a normal face.

Lastly... Inherit...

See also "inherit"... an argument allowed for many of the things we've been discussing.

Click here to go to the site's MAIN index... Helpful Hints is just one corner of the site.

Looking for email, domain registration, or web site hosting? If you visit 1&1's site from here, it helps me. They host my website, and I wouldn't put this link up for them if I wasn't happy with their service. They offer things for the beginner and the corporation.

Ad from page's editor: Yes.. I do enjoy compiling these things for you. I hope they are helpful. However... this doesn't pay my bills!!! Sheepdog Software (tm) is supposed to help do that, so if you found this stuff useful, (and you run a Windows or MS-DOS PC) please visit my freeware and shareware page, download something, and circulate it for me? Links on your page to this page would also be appreciated!
Click here to visit editor's freeware, shareware page.

How to email or write this page's editor, Tom Boyd

Valid HTML 4.01 Transitional Page tested for compliance with INDUSTRY (not MS-only) standards, using the free, publicly accessible validator at validator.w3.org It almost passes! There are two "problems" which I have reasons for overlooking... but usually problems can (and should) be solved!

Why does this page cause a script to run? Because of the Google panels, and the code for the search button. Also, I have my web-traffic monitored for me by eXTReMe tracker. They offer a free tracker. If you want to try one, check out their site. Why do I mention the script? Be sure you know all you need to about spyware.

....... P a g e . . . E n d s .....