Easy Ways to Change Fonts in WordPress

Easy Ways to Change Fonts in WordPress.

A great way to add brand and personality to your WordPress site is to change the fonts in your theme.

Typography and other grouping elements create a good first impression, customize your website visitors, and emphasize your brand identity. Research has also shown that fonts affect readers’ ability to recognize, remember information, and memorize the text.

If you’ve just installed a WordPress theme or have some experience with CSS and coding, we’ll show you a few options that you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options for changing fonts in WordPress:

Using web fonts such as Google Fonts, Fonts.com, or Adobe Edge Web Fonts hosted on a third party site.
Encode and queue web fonts in your theme.
Place the fonts on your site and add them to your theme.

1. How to change fonts in WordPress using web fonts

Using web fonts is an easier and faster way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access many fonts without having to update them every time they change, and it does not take up space on your hosting server. Fonts are sent directly from the vendor’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body copy, are familiar to website visitors, and convey the desired mood and image.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s take a look at both options.

How to add web fonts using the WordPress plugin

Depending on the web font you choose, you can use a WordPress plugin to access the font library and select the one you want on your site. For this tutorial, we selected Google Fonts and used the Google Fonts Typography plugin.

If your site has fonts that are not displaying or not working as expected, use the Debugging section for troubleshooting.

Note. If you forget to select Publish in Customizer, you will lose any changes you made.

How to add web fonts using code

You can install and use web fonts if you have access to your theme code. This is a manual alternative to adding an additional plugin, but it is not difficult if you follow the instructions carefully.

However, there are different steps to take if you are using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and give it style.css and functions.php files. It will be easier if you have a customized theme as you can edit the stylesheet and function file from your theme.

Note. We selected Work Sans for this tutorial, so the font name may be different from yours depending on what you choose.

This allows you to enqueue the styling from Google Fonts servers to prevent conflicts with third party plugins. It also makes it easier to modify child themes.

function wosib_add_google_fonts () {
wp_register_style (‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style (‘googleFonts’);
}

add_action (â€˜wp_enqueue_scriptsâ€™, â€˜mybh_add_google_fontsâ€™);

function mybh_add_google_fonts () {
wp_register_style (‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style (‘googleFonts’);
}

add_action (â€˜wp_enqueue_scriptsâ€™, â€˜mybh_add_google_fontsâ€™);

In this case, we queued up the Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

body {
font-family: â€˜Work Sansâ€™, sans serif;
}

h1, h2, h3 {
font-family: â€˜Cambriaâ€™, serif;
}

In this case, the main font will be Work Sans, and the heading elements such as h1, h2, and h3 will use Cambria.

After that, save your stylesheet and check if your fonts work as expected. If not, make sure the fonts are not being overridden in the stylesheet, or clear your browser cache and try again.

body {
font-family: â€˜Work Sansâ€™, Arial, sans-serif;
}

h1, h2, h3 {
font-family: â€˜Cambriaâ€™, Times New Roman, serif;
}

If everything is OK, your site visitors will see the default web fonts, in our case Work Sans and Cambria. If there is a problem, they will see fallback fonts, like Arial or Times New Roman in our case.

2. How to change fonts in WordPress by hosting fonts

Hosting fonts on your own servers helps to optimize the performance of web fonts, but it is also a safer way to do this, rather than drawing resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer if licenses allow you to do so.

@ font-face {
font-family: â€˜Work Sansâ€™;
src: url (“fonts / Work Sans-Medium.ttf”) in the format (â€˜woffâ€™); / * medium * /
font-weight: normal;
font-style: normal;
}

@ font-face {
font-family: â€˜Work Sansâ€™;
src: url (“fonts / Work Sans-Bold.ttf”) in the format (â€˜woffâ€™); / * medium * /
font-weight: bold;
font-style: normal;
}

@ font-face {
font-family: â€˜Cambriaâ€™;
src: url (“fonts / Cambria.ttf”) in the format (â€˜woffâ€™); / * medium * /
font-weight: normal;
font-style: normal;
}

Note. Using @fontface allows you to use bold, italic and other variations of your font, after which you can specify the weight or style for each font.

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url (“/ fonts / Work Sans-Medium.ttf”);
}

h1, h2, h3 {
font-family: â€˜Cambriaâ€™, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve your branding and user experience. This is not an easy task, but you will have more control over your theme.

Did you manage to customize your site’s fonts following the instructions in this guide? Let us know in the comments.

1. First, log into your WordPress admin area and select Plugins> Add New.

1. Enter Google Fonts typography in the search box and select Install Now.
1. Select Activate.
1. Then open the customizer by choosing Appearance> Customize.
1. Select the Google Fonts section.
1. Then click the link to open the font settings and configure them as follows:
- In the General Settings section, set the default. font for body text, headings and buttons.
- In advanced settings, customize the site title and description, menus, headers and content, sidebar and footer.
- Uncheck the boxes for unwanted font styles in the Font Download section to avoid slowing down your site.
1. You can test these settings in the customizer to make sure they work the way you want, then select Publish.
1. First, select a font from the Google Fonts library and hit the + (plus) to add it to your library.
1. Then select the tab at the bottom where you will find the code to add to your site. Go to the Embed Font section of the Embed tab. You will find code generated by Google Fonts that looks something like this:
1. Copy this piece of code: https: // fonts.googleapis.com/css2?family=Work+Sans
1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you got from Google Fonts):
1. You can add a new line to your function, or to the same line if you want to add more fonts in the future, as follows:
1. To do this, open your theme’s style.css file and add code to style individual elements with your web fonts as follows:
1. Install a fallback font to make sure the fonts can be easily displayed or accessed, especially for users with older devices, poor connections, or if the font provider has technical problems. To do this, go to your stylesheet and edit your CSS as follows:
1. First, download, unzip, upload the font file to your site, and then link it in your stylesheet. In this case, you do not need to queue fonts in the functions.php file as you did with web fonts. Please make sure the downloads are in .woff format before using them on your website.
1. Then go to wp-content / themes / themename to load the font file into your theme.
2. Open your stylesheet and add the following code (in this case we are using the Work Sans font, but you can replace it with your own fonts):
1. Then add styles for your elements as follows:
–

Easy Ways to Change Fonts in WordPress

Easy Ways to Change Fonts in WordPress.

edit fonts in wordpress

how to change all fonts in wordpress
change the fonts in wordpress

change font color wordpress plugin
how to change font in wordpress dashboard
change default font in wordpress
how do i change fonts in wordpress.

how to change font in footer wordpress