Using Google Web Fonts (Needs Some Quotation Marks)

http://www.google.com/webfonts has a great collection of web-licensed fonts to use freely in your web pages. It also has a very easy interface for picking the fonts you want and adding them to your web pages.

One small glitch: In Firefox (at least version 14.0.1) you have to enclose CSS src url(‘site’) (and @import url(‘site’) in single quotes. The Google-supplied code doesn’t (currently) do that. Without the single quotes, the font doesn’t load. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp shows the proper syntax has the single quotes.

Google says in your CSS file, put this:
@import url(http://fonts.googleapis.com/css?family=Uncial+Antiqua);
but should be this (notice the single quotes):
@import url('http://fonts.googleapis.com/css?family=Uncial+Antiqua');

Browse to the Google API URL (e.g. http://fonts.googleapis.com/css?family=Uncial+Antiqua). Copy the CSS from that page.

It should output this:

@font-face {
font-family: 'Uncial Antiqua';
font-style: normal;
font-weight: 400;
src: local('Uncial Antiqua'), local('UncialAntiqua-Regular'), url('http://themes.googleusercontent.com/static/fonts/uncialantiqua/v1/F-leefDiFwQXsyd6eaSlltK4x0DJI-T8q5ozNuxBQHo.woff') format('woff');

[instead of url(http://themes…woff), it should have single quotes around it, url(‘http://themes…woff’) ]

Paste the Google URL into your browser address bar, copy the result into your CSS file, and add the proper quotes.


Posted

in

,

by

Tags:

Comments

Leave a Reply

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