Day 8: Web Fonts

Today's Progress

Today's topic was about web fonts. Although you can still use web-safe fonts (web-safe fonts are the pre-installed fonts on browsers and operating systems) like Arial and Times New Roman on a website, web fonts allow developers to be a little more creative with their text. Adda explains two ways to add web fonts to a website.

One is using the @font-face property in your style sheet. You download the font files and can add them using this property. This is something I struggled with when I started coding and wrote about in a post in my Skillcrush 101 series.

The other is using a font hosting site like Googe Fonts. Although font hosting services make a developer's life 100% easier, all new developers need to know how to do both methods because you don't know what fonts a client might use on a website as you work more in tech.

Author's Note

New developers should review some of the posts on my Skillcrush 100 blog series before diving into this web fonts lesson. This series has posts on designing text on websites and shares information about font categories, font size, and more. You will also want to check out my Skillcruch 101 series if you want even more information on web fonts, font categories, etc. You can find these series both on DEV and CodeNewbie.

Two, there are tons of font hosting sites besides Google Fonts. I'll be describing how to use Google Fonts in this post but don't be afraid to try some of the other font hosting sites that are out on the web. The goal is to understand the process which is similar on all sites.

How to Add a Web Font

First, you will need to find a font. There are tons of fonts available online you can download or get from a hosting site. There are different font categories developers can choose from so it can be overwhelming. The ones you will find are:

serif
sans-serif
display
handwriting
monospace

The secret is to keep your website's vibe in mind so you can find a font that matches that vibe. For example, banking websites that want a more traditional vibe would stick with a classic serif font. A website looking for a modern and cool vibe might pick a sans-serif font while lots of sites looking for a feminine vibe pick handwriting fonts.

Once you've picked a style, it is time to look at a preview. Regardless of what font you pick, make sure you see a preview of it in some text. Remember what you might think might look cool on the web could be incredibly hard for someone else.

Once you are happy with the font, download or click the "get font" button on Google Fonts. Now that you are done picking your fonts, you can get the link to put in the head tag of your website. Click on "get embed code" button.

Then you copy all the links in the web section. The first two links help upload the fonts faster by connecting to Google Fonts immediately. The third link is the link to the font you have chosen.

Now that you go to your head section add the links you just copied to your head tag. The head tags are the container at the top of your website for all the metadata (data with information about data on your website). The content in the head tag will never show on a website, but web browsers and web servers need this information to get your site to work.

The last thing you need to do is add a body tag to your site. The body tag is where you put all your site's content you want on the page. This means headlines, images, links, etc. You can put some text here on your website. By now your code should look like this:

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Hello World</h1>
</body>

Finally, go to the style sheet. This is where you can add the font's properties and values to your website. It means setting the font-family property to the right font value.

Google Fonts is nice because it tells developers what to put. Look for a section called "CSS class" and you'll find font-family property and values you can use on your website. Add the property and values to your CSS block for the selector you want to style. It should look like this:

h1 {
    font-family: 'Rubik', sans-serif;
}

This property uses two values. The first value is the font name. The second one is the generic font family. The second value is there as a backup in case the first font value isn't working. When that happens, the second value will use the browser's default font from that font family instead.

Quiz and Coding Activities

I did better on today's quiz than yesterday. The typos section was very difficult today and I spent a lot of time looking for the typos. I used the cheat sheet and even opened Google Fonts to make sure the syntax was correct on the fonts provided.

I managed to get all the questions right including the typos one. But I had to scan the code sample over and over again to find the 4 typos. The final exercise in this lesson gives new developers a chance to add web fonts to a website.

New developers need to add two fonts Skillcrush specifically asks for then they can add their own. There was a bonus challenge in this activity where developers can add more styles to the text such as color or changing the font size. After I finished the required tasks, I took some time to add some color and change the font size to the text.

It still took time to do this exercise. I found myself double-checking the directions to make sure I was using the right fonts in the right places as well as adding fonts the right way. I need to learn more about full-axis fonts and play around with some of them in future projects I build.

Tomorrow's Plan

The next lesson is about backgrounds, borders, and colors. This lesson describes how to add backgrounds and borders to a website. It teaches new developers how to add color to a website so you can style any border or background they want to add.

If you want a review on color theory before you dive into tomorrow's lesson, you will want to review some of my web design posts from my Skillcrush 100 series or brush up on some basic web design fundamentals from different web design blogs. Just having an idea of how color works on the web and knowing some of the color basics will help you pick the right colors for your future websites.