Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:3 hours
  • Overview
  • Transcript

2.3 Using Google Fonts

Hey, welcome to lesson number three. Typography is a huge part of a successful design. There are always the right fonts to use for a specific type of website and content. Now, not so long ago, you had to pay some big bucks for premium fonts. But today, Google offers a whole repository of free fonts, most of which are actually pretty awesome. In this lesson, I'll show you the technical aspects of using these fonts. So, the first thing you gotta do is go to google.com/fonts. And you'll find this interface right here. And you can browse the fonts. You can sort them alphabetically by dates, by the trending or the popularity or you can actually search for one particular font. For example, Open Sans. Now, once you find your font, you can hit this little button here that says Quick-use. And here it's gonna show you the available styles and also the kind of impact it will have on the page load if you're using this font. Let's go back and let's find a font, for example, this one, Playfair Display SC. I'm going to click it. And if I do that, its gonna show me all six styles. You can actually download this font to install on, on your computer by going to add to collection. Yeah, and once you do that, you have this little button here on the top that says Download. And it's gonna download all of the fonts in your collection. But if you want, you can Quick Use it. It brings you to the page I showed you earlier. Let's say I want normal and bold. Only these two styles. So, the page load, as you can see, it increased. If I choose the other ones, it will increase even further and page load basically means your website will load a bit slower, and that's what it's all about. So I'm just gonna unselect a couple of these, then you choose the character sets you want. My case, I'll just leave it as as the default. And then it gives you a few options to add that font to your website. Because that's the whole point when using a custom font. You don't know if the user has it installed on his computer. So you have to load it for him. There are three ways to do that. Either via a link which you'll place in the HTML head portion of your document or via import or via JavaScript. Now JavaScript is a bit more complicated. It's a more advanced procedure because it also gives you a few options. For example, you can create different actions while the fonts are loaded. And you can create different actions after the fonts are loaded. To give you an example, you can hide all the content in your website while the fonts are loading and only display, like, one of those loader icons, the round ones which spin. And once the fonts are loaded, you can hide that and show the website content. This is a common practice that's being used to prevent something that's called FOUT or flash of unstyled text. Basically, if you're telling the browser to use a custom font, but that font is not loaded yet, it's gonna be a bit, a little flash when the fonts change. They change from the default browser font to the one you chose. But, as I said, that's a bit more complicated, so I suggest you stick with the standard method. So, you would copy this, and then, you'd go to your HTML document. And paste it in the head section, just like this. Now, I have a simple HTML document here. It has some headings, and some paragraphs. And you can see it right here. And you can see I loaded the font, but the browser is still using its default fonts. That's because I need to go into CSS and set the font-family to the font that we just loaded. So, I'm just gonna to create a style here. And I'm gonna set the h1 and the h2. I'm gonna set their font-family to the new font. So now when I refresh my page, look at the headings. And they are different, they are using the other font. And if I want a custom font for my text, I can do that. For example, Open Sans, which is this, right? Again I'm gonna hit the Quick Use. I'm gon, just gonna select the Normal 400. I'm gonna copy this link here. I'm gonna paste it here. And then, I'm gonna select the paragraph. And I'm gonna set the font-family to whatever it's telling me here. Like the save. And then I'll refresh my page. And now it's using a different font for the overall text. And that's it, basically. Now we can give your designs a fresh look by choosing from the large array of fonts offered by Google. Since we're on the topic of using custom fonts, I wanna show you one more thing, how to use icon fonts. That's coming up.

Back to the top