{"id":1073,"date":"2021-10-08T09:18:00","date_gmt":"2021-10-08T16:18:00","guid":{"rendered":"https:\/\/www.wpfellows.com\/?p=1073"},"modified":"2021-10-08T09:18:00","modified_gmt":"2021-10-08T16:18:00","slug":"change-fonts-in-wordpress","status":"publish","type":"post","link":"https:\/\/wpfellows.com\/change-fonts-in-wordpress\/","title":{"rendered":"How to change fonts in WordPress the easy way"},"content":{"rendered":"
Do you want to make your WordPress website a little more individual and change your site’s font? After all, fonts are a matter of taste, and you have to feel comfortable with the look of your website. In this article, beginners and intermediates will learn how to change fonts in WordPress the easy way.<\/p>
Two ways to quickly edit your CSS<\/h2>
Everything to do with the look of your website is controlled by something called a stylesheet. It’s a convenient file called style.css, which tells WordPress how you want your site to look and feel.<\/p>
If you change a statement in this file, your entire website will change accordingly.<\/p>
There are two ways to change the stylesheet of your page, which most beginners will quickly get the hang of:<\/p>
Add own styles via the theme customizer<\/h2>
Since not so long ago, WordPress offers you the possibility to add your own additional CSS to your site in the administration area.<\/p>
This is easily done via the menu item Appearance<\/strong> -> Customizer<\/strong>.<\/p>
In the Customizer, you see a preview of your website on the right side, and on the left side, you find the menu item Additional CSS.<\/p>
The text field that opens now is for your CSS instructions. Don’t get nervous: I will explain exactly what you have to enter there in a minute.<\/p>Change WordPress font via the Customizer<\/figcaption><\/figure>
Edit stylesheet via editor<\/h3>
If you want to make more detailed changes, you have to edit your stylesheet, the file style.css.<\/p>
To edit your style.css, you would typically have to access your server via FTP. A lot of bamboo for people with good basic knowledge, but a bit too complicated for beginners.<\/p>
That’s why there is a so-called Theme Editor in the administration area of your website. You can access it via the menu item Appearance<\/strong> -> Theme Editor<\/strong> and open the style.css there.<\/p>Edit and change font via theme editor<\/figcaption><\/figure>
To keep things as simple as possible here, I’ll describe below how to add your changes via the Customizer.<\/p>
How to add fonts to your WordPress site<\/h2>
If you want to change the font, the first step is to add a new font to your WordPress site. This is similar to your computer, where fonts have to be installed before you can use them.<\/p>
The best way to do this is to use Google Web Fonts. Google provides you with this service with hundreds of fonts, which you can insert into your website completely free.<\/p>
Since the GDPR came into effect, however, Google Fonts have been somewhat controversial from a legal point of view. At least if you embed them the way Google initially suggests.<\/p>
The colleagues from the hoster Mittwald have written a detailed tutorial on how you can easily integrate Google Fonts into your website in a DSGVO-compliant way. The tutorial is so well written that I’m not even going to post my own tutorial on it. I couldn’t write it any better, which is why I would highly recommend it to you.<\/p>
Including new fonts and changing existing ones<\/h2>
If you followed the tutorial above, your site already knows the new font and where to look to pull the font into your page.<\/p>
All we need to do now is specify via CSS which areas of your site this new font should be used for in the first place.<\/p>
Possible areas would be:<\/strong><\/p>
The main headings of your individual pages.<\/li>
The subheadings of the articles.<\/li>
The normal body text on your website.<\/li><\/ol>
How to change the font for your headline<\/h3>
Headings are always hierarchical. The title of a page, i.e., your main heading, is always marked with the tag h1.<\/p>
To customize only the titles of your posts and pages, you can add the following CSS statement to the Additional CSS section in the Customizer:<\/p>
h1 {\n font-family: \"Times New Roman\", Times, serif;\n}<\/code><\/pre>
Changing the font for your subheadings<\/h3>
Subheadings are always marked with the tags h2 to h6 in HTML & CSS. Most often, you will use h2 and h3 for your website.<\/p>
If you want to change the font of your subheadings in WordPress, it looks almost the same as your page title. You just say via CSS that you want to change the subheadings h1 to h6:<\/p>
h2,\nh3,\nh4,\nh5,\nh6 {\n font-family: \"Times New Roman\", Times, serif;\n}<\/code><\/pre>
Changing the font for your body text<\/h3>
The “normal” text, i.e. the body text of your website, is always circumscribed by a p.<\/p>
So if you want to change the font for your body text, you just have to address the class p in your CSS:<\/p>
p {\n font-family: \"Times New Roman\", Times, serif;\n}<\/code><\/pre>
Easy, isn’t it? And the best part is yet to come:<\/p>
If you want to make further adjustments to your fonts, all you have to do is add more info to the instructions above.<\/p>
And while we’re at it, let’s directly adjust the font size and text color in our examples.<\/p>
How to change the font size in WordPress<\/h2>
Let’s start with the main title of your articles and pages in WordPress.<\/p>
To change the font size for this title, you just have to add the line with “font-size” to the statement you just wrote:<\/p>
h1 {\n font-family: \"Times New Roman\", Times, serif;\n font-size:28px;\n}<\/code><\/pre>
CSS statements are always separated by a semicolon. That’s why every line ends with a semicolon.<\/p>
To display the size of your subheadings in a different size as well, simply add a \u201cfont-size\u201d statement to the classes h2 to h6 as well:<\/p>
h2,\nh3,\nh4,\nh5,\nh6 { \nfont-family: \"Times New Roman\", Times, serif;\nfont-size:22px; \n} <\/code><\/pre>
If you want to change the font size of your normal body text, this is also very easy.<\/p>
p { \n font-family: \"Times New Roman\", Times, serif; \n font-size:18px; \n}<\/code><\/pre>
That wasn’t so hard, was it? Now you’re almost an expert in changing fonts using CSS. So we might as well change the color of the text if you like.<\/p>
How to change the font color<\/h2>
Online colors are often specified with a so-called hexadecimal code. A stupid thing because nobody can remember these codes. But it is like it is.<\/p>
CSS instructions for text colors always look like this:<\/p>
color: #003d58;<\/code><\/pre>
The word “color” at the beginning says that a text color should be changed. The #003d58 is the hexadecimal code for the color. In this case, the beautiful dark blue of the WPFellows page.<\/p>
Now you just have to add this information in a new line to your CSS code:<\/p>
p { \n font-family: \"Times New Roman\", Times, serif; \n font-size:18px; \n color: #003d58;\n} <\/code><\/pre>
The result: dark blue body text in Times New Roman font with a text size of 18px.<\/p>
Using a plugin to change the font in WordPress<\/h2>
If the whole thing was too complicated for you and you just don’t feel like doing all that CSS code yourself, you can solve it all another way.<\/p>
For every WordPress problem, no matter how small, there is, of course, always a suitable plugin. This is also true for changing the fonts on your website.<\/p>
Even if I advise you to use the method described above, I want to introduce a few plugins to you, with which you can change the fonts of your website very quickly.<\/p>The Use any Font Plugin helps you to change fonts in WordPress<\/figcaption><\/figure>
![\"Change](\"https:\/\/www.wpfellows.com\/wp-content\/uploads\/2021\/10\/change-fonts-customizer-1024x450.jpg\")
![\"Edit](\"https:\/\/www.wpfellows.com\/wp-content\/uploads\/2021\/10\/edit-fonts-wordpress-css-editor.jpeg\")
![\"The](\"https:\/\/www.wpfellows.com\/wp-content\/uploads\/2021\/10\/use-any-font-plugin-1024x433.jpg\")
![\"Change](\"https:\/\/www.wpfellows.com\/wp-content\/uploads\/2021\/10\/wordpress-fonts-plugin.jpeg\")