Check out a free preview of the full Website Embeds & GitHub Pages course

The "Web Fonts" Lesson is part of the full, Website Embeds & GitHub Pages course featured in this preview video. Here's what you'd learn in this lesson:

Jen discusses one resource for externally loading fonts.

Preview
Close

Transcript from the "Web Fonts" Lesson

[00:00:03]
>> Jen Kramer: So here on our form's page, we're gonna scroll all the way down to the section here called web fonts. [COUGH] Okay, so shockingly, web fonts are fonts that are on the web. I know that comes as a big surprise. So far, we've been working on fonts that have been on the computer that's in front of you.

[00:00:23]
Remember I said originally that fonts come from that computer that's sitting right there in front of you. The fonts that I have on my computer are different than the fonts that you have on yours. We may have some in common. Typically that's things like Ariel, Helvetica, Times, Georgia, Trebuchet, Comic Sans.

[00:00:41]
A real winner of a font. B and Verdana, these are fonts that are typically in common between us and between all computers more or less. But sometimes, we'd like to use some fonts in our design that are not on everybody's computer and that's where web fonts come in.

[00:00:58]
And so two of the very popular options that are out there are Google Fonts and Font Awesome. Let me just show you Font Awesome briefly. I'm not gonna go through everything here on Font Awesome, but I'll go ahead and show it to you. The website's at fontawesome.com. So here it is.

[00:01:17]
There are two forms of fun awesome notice there is a free option down here, okay? Free option and they have a huge paid option. So if you're willing to pay for it, you get a whole lot of stuff. But the free option, if you just go ahead and click on the free link here, this is gonna give you a ton of icons.

[00:01:37]
So it's one of those fonts that actually has all the little pictures in it. And if you scroll on down here, you'll see that there are icons. So some of you have been talking about using icons like a Facebook icon or Twitter icon, or YouTube icon. If you go ahead and click on this icons thing here, this is gonna show you all the icons that come with Font Awesome free.

[00:02:02]
So you'll see that you have Amazon and Amazon Pay. You have all kinds of fun arrows. Here's some batteries, settings that might be useful for some kind of application that you're building and we're only down to letter B, okay? We have to load more. If you load more, you'll find, I mean, there is just tons and tons of stuff.

[00:02:23]
All the credit cards are in here, if those are helpful to you. Now, we are down to C. So we could be here all day looking at all these little pictures that are available to you. So the techniques that I'm gonna show you today with Google Fonts, you can use the same techniques here with Font Awesome and that can add some great stuff to your website.

[00:02:43]
Yes, Emma.
>> Speaker 2: Is there a copyright issue I like how all of these are kinda the same style, is there a copyright issue for just using the logo for Facebook to link to a Facebook account?
>> Jen Kramer: If there was we'd all be sued. [LAUGH] Okay, because pretty much every website these days has got those social media icons on it.

[00:03:03]
I don't know exactly what the legal ramifications are around that. But it's in Facebook's interest to have their icon out, logo out there and let people link to it.
>> Speaker 2: Sure.
>> Jen Kramer: I'm pretty sure they have some rules about how that icon can be used and what kind of color schemes that can be used with, and all the rest of that.

[00:03:20]
I imagine that a lot of people don't pay attention to those rules. But if you're concerned about that, look at the Facebook page and find the legal stuff. Yeah, other questions at this point? Okay, believe me, Facebook knows about Font Awesome.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now