html
/

CSS Google Fonts

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Google Fonts

What are Google Fonts?

Google Fonts is a free library of web fonts that you can use to enhance typography in your website.

Using Link Tag (Recommended)

HTMLRead-only
1
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
CSSRead-only
1
body {
  font-family: 'Roboto', sans-serif;
}

Using @import

CSSRead-only
1
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

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

Multiple Fonts

HTMLRead-only
1
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Poppins&display=swap" rel="stylesheet">

Font Weights

HTMLRead-only
1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
CSSRead-only
1
h1 {
  font-weight: 700;
}

Performance Optimization

HTMLRead-only
1
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Fallback Fonts

CSSRead-only
1
body {
  font-family: 'Roboto', Arial, sans-serif;
}

Best Practices

  • Use link method instead of @import for better performance
  • Limit number of font families
  • Use only required font weights
  • Always include fallback fonts
  • Preconnect to improve loading speed

Common Mistakes

  • Loading too many fonts affecting performance
  • Not using fallback fonts
  • Using @import in production
  • Not optimizing font weights

Conclusion

Google Fonts make it easy to use beautiful typography. Proper usage ensures better performance and design consistency.

Try it yourself

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

Test Your Knowledge

Q1
of 3

Which method is recommended?

A
@import
B
<link>
C
script
D
font-face
Q2
of 3

Which improves performance?

A
More fonts
B
Preconnect
C
Inline CSS
D
Large files
Q3
of 3

What ensures fallback?

A
font-weight
B
font-family list
C
import
D
style

Frequently Asked Questions

Are Google Fonts free?

Yes, they are free to use.

Which method is best?

Using the link tag is recommended.

Why use fallback fonts?

To ensure text displays if the font fails to load.

Previous

css fonts

Next

css icons

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.