Web Analytics
☕ Coffee 𝕏 Follow
0%

Using Google Fonts

Beginner ~6 min read

What are Google Fonts?

Google Fonts is a free library of over 1,400 fonts that you can use on your website. They're optimized for the web, easy to use, and completely free.

How to Add Google Fonts

There are two ways to add Google Fonts: using a <link> tag in HTML or @import in CSS. The link method is recommended for better performance. 


<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:wght@400;700&display=swap" rel="stylesheet">

Using the Font in CSS

Once you've added the link, use the font in your CSS with font-family. Always include fallback fonts.

HTML
CSS
JS

Popular Font Combinations

Pairing fonts effectively creates visual hierarchy. Here are some popular combinations:

HTML
CSS
JS
Performance Tip: Only load the font weights you actually use. Loading too many variants slows down your website.

Best Practices

  • Limit fonts - Use 2-3 fonts maximum per website
  • Load only needed weights - Don't load all 9 weights if you only use 2
  • Use font-display: swap - Shows fallback text while font loads
  • Preconnect - Add preconnect links for faster loading
  • Always include fallbacks - System fonts as backup

Finding Fonts

Visit fonts.google.com to browse and select fonts. The site shows you exactly what code to add to your website.

Quick Quiz

What is the recommended way to add Google Fonts?

A
Using tag in HTML
B
Using @import in CSS
C
Downloading and hosting yourself
D
Using JavaScript
Previous Text Formatting
Next Box Model