Google Fonts in CSS - Add Professional Fonts to Your Site
After learning the basics of fonts in CSS, the natural next step is using professional fonts beyond system defaults. The best free and popular option is Google Fonts.
If you are looking for how to add Google Fonts in CSS, the best Arabic fonts on Google Fonts, or how to use Cairo or Tajawal on your site, this lesson is practical and direct.
What Is Google Fonts?
Google Fonts is a free library that provides hundreds of web-ready fonts. Instead of uploading font files manually, you link the font and use it in CSS.
Simple definition: Google Fonts is a free web font library from Google that you can use in HTML and CSS.
How Do I Add Google Fonts to My Site?
The most common method has three steps:
- Choose a font from
fonts.google.com. - Copy the
<link>code into your<head>. - Use the font name in
font-familyin CSS.
Practical Example: Adding Cairo in CSS
In HTML (inside head):
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
In CSS:
body {
font-family: "Cairo", sans-serif;
}
What does this code do? It loads Cairo from Google Fonts and applies it to the whole site.
Line by line:
family=Cairo: the font name.wght@400;700: only the weights you need.display=swap: improves loading behavior.font-family: applies the font to elements.
Expected result: cleaner, more professional Arabic typography.
Common mistake: using a different font name in CSS than the one in Google Fonts.
Result in the browser: before Google Fonts
This is Arabic text using a system font.
Result in the browser: after Google Fonts (simulation)
This is Arabic text after applying Cairo.
Second Method: @import in CSS
You can also import the font directly in your CSS file using @import.
@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap");
body {
font-family: "Tajawal", sans-serif;
}
What does this code do? It imports Tajawal directly in CSS.
Expected result: almost the same as the link method.
Common mistake: placing @import in the middle of the file instead of the top.
Popular Arabic Fonts on Google Fonts
- Cairo: clear, modern, and great for interfaces.
- Tajawal: very comfortable for long reading.
- Almarai: simple and practical.
- Amiri: more traditional, print-like style.
SEO + Performance Tips for Google Fonts
- Load only the weights you need (for example 400 and 700).
- Do not use too many fonts on one page.
- Always provide a fallback font like
sans-serif. - Test page speed after adding fonts.
Common Mistakes with Google Fonts in CSS
1) The font does not show: link not in head, or the font name is wrong.
2) Slow loading: too many weights imported unnecessarily.
3) No fallback: the page looks inconsistent if the font fails to load.
FAQ - Common Search Questions
How do I add Google Fonts to HTML and CSS?
Add the font link in head, then use its name in font-family.
Should I use link or @import with Google Fonts?
Both work, but <link> is usually clearer and preferred in most projects.
What is the best Arabic font on Google Fonts for websites?
Cairo and Tajawal are two of the most popular starting choices.
Why is my Google Font not working?
Check the link, the font name, your network connection, and spelling in font-family.
Do Google Fonts affect site speed?
Slightly, yes. That is why you should reduce the number of fonts and weights.