Are you looking for the best article on how to add Google fonts to CSS on WordPress website?
As a website owner or designer, you need to make your site more attractive and user-friendly to engage visitors. For this, you need to apply modern and professional design and a cornerstone of website design is its typography.
In typography, the most important thing is which font you are using. If you use the best font family, it can significantly enhance your site’s overall look and feel. Here comes Google fonts.
Most of the WordPress themes support Google fonts by default. But if your theme does not support Google fonts, how can you add Google fonts to CSS on your site?
In this tutorial, I will provide complete guidelines on how to add Google fonts to CSS on the WordPress site if the existing theme does not support. So without wasting time, let’s jump to the main topic.
Also check: How to add custom font to WordPress website? Easy way!
What is Google Fonts?
Google Fonts is a free and open-source collection of hundreds of high-quality fonts designed for web use. Google Fonts was created with the collaborative effort of type designers and engineers and crafted to be visually appealing, legible, and for various screen sizes and devices.
Google Fonts offers lots of different styles to empower web designers, developers, and content creators who can seamlessly use the fonts in their projects. Google Fonts has an extensive library that covers a broad spectrum of styles from classic serifs to modern sans-serifs, playful scripts, and everything.
Also check: How to create custom post types in WordPress? Easy Way!
Why do we use Google fonts?
Google Fonts comes with hundreds of font families that allows you to choose fonts that align with your brand identity and resonate with your target audience. It impacts the readability of your content. Google Fonts are designed with legibility in mind, ensuring that your visitors can read your content effortlessly from any device.
Google Fonts are optimized for web performance. They are hosted on Google’s servers, which are distributed globally. You can also easily integrate Google Fonts into your website by writing a few lines of CSS code. One of the most compelling reasons to use Google Fonts is it is free and open source. So you don’t need extra cost.
Also check:How to add a WordPress table of contents to posts?
How to add Google fonts to CSS on WordPress site?
Using CSS files, and adding Google Fonts are very easy. You do not need advanced coding knowledge. Whether it is WordPress, another CMS, or a custom website, you can implement Google font using this method. So let’s see the steps:
Step 1: Selecting Google Fonts and styles
First, we need to go Google Gonts page. You can search Google fonts on the internet or directly visit https://fonts.google.com/. Now search for the font you are looking for or select a font that matches your brand.
Once you click a font family that you choose, you will be able to select font styles. So, select the styles that you need. You will see all the selected styles on the right panel. If you do not get the right panel, click on the (3square and one plus) icon at the top right.
Step 2: Get embed link and CSS code
Now click on @import and copy the code without style tag.
Step 3: Implementing Google fonts to WordPress website.
To add or implement extra CSS code, WordPress offers an “Additional CSS” option by default. So we can add our Google embed code there. Login to your WordPress Dashboard → Appearance → Customize. Now scroll down the left panel and you will see the “Additional CSS” option. Click on it and paste the code that we copied before.
Now write the code to implement your font on your site. Here I applied new fonts for the H1, H2, and H3 tags. You can also set font-weight as well. Once done, click on the Publish button.
If you want to use this font for the entire site, you can use the code below:
*{
font-family:'Raleway', Arial, sans-serif;
font-weight:700;
}To use your selected code for body text use the code below:
p,span{
font-family:'Raleway', Arial, sans-serif;
font-weight:700;
}Note: If you use the Additional CSS option to implement your code, the applied font will be removed if you change the current theme. So, to prevent this problem, you can use a plugin called Simple Custom CSS and JS.
Conclusion
Integrating Google Fonts into your WordPress site is easy. It is a powerful way to enhance the visual appeal and readability of your content. It also contributes to faster load times due to the fonts being hosted on Google’s servers.
There are also many plugins that offer Google font integration. You can use them but implementing using CSS is easy. This step-by-step guide teaches you how to seamlessly integrate a Google Font with a variety of styles that align with your branding.
You can also check the article where I provided complete guidelines on how to add custom fonts to the WordPress website.
If you face any problem or issue, share it with us by leaving a comment. We will provide solutions. Also, continue reading more helpful articles to learn WordPress tips and tricks from our blog.
