- \n
- Understanding Fonts<\/li>\n\n\n\n
- Steps to Add Fonts to Your WordPress Site (with Options)<\/li>\n\n\n\n
- How to Use Web Fonts in WordPress?<\/li>\n\n\n\n
- Learn to Host Your Own Fonts in WordPress<\/li>\n\n\n\n
- Steps to Change Fonts in WordPress<\/li>\n\n\n\n
- Steps to Optimize Fonts in WordPress<\/li>\n<\/ul>\n\n\n\n
Understanding Fonts<\/h2>\n\n\n\n
Let\u2019s learn about the term fonts on the web:<\/strong><\/p>\n\n\n\n
- \n
- Web Fonts:<\/strong>\u00a0Fonts that are hosted on a third-party website and linked to in your site.<\/li>\n\n\n\n
- Locally Hosted Fonts:<\/strong>\u00a0Fonts hosted on your website\u2019s server.<\/li>\n\n\n\n
- Web-safe Fonts:<\/strong>\u00a0A limited range of fonts that are pre-installed on all the computers and your visitors have access to them.<\/li>\n<\/ul>\n\n\n\n
Let\u2019s check the options for adding fonts to your WordPress website.<\/p>\n\n\n\n
Steps to Add Fonts to Your WordPress Site (with Options)<\/h2>\n\n\n\n
Prior to jumping on adding fonts to your site, you should learn about the options available to you.<\/p>\n\n\n\n
Since fonts are part of your site\u2019s design, in most cases, they will be coded via your theme \u2013 but at some times only. In some cases, you can even use a plugin to enable a wider range of fonts in your site.<\/p>\n\n\n\n
Below are some of the options for adding fonts to your site:<\/strong><\/p>\n\n\n\n
- \n
- Make use of Google Fonts by installing a plugin that gives you access.<\/li>\n\n\n\n
- You can use web fonts by coding them into your theme and placing them (it\u2019s not that hard).<\/li>\n\n\n\n
- You can also host your fonts on your own website and add those to your theme.<\/li>\n<\/ul>\n\n\n\n
From this you can see two main differences \u2013 using web fonts hosted outside your site and choosing to host your font files yourself. We will learn about the pros and cons of each of these further.<\/p>\n\n\n\n
Let\u2019s learn more about web fonts and the reasons to use them and the ways of adding them to your site.<\/p>\n\n\n\n
Using Web Fonts in WordPress<\/h2>\n\n\n\n
Since web fonts allow you to easily add a wide range of fonts, they are the most popular way of adding fonts to your website.<\/p>\n\n\n\n
What Are Web Fonts?<\/h3>\n\n\n\n
Basically, fonts that are hosted on a third-party provider\u2019s website are called as web fonts. These fonts can be linked to the provider\u2019s website and pulled in from there, rather than copying the files to your own site.<\/p>\n\n\n\n
With this you get an access to a large range of fonts without the need of using server space on your own hosting.<\/p>\n\n\n\n
Even if the font files change as per the time, you don\u2019t have to update your files and as you will automatically gain access to the new versions of the files from the provider.<\/p>\n\n\n\n
Web fonts can be free or paid, usually via a subscription. Below are some popular providers of web fonts:<\/p>\n\n\n\n
- \n
- Google Fonts:<\/strong>\u00a0It is the biggest provider of free web fonts. All their fonts can be downloaded to your computer. This means you can use the same fonts, as your website has, for creating offline materials. The point is doing this is completely free.<\/li>\n\n\n\n
- Adobe Edge Web Fonts:<\/strong>\u00a0Though designed to be used with Adobe products, they work smoothly on any website. These fonts are also free.<\/li>\n\n\n\n
- Fonts.com:<\/strong>\u00a0They are a premium provider of fonts. In case you need to match your website font to a font from your printed material and the font isn\u2019t available for free, you will get it from this provider by paying for it.<\/li>\n\n\n\n
- fontfabric:<\/strong>\u00a0Basically, a font designer, fontfabric provides premium fonts for use as web fonts and online. Though you need to pay for this, but will get something more individual as compared to Google fonts.<\/li>\n<\/ul>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/google-fonts-compressor-1024x580.jpg\")
<\/figure>\n<\/div>\n\n\nYou will get the fonts directly from the servers of all these providers by adding some code your WordPress site or may be by using a plugin.<\/p>\n\n\n\n
Web fonts stand different from web-safe fonts. Web-safe fonts can be utilized as a drawback for web fonts if your website visitor isn\u2019t able to connect to the web font for some reason. You will learn about this further.<\/p>\n\n\n\n
Why Use Web Fonts?<\/h3>\n\n\n\n
After learning about web fonts, let\u2019s take a look at the reasons to select to use them instead of hosting your own fonts.<\/p>\n\n\n\n
Below are some of the benefits:<\/strong><\/p>\n\n\n\n
- \n
- Ease:<\/strong>\u00a0It takes very less time to add a few lines of code or install a plugin as compared to downloading and uploading the font files. It also makes changing the fonts if you decide to in the future easier.<\/li>\n\n\n\n
- Range of fonts:<\/strong>\u00a0You will get thousands of fonts as web fonts and the list continues to grow.<\/li>\n\n\n\n
- Updates:<\/strong>\u00a0For updating the font file, maybe to add variable fonts or to add extra characters, your site will get an access to the new version without your need to take action.<\/li>\n<\/ul>\n\n\n\n
Several websites use web fonts, with a web-safe font as a backup. Additionally, with WordPress, it\u2019s very easy to do.<\/p>\n\n\n\n
How to Find the Best Web Fonts For Your Site?<\/h3>\n\n\n\n
Selecting which fonts to use is a difficult choice that must be made after selecting to utilize online fonts.<\/p>\n\n\n\n
It used to be quite simple to make a decision because all web developers could access such pre-installed web-safe fonts. You may have asked yourself, “Would you rather use a sans-serif font or a serif font?” Sans-serif fonts lack the little line or stroke that sans-serif fonts have at the end of each bigger stroke in a letter. You have very few options after you make the decision.<\/p>\n\n\n\n
But today, you have the complete freedom.<\/p>\n\n\n\n
Below are the tips that will help you to select the best font for your site:<\/strong><\/p>\n\n\n\n
- \n
- Check your printed materials. Find if there are fonts already being used that can be found as web fonts? If not, can you find something similar to those?<\/li>\n\n\n\n
- Check your competitors\u2019 websites and find the fonts they are using. Don\u2019t copy them, but find for certain styles that express the right sort of image to your website users.<\/li>\n\n\n\n
- Think upon the kind of mood you want to display with your fonts. There are both types of fonts \u2013 modern as well as traditional. Some are fun, while others are more serious.<\/li>\n\n\n\n
- Use the fonts that are easily readable for body text and use some interesting fonts for headlines if you want to.<\/li>\n\n\n\n
- Select from the most popular Google fonts since those are familiar to website visitors and also easy to read.<\/li>\n<\/ul>\n\n\n\n
After selecting your fonts, experiment with them. Font providers such as Google Fonts allow you to type in custom text to check what it looks like in your selected font. After viewing your own text in the font, it might help you decide if you have chosen the right font.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/experimenting-with-your-font-1-compressor-1024x252.jpg\")
<\/figure>\n<\/div>\n\n\nNote that with web fonts changing your fonts becomes easy and so you can always turn to another option when you are developing your theme or setting your site up.<\/p>\n\n\n\n
Adding Web Fonts with a WordPress Plugin<\/h3>\n\n\n\n
After selecting the font, now you will need to add it to your site.<\/p>\n\n\n\n
In case, you aren\u2019t comfortable with adding code to your theme files, you can install a plugin that will enable you to access Google Fonts and use whichever font you want on your site.<\/p>\n\n\n\n
The Google Fonts Typography<\/strong> plugin offers you entire Google font\u2019s library and allows you to review them via the WordPress Customizer<\/strong>.<\/p>\n\n\n\n
Similar to other plugins, install this plugin on your site and then activate it.<\/p>\n\n\n\n
Hover to Appearance > Customize<\/strong> and access the Customizer<\/strong>. A section for Google Fonts<\/strong> will get displayed.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/Google-Fonts-in-Customizer1-compressor-1024x549.jpg\")
<\/figure>\n<\/div>\n\n\nJust click on that link in order to access the settings for your fonts. Configure them as below:<\/p>\n\n\n\n
Basic Settings:<\/strong> In this setting, you can configure the default font for your body text and your headings, as well as any buttons. In the below screenshot you can see that an easy-to-read serif font for the body and a more distinctive font for headings is added.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/configuring-basic-settings-compressor-1024x483.jpg\")
<\/figure>\n<\/div>\n\n\nAdvanced Settings:<\/strong> With this setting, you can configure branding (which includes site title and description), navigation (your menu), content and headings in more detail s well as your sidebar and footer. Fonts can also be loaded without assigning them to anything, which means those can be added to any custom CSS in the Customizer.<\/p>\n\n\n\n
Font Loading:<\/strong> Here you can uncheck any font weights you don\u2019t need (i.e. bold, italics, that kind of thing), so that they don\u2019t slow your site down unnecessarily.<\/p>\n\n\n\n
Debugging:<\/strong> This can be used to force any fonts to display if they\u2019re not working as they should.
Work with these settings and test them in the Customizer to check if they work as per your preference. After managing all the settings click on the Publish<\/strong> button. If you leave the Customizer<\/strong> without clicking on Publish<\/strong> button, you will lose all the settings done.<\/p>\n\n\n\nEditing Font Colors<\/h3>\n\n\n\n
With the free version of plugin, you won\u2019t be able to edit the colors of your fonts. So, buy the premium version or use Additional CSS<\/strong> option in the Customizer.<\/p>\n\n\n\n
Again switch to the Customizer<\/strong> screen and click the Additional CSS<\/strong> tab. An empty text text will appear where you need to add your own CSS.<\/p>\n\n\n\n
In order to search for the element of styling, select it and use the code inspector in your browser to check the color styling of it.<\/p>\n\n\n\n
Here\u2019s an example of Google Chrome<\/strong> and the h1 element is the target:<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/inspect-code1-compressor-1024x528.jpg\")
<\/figure>\n<\/div>\n\n\nIn this WordPress theme, it\u2019s has got its color from the body element. For being more specific, in the text area for your CSS, type in the CSS for your element and the color you want to use. It will look as below:<\/p>\n\n\n\n
h1 {\ncolor: #f542f5;\n}<\/pre>\n\n\n\nThe result is bright pink h1<\/strong> element:<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/pink-heading1-1-compressor-1024x533.jpg\")
<\/figure>\n<\/div>\n\n\nThis test can be repeated with any text elements you want to add color to, and also to any you want to add custom fonts too that weren\u2019t included in the options in the other screens. If you aren\u2019t sure about the CSS to use for fonts, check the section of this post on amending your fonts via CSS.<\/p>\n\n\n\n
Adding Web Fonts Manually<\/h3>\n\n\n\n
If you have access to your theme’s code and aren’t ready to add another plugin to your website, you can install web fonts by adding some code to your functions file and stylesheet.<\/p>\n\n\n\n
The functions file and stylesheet from your theme can be edited if you have an advanced theme on your website that lets you make changes. However, if the theme on your website is an aftermarket theme that you either installed or bought from the WordPress theme directory, then you will need to create a child theme. You will need to provide it with two files in this scenario, such as functions.php and style.css.<\/p>\n\n\n\n
Let\u2019s now check the process of manually adding web fonts to your theme. Here we are going to work with Google Fonts<\/strong> as those are free and most commonly used.<\/p>\n\n\n\n
Pick a Font and Grab the Link<\/h3>\n\n\n\n
You can start by selecting the font from Google Fonts. Click the plus icon next to the font and add it to your library.
At the bottom of the screen click on the tab for your library and you will see some code which you need to add to your site. For adding extra font weights and styles, click the Customize tab and select the one that you require. Then switch back to the Embed<\/strong> tab.<\/p>\n\n\n\nDon\u2019t completely copy the code: you will use it but instead of calling the font in the <head><\/strong> section of your site\u2019s header, you will need to enqueue the fonts. This is the right way to do it in WordPress.<\/p>\n\n\n\n
Now, from the Embed<\/strong> font section, copy just the link to the font.<\/p>\n\n\n\n
In this case, Google Fonts<\/strong> is giving the below code:<\/p>\n\n\n\n
<link href=\"https:\/\/fonts.googleapis.com\/css?family=Raleway\" rel=\"stylesheet\"><\/pre>\n\n\n\n
In this example just copy the below part of the code:<\/p>\n\n\n\n
https:\/\/fonts.googleapis.com\/css?family=Raleway<\/pre>\n\n\n\n
Enqueue the Font(s)<\/p>\n\n\n\n
Open functions file of your theme and add the below code, replacing the link for this font with the link Google has given you for yours:<\/p>\n\n\n\n
function kinsta_add_google_fonts() {
wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway');
wp_enqueue_style( 'googleFonts');}
add_action( 'wp_enqueue_scripts', hostvento_add_google_fonts' );<\/pre>\n\n\n\nThis enqueues the style from the Google Fonts<\/strong> servers. If you need to add more fonts to it in future, you can either add a new line to your function or add it into the same line, like so:<\/p>\n\n\n\n
function kinsta_add_google_fonts() {\nwp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Merriweather|Raleway');\nwp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/pre>\n\n\n\nWith this the style from the Google Fonts servers will get enqueued. In case, you want to add more fonts to it in future, you can add a new line to your function or add it into the same line as below:<\/p>\n\n\n\n
function kinsta_add_google_fonts() {\nwp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Merriweather|Raleway');\nwp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/pre>\n\n\n\nWith this, both the Merriweather<\/strong> and Raleway<\/strong> fonts get enqueued.<\/p>\n\n\n\n
Adding the Font(s) to Your Stylesheet<\/h3>\n\n\n\n
Until this step your font won\u2019t start working on your site because you will need to add it to your theme\u2019s stylesheet.<\/p>\n\n\n\n
In your theme, open the style.css file and add the code to style individual elements with your web fonts. Ensure that you add it after any existing CSS for fonts or it might get overridden by that.<\/p>\n\n\n\n
You can style the elements which you want to but you need to use a legible font for the body element and something modern for the headings as below:<\/p>\n\n\n\n
body {\nfont-family: 'Raleway', sans-serif;\n}\nh1, h2, h3 {\nfont-family: 'Merriweather', serif;\n}<\/pre>\n\n\n\nIn the above example, all the text on the page except the h1, h2<\/strong> and h3<\/strong> elements will use the Raleway<\/strong> font. The h1,<\/strong> h2<\/strong> and h3<\/strong> elements will use Merriweather<\/strong>.<\/p>\n\n\n\n
Save the stylesheet and check your site to ensure all works as expected. In case the new fonts aren\u2019t getting displayed, just clear your browser cache and check that the fonts aren\u2019t being overridden by any styling for fonts below in the stylesheet. Therefore, it\u2019s a good idea to add your new styling at the bottom of the stylesheet or replace the existing font styling with your new styling which is better.<\/p>\n\n\n\n
Adding a Backup Font<\/h3>\n\n\n\n
It might happen that someone visits your website and, for whatever reason, is unable to access the web font files. It might be the result of a bad connection or an outdated gadget that isn’t able to display online fonts. Or the web font provider is having some technical difficulties.<\/p>\n\n\n\n
It is therefore wise to always have a backup plan in place.<\/p>\n\n\n\n
You can go one step farther, but the Google fonts code already provides a backup that only specifies serif or sans-serif.<\/p>\n\n\n\n
If your visitor is using a mobile device without web-ready fonts, mention the second disadvantage of utilizing just serif or sans-serif and use one of the web-ready fonts that are currently loaded on their system.<\/p>\n\n\n\n
Return to your stylesheet and edit your CSS so it reads something as below:<\/p>\n\n\n\n
body {\nfont-family: 'Raleway', Helvetica, sans-serif;\n}\nh1, h2, h3 {\nfont-family: 'Merriweather', Georgia, serif;\n}<\/pre>\n\n\n\nWith this, people visiting your site will see your web fonts if it works well. But if it doesn\u2019t, they\u2019ll see Helvetica<\/strong> or Georgia<\/strong>, or if not those, they\u2019ll see whatever serif and sans-serif fonts their browser loads.<\/p>\n\n\n\n
Hosting Your Own Fonts in WordPress<\/h2>\n\n\n\n
Some developers host fonts on their own server instead of using web fonts. You might be one of them.<\/p>\n\n\n\n
There can be several reasons behind this such as performance, budget or security.<\/p>\n\n\n\n
In case you are worried about performance, you can optimize the performance of your web fonts in various ways. But if you have taken a decision to go with local route then you should know the way to do it.<\/p>\n\n\n\n
Reasons to Host Your Own Fonts<\/h3>\n\n\n\n
It is often easier to use web fonts and can offer more flexibility as well as require less space on your server. But this doesn\u2019t mean that using locally hosting fonts won\u2019t be appropriate.<\/p>\n\n\n\n
Reasons you might want to host fonts locally are as below:<\/strong><\/p>\n\n\n\n
- \n
- You might not want to pull in resources from third-party providers for security reasons, because your own site\u2019s security is controlled by you.<\/li>\n\n\n\n
- It might be that using a third-party service impacts your site\u2019s performance.<\/li>\n\n\n\n
- You might have bought a font file and prefer using that. Ensure your license includes website use as well as use in printed materials.<\/li>\n\n\n\n
- Your site is hosted locally, for example on an intranet, and users won\u2019t have access to web fonts while browsing it.<\/li>\n<\/ul>\n\n\n\n
Finding Fonts You Can Host Locally<\/h3>\n\n\n\n
You can download many web fonts for using then as locally hosted fonts, but just check that it is permitted by the license. It is allowed in terms of Google Fonts<\/strong>.<\/p>\n\n\n\n
Some fonts are not available as web fonts which can be downloaded and hosted by yourself. You can upload any font file downloaded to your computer to your website and store there. In case, you use a font that isn\u2019t available as a web font to bundle it with your branding, it is a good solution but you will need to check if the license allows it.<\/p>\n\n\n\n
Steps to Add Locally Hosted Fonts to Your WordPress Site<\/h3>\n\n\n\n
Now that you want to host your fonts locally, let\u2019s learn to set it up?<\/p>\n\n\n\n
This is a different process from using web fonts. Just upload the font file(s) to your site and link to them in your stylesheet without enqueuing them in your functions file.<\/p>\n\n\n\n
How to Download and Convert the Fonts?<\/strong><\/p>\n\n\n\n
Download the fonts you want to use. In Google Fonts<\/strong>, click on the download icon while viewing the font in your library.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/downloading-font-from-google-fonts-1-compressor-1024x539.jpg\")
<\/figure>\n<\/div>\n\n\nThen unzip the font file on your computer and delete any font weights that aren\u2019t to be used on your site as there\u2019s no point in uploading files you won\u2019t be using.<\/p>\n\n\n\n
The files should be in the .woff<\/strong> format to use them on your website. In case they aren\u2019t (they won\u2019t be if you get them from Google fonts), you can use the service such as Convertio<\/strong> to convert them<\/p>\n\n\n\n
How to Upload the Fonts to Your Theme?<\/strong><\/p>\n\n\n\n
Upload the font file(s) to your theme, in wp-content\/themes\/themename<\/strong>, where themename<\/strong> is the folder for your theme. Putting any font files in their own folders in the theme would be the best, for example, a fonts folder.<\/p>\n\n\n\n
While working with a third-party theme, create a child theme for your font files and your stylesheet.<\/p>\n\n\n\n
After that, you\u2019ll need to add the font to your stylesheet.<\/p>\n\n\n\n
Add the Fonts(s) in CSS<\/strong><\/p>\n\n\n\n
Open your theme\u2019s stylesheet.<\/p>\n\n\n\n
Add code like as below, replacing the fonts used here with your own:<\/p>\n\n\n\n
@font-face {\nfont-family: \u2018Raleway';\nsrc: url( \u201cfonts\/Raleway-Medium.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\nfont-weight: normal;\nfont-style: normal;\n}\n\n@font-face {\nfont-family: \u2018Raleway';\nsrc: url( \u201cfonts\/Raleway-Bold.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\nfont-weight: bold;\nfont-style: normal;\n}\n\n@font-face {\nfont-family: \u2018Merriweather';\nsrc: url( \u201cfonts\/Merriweather.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\nfont-weight: normal;\nfont-style: normal;\n}<\/pre>\n\n\n\nAdd extra that you need to. Note that if you want to use the bold, italics, etc. variations of your font, it is important to declare each one using @fontface<\/strong> and then specify the weight or style for each, as done above with Raleway<\/strong> for bold and normal weights.<\/p>\n\n\n\n
Then add the styling for your elements, as you do when using web fonts:<\/p>\n\n\n\n
body {\nfont-family: 'Raleway', Helvetica, sans-serif;\nsrc: url( \u201c\/fonts\/Raleway-Medium.ttf\u201d );\n}\nh1, h2, h3 {\nfont-family: 'Merriweather', Georgia, serif;\n}<\/pre>\n\n\n\nWith this, your locally hosted fonts will work with your theme.<\/p>\n\n\n\n
Steps to Change Fonts in WordPress<\/h2>\n\n\n\n
After learning to install fonts in your WordPress site in one of two ways, you should learn to edit them as well as change them.<\/p>\n\n\n\n
Your fonts can be edited in one of three ways: in the post or page editing screen, via the Customizer<\/strong>, or using CSS.<\/p>\n\n\n\n
Let\u2019s check each of those options for changing the font style, color, and size.<\/p>\n\n\n\n
How to Change Font Styles in WordPress?<\/h3>\n\n\n\n
Let\u2019s see how we can do that both using the Block Editor<\/strong> or the Classic Editor<\/strong>.<\/p>\n\n\n\n
Steps to Change Font Styles in Block Editor (Gutenberg)<\/h3>\n\n\n\n
With the recent version of WordPress using the Gutenberg<\/strong> editor, the style of your text can be changed when editing it in your post or page.<\/p>\n\n\n\n
Select the block to be edited and a styling menu will get displayed above it.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/Gutenberg-block-styling-1-compressor-1024x387.jpg\")
<\/figure>\n<\/div>\n\n\nSelect the text to be edited and then click on the icons to make it bold or italicized. By clicking the arrow next to those, you can also select strikethrough.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/strikethrough-in-Gutenberg1-compressor-1024x436.jpg\")
<\/figure>\n<\/div>\n\n\nSteps to Change Font Styles in the Classic Editor<\/h3>\n\n\n\n
You can also edit font styles in an older version of WordPress or in the Classic Editor<\/strong> plugin, you can also edit font styles.<\/p>\n\n\n\n
The Classic Editor<\/strong> offers a toolbar located above the main editing window from where you can change the text styles.<\/p>\n\n\n\n
Clicking on the Toolbar Toggle<\/strong> icon to its right, gives you an access to more options along with strikethrough.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/classic-editor-toolbar1-compressor-1024x496.jpg\")
<\/figure>\n<\/div>\n\n\nSteps to Change Font Styles in the Customizer<\/h3>\n\n\n\n
For changing the font style for a specific element, add manual CSS<\/strong> to the Customizer.<\/p>\n\n\n\n
Open the Customizer<\/strong> and click on Additional CSS<\/strong>. A screen will appear where you can type in CSS.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/additional-css-in-customizer1-compressor-1024x600.jpg\")
<\/figure>\n<\/div>\n\n\nNow, simply type in the CSS for your fonts in the box. You can add this CSS if you want to change all h1 and h2<\/strong> elements to italics:<\/p>\n\n\n\n
h1, h2 {\nfont-style: italics;\n}<\/pre>\n\n\n\nSteps to Change Font Styles in Your Stylesheet<\/h3>\n\n\n\n
If you\u2019re good at adding code to your stylesheet, you can do it in a better way.<\/p>\n\n\n\n
In terms of a third-party theme, creating a child theme for your own styling is essential otherwise any changes you make will be lost after updating the theme. Then create a stylesheet in the child theme to let WordPress understand that it\u2019s a child theme and this is where you put your new font styling.<\/p>\n\n\n\n
If you are using your own theme, edit and amend the CSS in your own stylesheet. The file is style.css and it is located in your theme folder in wp-content\/themes<\/strong>.<\/p>\n\n\n\n
At end of your stylesheet, add any font styling so it isn\u2019t wiped out by anything already present. Or remove and overwrite any existing font styling, if you want to retain it.<\/p>\n\n\n\n
You can change the weight of an element using font-weight as below:<\/p>\n\n\n\n
span.featured {\nfont-weight = bold;\n}<\/pre>\n\n\n\nYou can change the style of an element using font-style as below:<\/p>\n\n\n\n
span.featured {\nfont-style = italic;\n}<\/pre>\n\n\n\nYou can change the alignment using text-alignment as below:<\/p>\n\n\n\n
span.featured {\ntext-alignment: center;\n}<\/pre>\n\n\n\nSteps to Change Font Colors in WordPress<\/h3>\n\n\n\n
You might want to change the color of certain text in your site. But ensure that you don\u2019t add excessive colors as your theme is already designed with colors that blend together and so adding too many of them might make the website unprofessional and loud.<\/p>\n\n\n\n
Steps to Change Font Colors in Gutenberg<\/h3>\n\n\n\n
You can edit text color and background via Gutenberg<\/strong> text blocks. Simply open the block you want to edit and click on the Color Settings<\/strong> tab in the Block<\/strong> section on the right of the screen.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/color-settings-tab-compressor-1024x455.jpg\")
<\/figure>\n<\/div>\n\n\nYou can edit the background color and the text color for text blocks from here.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/custom-colors-in-a-block1-compressor-1024x516.jpg\")
<\/figure>\n<\/div>\n\n\nKeep in mind that WordPress will alert you if the color scheme you choose appears unsuitable for accessibility, like in the example above. Avoid overusing color; after all, you choose your theme for your website based on its acceptable color scheme, and using too many colors will make it appear garish.<\/p>\n\n\n\n
Click the Advanced tab, which is located beneath the Color Settings tab, to add a class to that block. You can then design the block using the Customizer or your CSS. You may use that class to style the block, for instance, if you give it a class of.featured.<\/p>\n\n\n\n
Steps to Change Font Colors in the Classic Editor<\/h3>\n\n\n\n
With the Classic Editor\u2019s<\/strong> toolbar, you can change the color of any text you select. So, just select an individual word and change its color. Below is the example of this:<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/classic-editor-changing-colors-1-compressor-1024x489.jpg\")
<\/figure>\n<\/div>\n\n\nThough you get plenty of flexibility, ensure that you don\u2019t overuse it. If you start including lots more colors to your text it will result in a site that\u2019s difficult to read and bad for accessibility.<\/p>\n\n\n\n
Steps to Change Font Colors in the Customizer<\/h3>\n\n\n\n
If there are options in your theme to change the color scheme of your site, you can do it here.<\/p>\n\n\n\n
For example, in the site below a theme that allows to choose a new color scheme for the entire theme is used. Due to this it is ensured that the new colors work together well and are cohesive.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/editing-color-scheme-in-the-Customizer-1-1-compressor-1024x556.jpg\")
<\/figure>\n<\/div>\n\n\nThe options for this will depend on your theme \u2013 some themes allow targeting headings, links and other elements as well as change their color.<\/p>\n\n\n\n
For targeting specific elements to change their color but there is no option with your theme, add CSS in the Customizer to do this.<\/p>\n\n\n\n
Select Customize > Additional CSS<\/strong>, and in the text box type your CSS.<\/p>\n\n\n\n
For example, to change the color of your h1headings, you type the below code:<\/p>\n\n\n\n
h1 {\ncolor: #564534;\n}<\/pre>\n\n\n\nIf that doesn\u2019t work, you might need to add more specific CSS. In this theme, the color for the site heading link is coded using the #site-titleID, so it is required to add this CSS:<\/p>\n\n\n\n
#site-title a {\ncolor: #564534;\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/additional-CSS-color-compressor-1024x558.jpg\")
<\/figure>\n<\/div>\n\n\nSimply replace the color used above with your own color.<\/p>\n\n\n\n
After you finish doing the changes, click the Publish button.<\/p>\n\n\n\n
Steps to Change Font Colors in Your Stylesheet<\/h3>\n\n\n\n
Along with font styles, you can also edit your theme\u2019s stylesheet (or create a child theme) to change the font colors.<\/p>\n\n\n\n
Change the color using color. Below is an example where the main color for the site\u2019s text is changed using the body element:<\/p>\n\n\n\n
body {\ncolor = #222222;\n}<\/pre>\n\n\n\nMake sure you wipe out any existing styling for the same elements and also style any elements that get that styling if you want them to be of a different color. All text will get the color of the body element if it has its own styling.<\/p>\n\n\n\n
Steps to Change Font Sizes in WordPress<\/h3>\n\n\n\n
To make it accessible, you might want your fonts to be bigger than their default size in your theme. Or you might find the headings in your widget areas are too small, for example.<\/p>\n\n\n\n
Steps to Change Font Size in Gutenberg<\/h3>\n\n\n\n
Using the Gutenberg editor, you can change the text size within each block.<\/p>\n\n\n\n
For this, select the block and click on the Text Settings tab in the Blocks menu on the right of the screen. The text in the block can be changed to smaller or larger, as below:<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/editing-font-size-in-Gutenberg-compressor-1024x459.jpg\")
<\/figure>\n<\/div>\n\n\nDon\u2019t do this too much. If all the paragraphs on your page are different sizes, it will appear separated and will make reading difficult.<\/p>\n\n\n\n
Steps to Change Font Size in the Classic Editor<\/h3>\n\n\n\n
You don\u2019t get the option to select a particular text and change its size in the Classic Editor. Therefore, in case you don\u2019t need this feature, the only option is to upgrade to Gutenberg.<\/p>\n\n\n\n
Steps to Change Font Size in the Customizer<\/h3>\n\n\n\n
There may be an option to change the font sizes in the Customizer based on your theme, either to change the font size for the complete site or target headers and body text.<\/p>\n\n\n\n
If there isn\u2019t a Customizer option to change font sizes in your theme, but you can use the Additional CSS option. Go to Customize > Additional CSS<\/strong> and type the CSS in the box.<\/p>\n\n\n\n
Below the headings in the widget areas are made bigger, using this CSS:<\/p>\n\n\n\n
h2.widget-title {\nfont-size: 3em;\n}<\/pre>\n\n\n\n![\"\"](\"https:\/\/www.hostvento.com\/kb\/hosting-faqs\/wp-content\/uploads\/2019\/11\/styling-font-size-with-additional-CSS-compressor-1024x557.jpg\")
<\/figure>\n<\/div>\n\n\nThis might be bit too big, but it will give you the general idea.<\/p>\n\n\n\n
Steps to Change Font Size in Your Stylesheet<\/h3>\n\n\n\n
Changing the size of fonts in your stylesheet is similar to changing any other styling for your fonts.<\/p>\n\n\n\n
For changing the size of all the text in your site, you would use the body element:<\/p>\n\n\n\n
body {\nfont-size: 14px;\n}<\/pre>\n\n\n\nUse pixels for the body element, but for other elements use emso as the size is relative to the size of the body element.<\/p>\n\n\n\n
h1,\n#site-title {\nfont-size: 2em;\n}<\/pre>\n\n\n\nIf you are making changes to the fonts in your theme stylesheet, make sure you test it on a development or staging site first to avoid the risk of ruining your live site.<\/p>\n\n\n\n
Optimizing Fonts in WordPress<\/h2>\n\n\n\n
May you use web fonts or locally hosted fonts, it is always sensible to do everything to optimize your fonts. Below are some tips on optimizing your fonts, both for speed and design:<\/p>\n\n\n\n
How to Optimize Fonts for Performance?<\/h3>\n\n\n\n
While using web fonts on your site, you\u2019ll want to do everything possible to ensure that they\u2019re delivered to your pages quickly and also see that though they\u2019re hosted elsewhere, it doesn\u2019t slow things down.<\/p>\n\n\n\n
- \n
- Caching helps to ensure pages don\u2019t need to be rebuilt every time they\u2019re loaded. Hostvento\u2019s WordPress hosting plans come with caching built-in.<\/li>\n\n\n\n
- A web fonts provider that delivers fonts using a\u00a0Content Delivery Network or CDN<\/strong>\u00a0is always best to go with. This is offered by Google Fonts and also speeds up delivery of the fonts.<\/li>\n\n\n\n
- Use only those fonts that are required. Don\u2019t keep variations of fonts (weights, styles) that won\u2019t be used in your stylesheet. In case you need them at a later date, you can always add them then.<\/li>\n\n\n\n
- While using web fonts, ensure to enqueue them properly. Don\u2019t use an\u00a0@import<\/strong>\u00a0line in your stylesheet, even if it is recommended by your web font provider.<\/li>\n\n\n\n
- When you add CSS manually, add it to your theme\u2019s stylesheet and instead of the\u00a0<head><\/strong>\u00a0section of your\u00a0header.php<\/strong>\u00a0file. This is why it\u2019s better practice to code the CSS manually into your theme instead of using the Customizer or a block, as both of those will add inline CSS to the page rather than adding it to the stylesheet.<\/li>\n\n\n\n
- Use CSS inlining to reduce a few extra milliseconds off page load times. In this process,\u00a0base64<\/strong>\u00a0encoding is used to add CSS from your stylesheet into the page prior to loading it, saving the browser having to load extra files. It may seem illogical of the advice given above about not writing inline CSS, but it still works from a separate CSS file and doesn\u2019t mean manually coding inline CSS. When you load multiple fonts, inlining can speed up your site to some extent.<\/li>\n\n\n\n
- Using minification helps to reduce the size of your stylesheet.<\/li>\n\n\n\n
- When hosting fonts locally, only upload the files for the fonts and the font weights and styles you need. Include only those variations that you need using the\u00a0@font-face<\/strong>\u00a0declaration.<\/li>\n\n\n\n
- Use a CDN to host your own fonts instead of hosting them on your own server.<\/li>\n\n\n\n
- When you host your own fonts, include additional formats:\u00a0woff2, woff, ttf, and eot<\/strong>. With this browsers can select the version that\u2019s going to load fastest.<\/li>\n\n\n\n
- For you site title, if you\u2019re using a different font, enqueue just the characters required instead of the complete font library.<\/li>\n<\/ul>\n\n\n\n
So if your site title is Hostvento, you can make a small performance improvement by updating the stylesheet like this:<\/p>\n\n\n\n
function kinsta_add_title_font() {\nwp_register_style( 'googleFonts', \u2018https:\/\/fonts.googleapis.com\/css?family=Raleway&text=\u201ckinsta');\nwp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );<\/pre>\n\n\n\nHow to Optimize Fonts for Design?<\/h3>\n\n\n\n
Along with optimizing the performance of your fonts, you should make sure that they are visually optimized. It means they should fit well with the design of your site and with your offline materials.<\/p>\n\n\n\n
This might be required if you use a plugin or a child theme to add extra fonts on top of the ones already combined with your theme. Your theme might look messy if you have used too many fonts in too many colors and styles.<\/p>\n\n\n\n
Prior to adding extra fonts to your site, consider the following:<\/p>\n\n\n\n
- \n
- Check if the new fonts are consistent with your existing fonts. Also, see that they express a similar style or mood.<\/li>\n\n\n\n
- In case you want to match a font used for print materials but are not able to use the same font as a web font, find one as close a match as possible on Google Fonts.<\/li>\n\n\n\n
- Check if the fonts you\u2019ve selected are consistent with your brand. When you have a professional business website, you won\u2019t use\u00a0Comic Sans<\/strong>\u00a0(in fact, whatever kind of website you\u2019re running, you won\u2019t use\u00a0Comic Sans<\/strong>).<\/li>\n\n\n\n
- While changing the colors of your fonts, use colors already used in the design of your theme or that coordinate with them. Avoid adding too many colors, as it will make your site look unprofessional.<\/li>\n\n\n\n
- In case you are trying to select a pair of fonts on Google Fonts, use a service like\u00a0fontpair<\/strong>\u00a0to find two that work well together.<\/li>\n<\/ul>\n\n\n\n
The fonts used in your design will affect the impression visitors get when they reach your site. Ensure you\u2019ve considered this and selected fonts that will reinforce your brand.<\/p>\n\n\n\n
How to Work with Variable Fonts?<\/h3>\n\n\n\n
Variable fonts are a new kind of fonts that help you to add more fonts to your site more efficiently.<\/p>\n\n\n\n
They allow you to store more information in one font file, so that when you need variations on your font (bold, italics, etc.), you don\u2019t have to load multiple font files, but can just load the one.<\/p>\n\n\n\n
A font having several font weights, styles, and slants might reduce the amount of file space needed and facilitate the @fontface add or enqueue process.<\/p>\n\n\n\n
Variable fonts are supported by the most recent versions of Chrome, Edge, Firefox, and Safari, but not by the earlier browsers. So, there will be a disadvantage if you continue to utilize them. There aren’t many different variable typefaces available yet. Google supports the specification, so even though Google Fonts doesn’t have them, it’s likely that they will eventually be added.<\/p>\n\n\n\n
It’s interesting to follow developments as font producers work to produce more variable fonts and increase their dependability. Once they do, you may employ variable fonts to optimize your fonts.<\/p>\n\n\n\n
Summary<\/h2>\n\n\n\n
It isn\u2019t easy to change fonts on your WordPress site. You can use different possibilities to choose from:<\/p>\n\n\n\n
- \n
- Using web fonts with the installation of a plugin.<\/li>\n\n\n\n
- Using web fonts by coding them into your theme and enqueuing them.<\/li>\n\n\n\n
- Hosting your fonts.<\/li>\n<\/ol>\n\n\n\n
Then, you should learn to optimize your fonts for better performance. After following the tips in this guide, you should be able to change fonts in WordPress as well as have more control over them in your theme.<\/p>\n","protected":false},"excerpt":{"rendered":"
Typography plays a crucial role in distinguishing engaging from uninteresting websites. You may give your website a more polished and branded appearance if you decide to alter the fonts in WordPress. Do you know how to choose the appropriate fonts for your WordPress website or how to use fonts in the best possible way? Don’t […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":23377,"menu_order":841,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-17475","docs","type-docs","status-publish","hentry","no-post-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/docs\/17475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/comments?post=17475"}],"version-history":[{"count":1,"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/docs\/17475\/revisions"}],"predecessor-version":[{"id":17479,"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/docs\/17475\/revisions\/17479"}],"up":[{"embeddable":true,"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/docs\/23377"}],"wp:attachment":[{"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/media?parent=17475"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.hostvento.com\/kb\/wp-json\/wp\/v2\/doc_tag?post=17475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Range of fonts:<\/strong>\u00a0You will get thousands of fonts as web fonts and the list continues to grow.<\/li>\n\n\n\n
- Adobe Edge Web Fonts:<\/strong>\u00a0Though designed to be used with Adobe products, they work smoothly on any website. These fonts are also free.<\/li>\n\n\n\n
- Google Fonts:<\/strong>\u00a0It is the biggest provider of free web fonts. All their fonts can be downloaded to your computer. This means you can use the same fonts, as your website has, for creating offline materials. The point is doing this is completely free.<\/li>\n\n\n\n
- Locally Hosted Fonts:<\/strong>\u00a0Fonts hosted on your website\u2019s server.<\/li>\n\n\n\n
- Web Fonts:<\/strong>\u00a0Fonts that are hosted on a third-party website and linked to in your site.<\/li>\n\n\n\n