English

CSS Tutorial

CSS3 Tutorial

CSS Advanced

CSS References

CSS Responsive

CSS - Web Fonts: A Beginner's Guide

Hello there, future web designers! I'm thrilled to be your guide on this exciting journey into the world of CSS Web Fonts. As someone who's been teaching computer science for years, I can tell you that understanding fonts is like learning a new language - it might seem daunting at first, but once you get the hang of it, you'll be amazed at how it transforms your web pages!

CSS - Web safe fonts

What Are Web Fonts?

Before we dive into the nitty-gritty, let's start with the basics. Web fonts are custom fonts that you can use on your website, regardless of whether they're installed on a user's computer. They're like giving your website its own unique voice!

Why Are Web Fonts Important?

Imagine if every book in the world used the same font. Boring, right? Web fonts allow you to express your website's personality and improve readability. They're the secret sauce that can make your site stand out from the crowd!

CSS Web Fonts - Font Format Types

Now, let's talk about the different types of font formats. It's like choosing between different flavors of ice cream - each has its own characteristics!

Format Description Browser Support
TTF/OTF TrueType Font / OpenType Font All modern browsers
WOFF Web Open Font Format All modern browsers
WOFF2 Web Open Font Format 2 Most modern browsers
EOT Embedded OpenType Internet Explorer
SVG Scalable Vector Graphics Older iOS versions

Don't worry if this seems like alphabet soup right now. We'll break it down as we go along!

CSS Web Fonts - Key Points

Before we get our hands dirty with code, let's cover some key points:

  1. Web fonts allow you to use custom fonts on your website.
  2. They're loaded from a server, not the user's computer.
  3. You can use services like Google Fonts or host fonts yourself.
  4. Different font formats exist for browser compatibility.
  5. The @font-face rule is used to define custom fonts in CSS.

CSS Web Fonts - @font-face At-Rule

Now, let's dive into some code! The @font-face rule is like introducing a new font to your web page. Here's how it looks:

@font-face {
  font-family: 'MyAwesomeFont';
  src: url('path/to/my-awesome-font.woff2') format('woff2'),
       url('path/to/my-awesome-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Let's break this down:

  • font-family: This is the name you're giving your font. You'll use this name later to apply the font to elements.
  • src: This specifies where to find the font file and what format it's in.
  • font-weight and font-style: These define the characteristics of the font.

After defining your font, you can use it like this:

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

This tells the browser, "Hey, use MyAwesomeFont, but if you can't find it, fall back to any sans-serif font."

CSS Web Fonts - @font-face / font-stretch

The font-stretch property is like a yoga class for your fonts. It allows you to stretch or compress the font. Here's how you can use it:

@font-face {
  font-family: 'StretchyFont';
  src: url('path/to/stretchy-font.woff2') format('woff2');
  font-stretch: ultra-expanded;
}

.stretched-text {
  font-family: 'StretchyFont';
  font-stretch: 150%;
}

This will make your text look like it's been to the gym and bulked up a bit!

CSS Web Fonts - Online Font Service

Using an online font service is like ordering takeout instead of cooking - it's convenient and there's a wide variety to choose from. Google Fonts is a popular choice. Here's how you can use it:

  1. Go to Google Fonts and select a font you like.
  2. Copy the provided link tag and paste it in your HTML <head>:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  1. Use the font in your CSS:
body {
  font-family: 'Roboto', sans-serif;
}

And voila! You're now using a custom font from Google Fonts.

CSS Web Fonts - Import Font

Another way to include web fonts is by using the @import rule. It's like inviting a font to your CSS party. Here's how it works:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

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

This method allows you to keep all your font declarations in your CSS file, which some developers prefer for organization.

Conclusion

Congratulations! You've just taken your first steps into the wonderful world of CSS Web Fonts. Remember, like learning any new skill, practice makes perfect. Don't be afraid to experiment with different fonts and see how they change the look and feel of your web pages.

As we wrap up, here's a little story from my teaching experience: I once had a student who was struggling with web design. She couldn't figure out why her sites looked so... plain. Then we covered web fonts, and it was like a light bulb went off. Suddenly, her sites went from boring to beautiful. That's the power of web fonts!

So go forth, play with fonts, and watch your web pages come to life. Happy coding, and remember - in the world of web design, the only limit is your imagination!

Credits: Image by storyset

Previous Tutorial:
CSS - Web browser References
Next Tutorial:
CSS - Units