ColorCode

Typography is a gigantic topic in web design and of course you have a ton of options in CSS to better your font style and its readability. Now, this isn’t a design course, so I won’t be covering design theory, I’m not going to tell you what looks good and what doesn’t, but I will show you how to manage your fonts in HTML/CSS.

You can use fonts that already exist on your computer and everybody else’s computers like Times New Roman or Arial. These are generic Web Safe fonts. but they’re limited and honestly kinda boring. Or you can use what’s called a custom font.

There are a ton of custom fonts out there. If you are a designer you have definitely worked with custom fonts so you know what I’m talking. You are also not gonna like what I’m about to say. I am not a huge fan using custom fonts for websites. Not because they’re not cool or pretty. But...

Different Browsers = Different Experience

...for one thing, not all browsers render custom fonts the same way or even correctly! So you potentially run that risk. Certain fonts look nicer, thinner, more cripst than others in more modern browsers. Other fonts might not even render properly in the same browser. So you think your user is seeing your site in a certain way but you can't be sure.

Bandwidth

Using custom fonts means anybody going to your site has to wait for the browser to download the custom font first, then render the site. And that’s costly, it takes time and bandwidth. With generic fonts you don't have that step.

Readability

Lastly, a huge proportion of custom fonts are great for banners and flyers and quotes, but they are absolutely awful for long body text like articles. Their readability is not always the best. With all that said, a lot of people still use them for many different reasons.

rust me, I understand the importance of uniqueness and personality when it comes to design, in fact ColorCode’s website uses a custom font on the hero page, but it comes at a cost.

Custom fonts are like a chocolate milkshake. They’re amazing but you really shouldn’t be doing it, unless you are willing to pay the price. #hugeBelly

Anyway, I still want you to know how to change fonts. There are 2 things you need to do:

1. Load the Font

Load (embed) the font into the page, assuming it’s a custom font, for generic fonts you can skip this step.

Using a <link> tag in HTML:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

Or using a @import in CSS:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

It could be loaded from anywhere on the internet. In this example we're using Google Fonts.

Again, if you’re using a default font, you don’t need to load anything, because generic fonts already exist on everybody’s computers and phones.

2. Use the Font

Then change font-family property in your CSS.

body {
    font-family: 'Roboto Condensed', sans-serif;
}

Notice the CSS font-family statement can take multiple values separated by a comma. This means Hey Mr. Browser,if you can’t find the first one for whatever reason, because it’s a fancy one, go to the next one. If you can’t find that one either keep going until you get to one that you can render. You always want to have backups in case your custom font can’t be loaded.

So, in the next video I’m gonna update our Profile page to use Google Fonts. It’ll be our last demo in this course and it’ll instantly make our page look much more professional, see you there.