A CSS Guide to Fonts

Today I will look at Lesson 11, the next lesson in the updated Skillcrush 101 course. This lesson will start diving further into CSS and looking at the different CSS properties. Lesson 11 is all about fonts and how they work in CSS, so they appear on a website.

You will learn two ways to add fonts to a website. One way might seem easier than the other, but developers and designers need to be familiar with both to build interactive, customized websites. Today's topic is a great reason to review typography. Although it isn't necessary, the typography post does have great tips on text alignment, font size, and typefaces which will be helpful when picking fonts for a website.

The last post introduced CSS.

CSS is what gives every website its personality and look. It is an important part of bringing a website to life and unique. CSS is written differently than HTML, but the computer handles it in the same way.

Therefore developers and designers need to be clear about what they write. Coding is giving directions to the computer, and the computer needs clear directions to print what you want on the browser. During this post, I showed you how CSS worked and explained some of the CSS properties developers used to add style to the text.

How do fonts work in CSS?

Web fonts are very popular with developers and designers. I love playing with web fonts, and I always find fonts I want to try as I build websites. I often use Pinterest to search for font pairings to look for even more fonts to try.

Picking fonts can seem intimidating at first. There is an endless selection of fonts you can choose from. Although this dilemma might make it hard to choose, this wasn't always the case.

In the past, developers and designers had the opposite problem.

Before the days of web fonts, there wasn't a big selection of fonts people could play with. If a developer wanted to use a fancy font on a website, the only way to use this font was to put lots of images of the text on the website. This meant you had to make images of every single bit of your text in this fancy font.

It resulted in lots of work and lots of challenges updating the site. It also means a very slow website to load every single image on a website. Although this method was the only way to get fancy fonts on a website, it didn't match the most important principles of the web.

During this lesson, Adda emphasizes these principles and how everything developers do on the web needs to be "dynamic, interactive, easy to update, and flexible." Uploading lots of text images doesn't fit any of these principles. Today developers and designers don't have to do this anymore thanks to web fonts.

Web fonts allow developers and designers to use fancy fonts while keeping the important principles of the web. Now there are tons of web fonts available. Don't believe me? Go check out Google Fonts or Adobe Fonts (formerly known as Typekit) to see for yourself.

==> Click here to visit Google Fonts!
==> Click here to visit Adobe Fonts!

How to add web fonts to a website

There are two ways to add web fonts to a website. I will show you both ways to add web fonts to your website. Although developers have a preference for which method they like to use, newbies need to know both ways.

It may look like Google Fonts and Adobe Fonts have a wide selection of fonts to choose from, but it isn't perfect. If you don't find the font you are looking for on those sites, you might have to look at downloading font files. For those who plan on freelancing, this is important to know both ways.

A potential client might have a specific font in mind or have a font file a developer needs to use for the project. Therefore it is a good idea to know both ways to add fonts so you can best address the potential client's needs.

Embed the fonts using the CSS property @font-face.

To use some fonts on a website, you will need to use the @font-face property. This CSS property allows developers and designers to use any font on their website. You can use @font-face with any of the fonts on your computer or the ones you have permission to use.

These might be fonts you download from a website such as fontsquirrel.com or Creative Market. When you are picking fonts, files will include a license on the website or in the files that let you know their policies on how to use the fonts. Once developers have permission to use a font, they download the font and host it on their server so they can use the font on a website.

==> Click here to find fonts on fontsquirrel.com!
==> Click here to find fonts on Creative Market!

How to use @font-face property

To use the @font-face property with a font, here are the steps Skillcrush suggests their students use. I downloaded the Wisdom Script font to use for this demonstration, but you can use these steps with any font you like.

1. Download the font you want to use.

Make sure you save your font in a folder named font located in your site files. I recommend paying attention to the font format that is being used for your font. You can right-click the font file and pick properties to see what type of file is in your folders.

There are three format types you need to look for. These types are:

• OpenType (.otf)
• Embedded OpenType (.eot)
• Web Open Font Format (.woff)

2. Add your font file to the CSS style sheet.

At the very top of your stylesheet, put @font-face. In between the curly braces, you will set the font family to your font. I suggest double-checking what font name before you move on.

This is how most of my problems with web fonts happen. The wrong font name will keep your font from appearing in the browser since the computer won't be able to find the font you are looking for.

