bridget makes icons. (tellthenight) wrote in rp_tutorials, @ 2012-04-26 21:50:00 |
|
|||
Entry tags: | html, question: google fonts |
Google Web Fonts
OR Everyone's favourite SO PRETTY BUT SO FRUSTRATING web design technology in the history of the universe. Okay, not really, but whatever. I've seen a lot of people asking questions about Google Web Fonts, which is one of the coolest things I've learned this semester in my web classes. Aside from Aurora, of course. And I noticed that most of these questions were difficulties with Scribbld or the font just not wanting to work, so after talking to ~chaperoned briefly, I figured I'd go ahead and come write up a quick tutorial on how to use Google Web Fonts, and trouble-shooting some common errors. There are screenshots, although primarily this is a text-based tutorial. Bridget rambles a bit a lot.
Please note that this is a tutorial that assumes you have a bit of HTML/CSS under your belt, but no experience whatsoever with Google Web Fonts. If the instructions seem rudimentary, again, it's assuming that this is your first time looking at Google Web Fonts.
I feel like the tags on this may need some help BECAUSE I SUCK AT TAGS D:
http://fonts.googleapis.com/css?family=
and add your font's name at the end of it (with words separated by the + sign if the name is more than one word). After you hit enter, you should be able to retrieve the CSS selector to go in your <head> tag.As another note, I would highly recommend using similar line-breaks and spacing if you don't already, as it can make it LOADS easier to trouble-shoot. I say this as a student of web programming, whose life at this point pretty much depends on accessibility of code for purposes of trouble-shooting. Spacing can be your friend.h1 { font-family:Cookie, "Trebuchet MS", sans-serif; text-align:right; font-size:28pt; color:#A4D49D; }
body { font-family:"Noticia Text", Georgia, serif; font-size:9pt; }