In web design, one of the most important yet often overlooked aspects is font selection. Choosing the right font pairing can effectively communicate your brand and give visitors a sense of legitimacy when they reach your site. On the other hand, awkward-looking fonts or mismatched designs can have the opposite effect. In today's post, I’ll share the resources I use to find high-quality fonts without breaking the bank because nobody who's learning to program or design for the web in their spare time wants to spend over $100 just on a typeface. You don't have to!

Top 5 Places to Get Quality Fonts for Free

1. Google Fonts

Browse Fonts - Google Fonts

This is a given, but if you haven't tried it yet, there are countless quality fonts here. You’ll find all the standard fonts you’d expect and some you wouldn’t. Google Fonts has the advantage of an integrated CDN, allowing you to either download the typefaces yourself or let them be reliably served to your site by Google.

2. Open Foundry

Open Foundry

If Google Fonts isn't your style, perhaps you’re looking for something more artistic with a bit more pop, and you don’t want to spend hours searching through Google’s vast catalog. Open Foundry offers a curated list of free fonts that are sure to make an impact on your site. I always check Open Foundry for every project, and more often than not, I find a font that matches my vision!

3. Fontshare

Fontshare: Quality Fonts. Free.

Fontshare can save you time in your design process. If you often find fonts you like but struggle to pair them with others, this site is for you! Fontshare not only provides excellent freely available fonts but also offers a list of 60 expertly curated font pairings! No more duplicating Lorem Ipsum text all over your Figma file and painstakingly changing fonts to find the perfect combination!

4. FontSquirrel

Free Fonts! Legit Free & Quality » Font Squirrel

FontSquirrel, the self-proclaimed "Free Font Utopia," lives up to its name. It offers 2000+ free fonts available for commercial use. This site shines with its excellent sorting options for browsing its massive collection. You can see the most downloaded and used fonts, search by informative tags, and discover which fonts are gaining popularity. Check out FontSquirrel the next time you're on the hunt for that perfect font.

5. The League of Moveable Type

The League of Moveable Type

I recently discovered this site and haven't had the chance to incorporate it into my design process yet, but I know I will be checking it for fonts on my next project. If you thought free fonts were only for solopreneurs or hobbyists, The League of Moveable Type will prove you wrong. This website offers fonts used by major brands like Wired, Instagram, Discovery Channel, Progressive, DC, and American Airlines! While not extensive, the fonts available here are eye-catching and recognizable, potentially lending some credibility from these major brands.

Two Ways to Add Fonts to Your Website

You've found the perfect font, and your website is going to be groundbreaking! Now, you just need to make it usable. There are two primary ways to do this in HTML and CSS: using the <link> element discussed in the last article or through the CSS @-rule @font-face.

For either method, you will need a font file or a CDN link to a font.

A CDN is a Content Delivery Network that allows you to load resources like fonts, stylesheets, or icons from a server elsewhere!

Using The Resource Link Element

If you want to use a font from a CDN like Google (see number 1 above), you will use a <link> element! This links an external resource to your file system. In last week's article, we used the same element to connect a stylesheet to our HTML, but in this case, our href attribute will take the URL provided by our CDN.

To see this in action, go to Google Fonts and locate the "Roboto" font. After clicking on it, you should see a button that says "Get Font" in the upper right-hand corner. Click that button to add the font to your bag.

Click on your bag and then click "Get Embed Code". You will see the following:

<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

I won’t go over exactly what all of this does, but try to understand what some of this means! What do the rel attributes do? What is this linking your file to?

Copy this code and paste it into the <head> element of your HTML file, and boom! You're ready to go!

Using @font-face

You don’t need to declare fonts in your HTML file directly. You can do this within CSS using the @font-face rule. CSS has a number of @-rules that perform different functions, but let’s focus on @font-face for now.

Take the same Roboto font from Google Fonts. Instead of clicking on "Get Embed Code," click on "Download All." After the download finishes, you'll have a .zip file with all the different variants of the Roboto typeface. Extract this file and place them in a folder called fonts in the same directory as your index.html and style.css files.

Now, in your style.css file, add the following code at the beginning:

@font-face {
  font-family: "Roboto";
  src: local("./fonts/Roboto-Medium.ttf") format("truetype");
}

What’s happening here? We’ve created a CSS ruleset using the @font-face rule. There are two parts to this ruleset: the font-family portion allows us to define a name for the font. We could use any name, but it’s easier to find if we name it logically! Then, we determine where the font is coming from using src in combination with local() and format().

local() indicates that the font file is somewhere on our computer, and format() tells the browser what type of font file to expect in this location. Note that we could also use a url() to link to the same CDN link we used earlier.

Using Our Font

Now that our font is installed, we can use it in any of our CSS rulesets or inline styling using the font-family style attribute!

p {
  font-family: "Roboto";
}

There you have it! All of our <p> elements will now be displayed in Roboto!

Challenge

In this week's challenge, we will build on the About Me page we've been creating over the past few posts.

First, find an appealing font combination using any of the resources above.

Once you've found your font, link it to your web page using one of the methods described. If you're successful with one method, try the other as well!

Restyle your About Me page to use the custom-installed fonts!

See you next week!