Back to top

Affiliate Link: Interested In a Useful Tables For Amazon Products and More? Check Out:

Amalinks Pro

How To Add A Custom Google Font And Apply It Via Custom CSS

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

There has been a lot of discussion about the limited font availability in Acabado, and that is true as it is just limited to the 2 pre-installed fonts. You can move around this by utilizing CSS though to pull from Google Fonts and then once you pull the font in you can apply it to specific parts of your site.

Below is an example of importing a font from Google, in this case, Open Sans, which is a very common internet font and is the default font for many applications.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Below is an example of how you could perform an import of the font and then use it to apply to the body of your website. This would import from Google the font when the site loads and then apply it to all parts of your website “body”.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans',serif;
}

Using the [ Code Snippets ] plugin you can add a pure CSS code snippet to control this font and give your code a name to remember where it is applied and what font was pulled.

  1. Install Code Snippets if you don’t currently have it installed
  2. Add Title: “Open Sans Font For Body”
  3. Set to run on the front end only
  4. Save and Activate
add_action( 'wp_head', function () { ?>
	<style>
		@font-face { font-family: 'Open Sans'; font-style: normal;  font-weight: 400;
             src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
 			}

		body { 
                     font-family: 'Open Sans',sans-serif;
                     }
	</style>
<?php } );

Now that you have installed the basic version with Open Sans take some time and go through the google font options and see what you can come up with to customize your website!

Another example is below which would be another font using a ttf resource. You are only limited by your imagination! This one would apply to all your <h2> header 2 tagged headings!

add_action( 'wp_head', function () { ?>
	<style>
               @font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
        h2{
	    font-family: roboto-regular;
          }
	</style>
<?php } );

Please share this if you find it valuable and comment if I can add something more of value which could help you in this process.

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals! Read More About Me...

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals! Read More About Me...

8 thoughts on “How To Add A Custom Google Font And Apply It Via Custom CSS

    1. Each font you load has to reach out to Google to download it, so it is possible but it depends on your use and number of fonts. I used Open Sans on my site and it didn’t change the speed any. Though this may depend on host and many other factors.

    1. It was an example of the “body” section on your site. Are you wanting to change all of your site or just your blog posts?

      1. I would like to change all my site, becouse actual font of Acabado doesn’t show polish special letters and it looks strange. Here is my blog about dogs and cats: https://furtastic.pl/blog/

  1. I tried to remove the roboto and libre-franklin fonts from Acabado from the style.css file. Now my site is broken sharepostt.com. Can you please advise on how I can set the style.css file back to the default code?

    1. copy from your theme zip file, so go download the theme and extract it, find the style.css file and then upload it through your host with file manager to replace the existing file.

Leave a Reply

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

Recent Content