fbpx
How To Change Fonts in WordPress – 2022 Guide Lines
How To Change Fonts in WordPress

How To Change Fonts in WordPress – 2022 Guide Lines

Investobuddies.com – The best way to add branding and personality to your WordPress site is to change the font of your theme. However, many people are asking how to change fonts in WordPress ?

Typography and other banding elements make a good first impression and set the mood for your site visitors., establish your brand identity. The study also found that fonts affected readers’ ability to learn, recall information, and memorize text.

If you have installed a WordPress theme. Alternatively, if you have some CSS and coding experience, I will show you some options you can use to change fonts in WordPress.

How To Change Fonts in WordPress

There are 3 main options for changing fonts in WordPress.

  • Use web fonts such as Google Fonts, Fonts.com or 4, hosted on third-party sites.
  • Coding web fonts into themes and adding them to the queue
  • Host 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 a font file.

This gives you access to a variety of fonts without having to update them with every change, if you choose the option, and it doesn’t take up server space on your hosting. Fonts are served directly from the provider’s servers using plugins or by adding code to your site.

In_content_1 all: [300×250] / dfp: [640×360]->

The web font you choose for your site should match your brand identity, be easy to read as body text, be friendly to your website visitors, and convey the mood and image you feel. Want.

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

How To Add Web Fonts Using WordPress Plugins

Depending on the web font you choose, you can use WordPress. Use the plugin to access your font library and select the fonts you want from the site. For this guide, I chose Google Fonts and used the Google Fonts typography plugin.

  • To get started, log in to your WordPress admin dashboard and select Plugins >. Add new.
  • Type Google Fonts Typography in the search bar and install now.
  • Select Activate
  • Then go to Appearance > Personalization to access Customization.
  • Select the Google Fonts section.
  • Then click the link to open the font settings and configure it as follows:
  • Set the default font for the body in Preferences. Text, title and button.
  • Configure the site title and description in Advanced Settings. Ription, menu, title and content, sidebar and footer.
  • In the Font Loading section, set unwanted font weights to Prevent slowing down your site.
  • If your site has fonts that don’t display properly or don’t work, use the Debugging section.
  • Test these settings in a custom tool to make sure they work the way you want, then publish.

Note: If you forget to select publish in the customizer, all changes will be lost.

How To Add Web Fonts Using Code

If you have access to user theme code, you can install and use web fonts. This is a manual alternative to adding additional plugins, but it is not complicated if you follow the steps carefully.

However, if you are using a theme from the WordPress theme directory, or if you are using a theme, there are other steps you need to follow. Custom theme.

If you purchased the theme from the WordPress theme directory, create a child theme and provide the following style.css and functions.php files. It’s easier if you have a customized theme as you can edit stylesheets and function files in the theme.

  • To get started, select a font from the Google Fonts library and select the + (plus) icon to add it to the library.
  • Next, select the tab at the bottom with the code you want to add to your site. Go to the Insert Font section under the Insert tab. The code generated by Google Fonts looks like this:

Note: For this guide, we have chosen Work Sans. The name may be different depending on the selected item.

  • Copy the following part of the code.

Https://fonts.googleapis.com/css2?Family = Work + Sans

This way you can queue styles from Google Fonts servers to avoid conflicts with third-party plugins. It also makes it easier to modify sub-themes.

  • To add a font to the queue, open the function file and add the following code: (replace the link with the one you got from Google Fonts):

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’);

  • If you want to add more fonts later, add a new line to the function or the same line, like this:

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_font s ‘);

In this case, I queued both the Cambria font and the Work Sans font.

The next step is to add the font to the theme’s style sheet. Make fonts work on your site.

  • To do this, open your theme’s style.css file and add code to style individual elements with web fonts, like this:

body {

font-family: ‘Work Sans’, sans-serif;

}

h1, h2, h3 {

font-family: ‘cambria’, serif ;

}

In this case, the default font is Work Sans and header elements such as h1, h2 and h3 are Cambria.

When you’re done, save the stylesheet and check that the fonts are working properly. If not, make sure the font is not overridden in the stylesheet, or clear your browser cache and try again.

Have your backup fonts ready to render or access your fonts easily, especially if you have technical issues with older devices, users with poor connectivity, or font providers. To do this, go to your stylesheet and edit the CSS as follows:

body {

font-family: ‘Work Sans’, Arial, sans-serif;

}

h1, h2, h3 {

font-family: ‘cambria’, times new roman, serif;

}

If all goes well, your site visitors will see the default web font. In our case, Work Sans and Cambria. A backup font (such as Arial or Times New Roman) will be displayed in case of a problem.

2. How to Change Fonts in WordPress By Hosting Fonts

Hosting the fonts on your own server will help optimize the performance of web fonts, but it also does it in a more secure way. Instead of fetching 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 your license allows it.

  • To get started, download the font file, unzip it, upload it to your site, and link it to your stylesheet. In this case you don’t need to queue the fonts in your functions.php file as you did with web fonts. Make sure the file you upload is in.woff format before using it on your website.
  • Next, upload the font files to your theme by clicking on wp-content / themes / themename.
  • Open the stylesheet and add the following code (in this case we will use the Work Sans font, but you can replace it with any font you want):

@font-face {

Font-family: ‘Work Sans’;

Src:url(“fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */

Font weight: normal;

Font style: Normal;

}

@ font-face {

Font-family: ‘Work Sans’;

Src: url ( “fonts / Work Sans-Bold.ttf”) format ( ‘woff’); / * middle* /

Font-weight: bold;

Font-style: normal;

}

@font-face {

Font-family: ‘Cambria’;

Src:url(“fonts/Cambria.ttf”) format(‘woff’); /* medium */

Font weight: normal;

Font style: Normal;

}Strong>

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

  • Next, add a style to the element like this:

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;

}

WordPress Typography Customization

Changing fonts in WordPress is a great idea to improve your branding and user experience. It’s not a trivial task, but it gives you more control over the theme.

Were you able to use the steps in this guide to customize the fonts on your site? Let me know in the comments.