@font-face {
 font-family: 'Wisdom Script AI';
 src: url('font/WisdomScriptAI.otf') format('opentype');
 src: url('font/WisdomScriptAI.eot') format('eot');
 src: url('font/WisdomScriptAI.woff') format('woff');
}

Next, you need to include the link to your font file. This tells the computer where to find your file and what format the file is. Certain browsers require different format types, so it is considered the best practice to include them all.

In my example above, the URL tells the computer the location of the font file on my computer. I put the location in single quotation marks then indicated the font folder and file my font is in. Finally, I include the format of the file so the computer can tell the browser what type of file the font I am using is.

You can see in the graphic how I used the src link for every format type so my font can work on every browser. If you plan on using any font styles or playing with weight variations with your new font, you will need to add a separate font file for each variation or style you plan to use. If I plan on using an italicized version of Wisdom Script, I would add another src line in the @font-face property with a URL to my font-variant file.

The src attribute would look like the following:

@font-face {
 font-family: 'Wisdom Script AI';
 src: url('font/WisdomScriptAI.otf') format('opentype');
 src: url('font/WisdomScriptAI.eot') format('eot');
 src: url('font/WisdomScriptAI.woff') format('woff');

 /* This is where I would add the italicized version of Wisdom */
 src:URL('font/WisdomScriptAI-Italic.otf') format('OpenType');
}

3. Use your font throughout your CSS.

It is up to you how your new font is used. The most important thing to remember is the single quotation marks. Punctuation is often an important part of the code, and it is no exception here with fonts.

Without the quotation marks, the font won't work in the browser. Simply wrap your font name in single quotation marks just like mine below.

p {
  font-family: 'Wisdom Script AI';
  font-size: 20px;
}

Once you have your font in place, it is time to check and see if it works. Here is a picture of what my code looks like in the browser. Notice the line "Stop over analyzing" is printed in the browser using my font.

If your font doesn't appear right away, I recommend double-checking your font name and the link you put in the URL. These areas are where I get most of my errors when I work with web fonts and are the first place I check when my font doesn't appear in my browser. Keep in mind that if you plan on using any font styles or weight variations, you will need to call these fonts separately in your CSS.

This lets the em or strong tags know they need to use a separate font family using the font variation instead of using the font-style property. If I plan on using an italicized version of Wisdom Script, I might write this in my code:

p em {
  font-family: 'Wisdom Script AI Italic';
}

Use a service like Google Fonts or Typekit.

This is often the most popular option among developers because the service already takes care of all the hard work for you. All you need to do is pick your font and choose what settings you would like. The settings allow developers to choose any font styles they want.

You can do this with the Customize tab. Once you have decided what fonts you want, you just need to copy the link tag in the embed tab and put the link on your site. I put the link in between the head tags so the site can access the font files.

Here is my head tag for my website which shows a link to the Google font Bitter. Once you have the link in your head tag, you are free to use the font anywhere you want on your website. Just make sure you specify the font correctly for the font-family property.

<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=Bitter&display=swap" rel="stylesheet">
<head>

Google Fonts tells you how to specify their fonts in CSS when you use any of their fonts. To use the font Bitter on my website, I would write this on my style sheet:

h1 {
 font-family: 'Bitter';
}

Google Fonts and Typekit do provide a model in the embed tab on how you specify your font in your style sheet. You can also use this format as well if you like. Google and Typekit's examples often show this:

h1 {
  font-family: 'Bitter', serif;
}

Regardless of which way you use, just remember to watch your spelling and punctuation. If your font doesn't appear, make sure you check the way you spell your font and if you used the right punctuation.

Conclusion

Lesson 11 is all about how fonts work in CSS. Through today's post, you learned two ways to add web fonts to a website. First, you learned about the @font-face property and how developers use this property to embed fonts in a website.

The second method is using a service like Google Fonts and Typekit to add fonts to a website. Both of these methods are important for newbies to know so they can add any font to a website for any project that is given to them. Take the time to practice both methods in your text editor.

You can review everything discussed in today's post using the resources on the Resources page. Tomorrow I will be starting lesson 12 of the updated Skillcrush 101. This post will show you how to add color to your website using CSS.

This post was originally published on March 15, 2017 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on DEV.