Locally hosting Open Sans, remove Google Fonts

This topic has 9 replies, 3 voices, and was last updated 3 years, 1 month ago by Elvin.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
March 22, 2021 at 4:49 am #1704797

Tom

Hi there,

I want to locally host Open Sans and remove Google Fonts.

Google Fonts has already been removed using the option in Autoptimise.

I have followed this and have the font files in my uploads folder: https://docs.generatepress.com/article/adding-local-fonts/

If I then select “Open Sans” in customiser, as I have done now, it displays the “System Stack” font (as it’s currently showing).

If I rename “Open Sans” to “Open Sans Local” in the @font-face CSS code and functions.php (the snippet to add it to customiser), and select it in customiser, I get some other default font that looks like Times New Roman.

Any help is appreciated.

March 22, 2021 at 7:47 am #1705221

David
Staff
Customer Support

Hi there,

can you check the URLs you have added in the @font-face CSS as it looks like there is a missing / after the uploads directory eg.

https://thewebsitename.co.uk/wp-content/uploadsopen-sans-v18-latin-regular.woff2

March 22, 2021 at 3:01 pm #1705744

Tom

Thanks David, good spot. I’ve fixed the URLs however System Stack is still showing with Open Sans selected in customiser. I’ve tried a few different browsers and given it 30 minutes. I’ve also purged my Cloudflare cache.

March 22, 2021 at 6:11 pm #1705820
Elvin
Staff
Customer Support
Hi Tom,

The system stack is the default fallback. This particular CSS is coming from the theme’s default style.css/style.min.css.

I’ve checked your site and your <body> is actually set to Open sans but I’m not exactly sure if it’s imported properly.

That said, can you try this import CSS?
```
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url(https://yoursite.domain/wp-content/uploads/open-sans-v18-latin-regular.eot);
	src: local('Open Sans Regular'), local('OpenSans-Regular'), 
    url(https://yoursite.domain/wp-content/uploads/open-sans-v18-latin-regular.eot?#iefix) format('embedded-opentype'), 
    url(https://yoursite.domain/wp-content/uploads/open-sans-v18-latin-regular.woff2) format('woff2'), 
    url(https://yoursite.domain/wp-content/uploads/open-sans-v18-latin-regular.woff) format('woff'), 
    url(https://yoursite.domain/wp-content/uploads/open-sans-v18-latin-regular.ttf) format('truetype'), 
    url(https://yoursite.domain/wp-content/uploads/open-sans-v18-latin-regular.svg#OpenSans) format('svg');
}
```
Make sure you don’t forget ; delimiters. These are important.
March 22, 2021 at 7:44 pm #1705867

Tom

Hi Elvin,

I tried replacing the import CSS from the guide with your version (in child theme style.css) and the font is still the system default. I once again purged Cloudflare, Autoptimise and WP Fastest Cache caches.

Can you please remove my website URL from your post?

Thanks

March 22, 2021 at 10:27 pm #1705932

Elvin
Staff
Customer Support

I tried replacing the import CSS from the guide with your version (in child theme style.css) and the font is still the system default. I once again purged Cloudflare, Autoptimise and WP Fastest Cache caches.

Can you specify with texts within the site are you pertaining to?

I’ve checked the site and the <body> is set to Open sans and everything else seems to be set to “inherit” which will be Open sans as well as it is inheriting from the body tag.

I’ve even done a side by side comparison, checking for distinct features of Open sans (it has a distinct capital J and Q) and your site seems to be using it already as shown here: https://share.getcloudapp.com/RBuY56wk

Can you please remove my website URL from your post?

Done.

March 22, 2021 at 11:12 pm #1705969

Tom

I think I’m confused because the change has made the headers more bold (hence why I thought it was a different font).

H1 and H2 font weight is 300, the default. This is reflected in the customiser [1].

H1 and H2 font weight is confirmed to be 300 in the CSS. However the headers are bolder than they used to be [2]

What is causing this discrepancy?

March 23, 2021 at 1:22 am #1706087

Elvin
Staff
Customer Support

What is causing this discrepancy?

The font-weight isn’t honored by the display because the only font variant you’ve imported is the 400 weight variant.

So instead of having 300 on h2, it uses the 400 which is the thicker/bolder one.

You’ll have to locally host the font files for the other font-weight as well if you intend to use them. Each font-weight is its own file. You can download them here: https://fonts.google.com/specimen/Open+Sans?preview.text_type=custom

Looking at your code, you seem to only have imported the regular one which is 400.

March 25, 2021 at 11:13 pm #1710220

Tom

Thanks everyone for the help so far.

With this up and running, the issue I am now having is I get a flash of unstyled text. Is there some way I can make it wait to show text like it does when using Google fonts?

Thanks

March 25, 2021 at 11:56 pm #1710254

Elvin
Staff
Customer Support

Try adding font-display: swap; to your @font-face CSS.

Or try preloading it.

You may find the information here useful:
https://nooshu.github.io/blog/2021/01/23/the-importance-of-font-face-source-order-when-used-with-preload/
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

[Support request] Locally hosting Open Sans, remove Google Fonts

Popular Articles

Start building better websites today.