How to Add Google Fonts in WordPress Themes

How to have Safe Surfing on Chrome
How to have Safe Surfing on Chrome
November 24, 2017
How to Add Google Fonts in WordPress Themes

Everybody desires their website to be unique. one in all the best ways that to customise a website is to add custom fonts to that. After all, the text makes up the massive a part of it and is a vital part of internet style. Google Fonts provides a large range of internet fonts that anyone will use. It’s associate degree awesome service and one that a lot of website owners should take advantage of.

You can found too many fonts in google fonts.

1) Find The Font

firstly search the google font on your web browser, After Searching you will found a page with full of fonts like the below screenshot. Select you wished fonts from here. If you are looking for one typeface, in particular, the easiest way is to search for it directly by name in the upper right corner.

Google font-Google fonts

You can also use the many filter options. First of all, you can filter fonts by category on the right side –

  • Serif — Meaning fonts with small squiggly lines at the end. Times New Roman is a good example of a serif font.
  • Sans-Serif — These are simple fonts without the little lines. Look at the type we are using on this website to understand what we are talking about.
  • Display — Find fonts that are usable at large display such as for headings and titles.
  • Handwriting — Typography that looks like someone drew it by hand.
  • Monospace — Fonts with characters that all have the same spacing. Anyone who was already using computers in the late 80s has seen this.

You can also sort the fonts –

  • Trending
  • Popular
  • Date Added
  • Alphabetical

If that isn’t enough, you may also search fonts by style. Options for that include:

  • The number of styles — How many different style options the font offers.
  • Thickness — From very thin letters to very thick.
  • Slant — Are the letters straight or slanted?
  • Width — Search by the spacing between letters and characters.

 

2. Select the Font

 

Once you have settled on a font, click on the plus sign in the upper right corner to add it to your selection. Your chosen font will then appear in a new menu at the bottom of the screen.

select-fonts-Google fonts

Copy your code from the family select box.

set-font-Google fonts

 

3. Enqueueing Google Fonts

We need to enqueue google font in functions.php file of our (child) theme. with wp_enqueue_style function.

function custom_add_google_fonts() {
 wp_enqueue_style( 'custom-google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,400i', false );
 }
 add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );


Save the file.

 

4. Calling Google Fonts in style.css

call google fonts-google-fonts

Just use the FOnt-family in the style.css, where you want to change the font. See the below example-

.enigma_footer_widget_title {
 font-family: Roboto;
}

Save the file.

Adding Google Fonts With Plugins

You also can add the Google fonts with the help of plugins. The plugins are –

  1. Google Font
  2. Easy Google Fonts
  3. WP Google Fonts

 

Past time it is very difficult to use google fonts these days anyone can add custom fonts to their WordPress website in few minutes, thanks to Google Fonts. In the article above, you have learned several ways to add Google Fonts to your site, first by hand and then with a plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *

Inquiry