bridget makes icons. (![[info]](https://www.insanejournal.com/img/userinfo.gif){kind=small} tellthenight) wrote in ![[info]](https://www.insanejournal.com/img/community.gif){kind=small} 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:
Picking Your Font
So first, before you do anything else, you need to go pick a web font. To do that, head over here. My personal favourites are Droid Serif and Droid Sans*. But, of course, for this exercise, you can pick whatever fonts you'd like. Now, I'm branching out a little. I've chosen Noticia Text (for the body copy) and Cookie (for headers).
The typography student in me feels obligated to give a quick note, re-emphasising not only ~chaperoned's lovely article (I'M HER FANGIRL, APPARENTLY), but also the importance of legibility. The reason I love the Droid family is that it is very easy to read, and more specifically designed to be read on the screen. I know how awesome display fonts are, because 99% of my fonts are display typefaces that I will probably never use. (I have a font problem.) Anyway, I would advise picking display fonts for headers, and leaving the body copy to sans-serif or serif only. Entirely bold, entirely italic, script, or display typefaces can be extraordinarily difficult to read. And, as my web teacher is so fond of saying, the human eye was not meant to stare at one gigantic rectangular light-bulb. So if we can, we need to make it less tiring on the eyes. OKAY, TEACHER'S PET SOAPBOX GOING AWAY NOW.
Embedding Your Font
I hope this wall of text on fonts gave you time to ignore me and go get your typefaces. Have them? Good. You should be looking at something like this:
Now, there are two ways to grab the font to use it. One of them does not work on Scribbld (my best guess is that it's a file-extension problem), and the other seems to be supported much better. IF you are using this on an external site that is not Scribbld, the first method will, in all likelihood, work.
Method One: When you have found your font, there is a link at the bottom right hand corner of the font box that says “Quick-use”. Click that. It will take you to a page where you can select how the font will appear. (Do you want the ability to use bold, italic, etc.?) Then, you can scroll down and you will find this:
All you have to do is take this link and embed it in your <head> tag, but before your <style> tag. That's it! You're done! Font is embedded. But that doesn't help those of us who use Scribbld, does it? So, on we go to Method Two!
Method Two: When you have found your font, pay careful attention to the name of the font. You will need it. Like in Method One, you will click on “Quick-use”. You will scroll down. When you get there, copy the link only. Open up a new tab and go to that link. You will find a little CSS selector. It will look something like this:
You want to copy that code and put it in your <head> tag, but this time it will go inside your <style> tag, before any of your other rules. This method should work on Scribbld. Note that if you already know what font you are using, and Google has it on their server, all you have to do is copy
Utilising Your Font
Okay, so your font's there. Yay! But now it's just sitting in the top of your document, and not actually being displayed. So how do we fix that? Pretty simple, actually. Let's say that you have an <h1> tag that contains your character's name or the title of the page. (We will learn more about H1 tags later, because Bridget has more tutorials in mind. Assuming people do not get sick of seeing her username and incessant use of the third person.) Now, I want to style this H1 as Cookie. Awesome. How do I do that?
Using CSS, I need to make a selector. This is what it will look like:
To select all of the text in your entire document, you can use a similar selector that looks like this:
There are two things I would like you to note. The first is that with font names that exceed one word or have spaces in their names (like Trebuchet MS and Noticia Text), I have wrapped them in double quotes. Why? Because it tells the browser that the whole phrase Noticia Text is the title of the font, and will make it more sure to find that font when it goes looking.
The second is that I have specified fonts beyond the Google Web Fonts. This is for accessibility. Although they are pervasive and work for most everyone, certain browsers and some computers do not support this feature. This means that they will not display the web font unless the computer accessing the page already has the font installed. ~chaperoned covered it in that article under the header of Font Stacks, but a quick reiteration: If Noticia Text does not display for whatever reason, the browser will go find Georgia. If Georgia does not display for whatever reason, the browser will go to its default serif font. Please always specify alternatives. It makes your browser (and your end-users) much happier.
Troubleshooting Your Font
IMPORTANT NOTE: If you already have the font installed on your computer (like I do with the Droid family), you need to test it out on another computer to be sure the fonts show up correctly. If you have it installed, you will see it whether it works or not.
So your font isn't showing up. Well, GD, guys, where did we go wrong? There are a number of reasons it may not be functioning. Here are some common problems you may have.
First, and most insultingly, make sure you've spelled everything correctly. I know how frustrating it is to hear “Um, yes, please be sure you can spell on a fifth-grade level, you 20+ college student!”, but you would not believe how many times your fingers can slip up and make one tiny, tiny error that will screw up your entire page.
Second, and still insultingly, make sure all of your HTML/CSS is correct. Firebug (a Firefox extension), the inspect element in Aurora (or Firefox), and view-sourcing can all be good ways to see what isn't working. Another alternative that I highly recommend is Notepad++. Notepad++ allows you to minimise each selector as you go, so you can close up the ones you've already proofread. NEAT, right? It's basically Microsoft Notepad. On steroids. Lots of steroids. Or Adobe Dreamweaver's younger kid brother, who is almost as cool and sometimes twice as cool as Dreamweaver. No, I am not biased, or planning to marry my firstborn off to whomever developed this software.
Third, and slightly less insultingly, make sure that you have installed the CSS embed code within the <style> tag (as was discussed beneath Method Two).
Fourth, realise that Google Web Fonts will not work as inline styles only. By that, I mean that you cannot use Web Fonts as part of IJ entries, because it WILL NOT allow you to embed the font. (It will work in inline styles on your Scribbld pages, although that is really not best-practise.)
Well, FUCK.
You tried everything. You made sure the CSS was in the right place, you spell-checked and CSS-checked and HTML-checked and oh, Christ, none of it works, WHY DOES IT NOT WORK OH GOD. Leave a comment here, and I'll see what I can do to help you! Sometimes HTML/CSS gets a bit wonky, and it's not user error at all. :/
See it in action!
I don't really think this is as necessary, because it's web fonts and they're everywhere right now, but you can see the template I did up using Noticia Text and Cookie here. Images by the lovely ~embargo, because they have A BAJILLION AIDAN TURNER ICONS, and that is more than okay with me.
* - Finally, as a side note, completely unrelated to web fonts and more related to font installation, and because I have struggled with this incessantly: if you choose to install Droid Sans, I'd recommend not doing it through Google, because for some reason the file always seems to get corrupted that way, and only displays in bold. Weird, right? /queen of run-on sentences
So first, before you do anything else, you need to go pick a web font. To do that, head over here. My personal favourites are Droid Serif and Droid Sans*. But, of course, for this exercise, you can pick whatever fonts you'd like. Now, I'm branching out a little. I've chosen Noticia Text (for the body copy) and Cookie (for headers).
The typography student in me feels obligated to give a quick note, re-emphasising not only ~chaperoned's lovely article (I'M HER FANGIRL, APPARENTLY), but also the importance of legibility. The reason I love the Droid family is that it is very easy to read, and more specifically designed to be read on the screen. I know how awesome display fonts are, because 99% of my fonts are display typefaces that I will probably never use. (I have a font problem.) Anyway, I would advise picking display fonts for headers, and leaving the body copy to sans-serif or serif only. Entirely bold, entirely italic, script, or display typefaces can be extraordinarily difficult to read. And, as my web teacher is so fond of saying, the human eye was not meant to stare at one gigantic rectangular light-bulb. So if we can, we need to make it less tiring on the eyes. OKAY, TEACHER'S PET SOAPBOX GOING AWAY NOW.
Embedding Your Font
I hope this wall of text on fonts gave you time to ignore me and go get your typefaces. Have them? Good. You should be looking at something like this:
Now, there are two ways to grab the font to use it. One of them does not work on Scribbld (my best guess is that it's a file-extension problem), and the other seems to be supported much better. IF you are using this on an external site that is not Scribbld, the first method will, in all likelihood, work.
Method One: When you have found your font, there is a link at the bottom right hand corner of the font box that says “Quick-use”. Click that. It will take you to a page where you can select how the font will appear. (Do you want the ability to use bold, italic, etc.?) Then, you can scroll down and you will find this:
All you have to do is take this link and embed it in your <head> tag, but before your <style> tag. That's it! You're done! Font is embedded. But that doesn't help those of us who use Scribbld, does it? So, on we go to Method Two!
Method Two: When you have found your font, pay careful attention to the name of the font. You will need it. Like in Method One, you will click on “Quick-use”. You will scroll down. When you get there, copy the link only. Open up a new tab and go to that link. You will find a little CSS selector. It will look something like this:
You want to copy that code and put it in your <head> tag, but this time it will go inside your <style> tag, before any of your other rules. This method should work on Scribbld. Note that if you already know what font you are using, and Google has it on their server, all you have to do is copy
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.Utilising Your Font
Okay, so your font's there. Yay! But now it's just sitting in the top of your document, and not actually being displayed. So how do we fix that? Pretty simple, actually. Let's say that you have an <h1> tag that contains your character's name or the title of the page. (We will learn more about H1 tags later, because Bridget has more tutorials in mind. Assuming people do not get sick of seeing her username and incessant use of the third person.) Now, I want to style this H1 as Cookie. Awesome. How do I do that?
Using CSS, I need to make a selector. This is what it will look like:
h1 {
font-family:Cookie, "Trebuchet MS", sans-serif;
text-align:right;
font-size:28pt;
color:#A4D49D;
}To select all of the text in your entire document, you can use a similar selector that looks like this:
body {
font-family:"Noticia Text", Georgia, serif;
font-size:9pt;
}There are two things I would like you to note. The first is that with font names that exceed one word or have spaces in their names (like Trebuchet MS and Noticia Text), I have wrapped them in double quotes. Why? Because it tells the browser that the whole phrase Noticia Text is the title of the font, and will make it more sure to find that font when it goes looking.
The second is that I have specified fonts beyond the Google Web Fonts. This is for accessibility. Although they are pervasive and work for most everyone, certain browsers and some computers do not support this feature. This means that they will not display the web font unless the computer accessing the page already has the font installed. ~chaperoned covered it in that article under the header of Font Stacks, but a quick reiteration: If Noticia Text does not display for whatever reason, the browser will go find Georgia. If Georgia does not display for whatever reason, the browser will go to its default serif font. Please always specify alternatives. It makes your browser (and your end-users) much happier.
Troubleshooting Your Font
IMPORTANT NOTE: If you already have the font installed on your computer (like I do with the Droid family), you need to test it out on another computer to be sure the fonts show up correctly. If you have it installed, you will see it whether it works or not.
So your font isn't showing up. Well, GD, guys, where did we go wrong? There are a number of reasons it may not be functioning. Here are some common problems you may have.
First, and most insultingly, make sure you've spelled everything correctly. I know how frustrating it is to hear “Um, yes, please be sure you can spell on a fifth-grade level, you 20+ college student!”, but you would not believe how many times your fingers can slip up and make one tiny, tiny error that will screw up your entire page.
Second, and still insultingly, make sure all of your HTML/CSS is correct. Firebug (a Firefox extension), the inspect element in Aurora (or Firefox), and view-sourcing can all be good ways to see what isn't working. Another alternative that I highly recommend is Notepad++. Notepad++ allows you to minimise each selector as you go, so you can close up the ones you've already proofread. NEAT, right? It's basically Microsoft Notepad. On steroids. Lots of steroids. Or Adobe Dreamweaver's younger kid brother, who is almost as cool and sometimes twice as cool as Dreamweaver. No, I am not biased, or planning to marry my firstborn off to whomever developed this software.
Third, and slightly less insultingly, make sure that you have installed the CSS embed code within the <style> tag (as was discussed beneath Method Two).
Fourth, realise that Google Web Fonts will not work as inline styles only. By that, I mean that you cannot use Web Fonts as part of IJ entries, because it WILL NOT allow you to embed the font. (It will work in inline styles on your Scribbld pages, although that is really not best-practise.)
Well, FUCK.
You tried everything. You made sure the CSS was in the right place, you spell-checked and CSS-checked and HTML-checked and oh, Christ, none of it works, WHY DOES IT NOT WORK OH GOD. Leave a comment here, and I'll see what I can do to help you! Sometimes HTML/CSS gets a bit wonky, and it's not user error at all. :/
See it in action!
I don't really think this is as necessary, because it's web fonts and they're everywhere right now, but you can see the template I did up using Noticia Text and Cookie here. Images by the lovely ~embargo, because they have A BAJILLION AIDAN TURNER ICONS, and that is more than okay with me.
* - Finally, as a side note, completely unrelated to web fonts and more related to font installation, and because I have struggled with this incessantly: if you choose to install Droid Sans, I'd recommend not doing it through Google, because for some reason the file always seems to get corrupted that way, and only displays in bold. Weird, right? /queen of run-on sentences