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.
Leave a Reply
You must be logged in to post a comment.