[Support request] How I can start using System Fonts?

[Ravi Dixit]

Hello, GeneratePress team!

I looking for a solution to use system fonts instead of Google fonts and others. I heard that it improves loading speed as there is no need for a browser to download the font files and show the users.

What do you say about this? Also, let me if there are any cons of using System font?

Also, I want to get rid of the chain of fonts getting loaded on my site, check here https://prnt.sc/22szz9y . So if I started using the System fonts, can I remove these fonts from my site? If Yes, then how can I do so?

Thanks in advance…

[David]

Hi there,

first a couple of things:

1. Font Awesome cannot be replaced by system font.
2. the generatepress.woff is our the themes icons, you can enable SVG icons in Customizer > General to remove that font loading.

System fonts – yes they will improve loading time over google fonts as they do not make any network requests, do not have to load any fonts or CSS. BUT… you don’t have control over which ones are displayed as each device/browser has its own system font.

Choosing system fonts depends on what version of GP you’re using – if you updated to 3.1 did you enable the New Typography option in Customizer > General ?

[Ravi Dixit]

Hello, David!

I did not understand your first point:

1. Font Awesome cannot be replaced by system font.

I was not using FontAwesome earlier, I just installed the plugin to add some icons to the list. I want to get rid of permanently is there any solution?

I did not find the Customizer>General to enable the SVG icons.

Also, what this code does?

body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

[David]

I don’t really understand either lol – in your screenshot you listed the fonts you’re loading and one of them is Font Awesome. There is no system alternative to them so you either use Font Awesome or DO NOT have Font Awesome icons.

What version of GeneratePress are you using ?

[Ravi Dixit]

Oh, I am ready to remove the FontAwesome icons, there anything else I can use to keep using those fonts? Because FontAwesome takes too long to load and it impacts the loading speed a lot.

I am using the GeneratePress version 3.1.0. And what’s that code do?

[Ying]

there anything else I can use to keep using those fonts

Do you mean FontAwesome fonts? If so, you’ll have to use FontAwesome plugins.

The code presents the font family using on the site, looks like it’s using system stack at customizer > typography > body, means you haven’t chosen any fonts for body.

[Ravi Dixit]

I have made my mind shift to System fonts from Google fonts. But I also want to remove the FontAwesome icons placed on my site. I only use it in

to customize my lists.

Is there any way to get rid of font-awesome and still use the icons? I have seen on some sites using CSS for

list like this:

background: url(/wp-content/uploads/2021/12/pros.svg) no-repeat left top; (it is a thumb up svg icon)
    background-position: 0 12px;
    background-size: 17px 16px;
    padding-left: 28px;
    margin-bottom: 12px;

I have custom

like this:

.icon-list li{
         list-style: none;
	       margin-bottom: 15px;
}

.icon-list li:before{
    content: "\f0a4";
    font-family: FontAwesome;
	margin-right: 8px;
	  color: green;
}

Please provide a solution.

[Elvin]

Hi there,

You’ll have to find an .svg file equivalent to the \f0a4 of FontAwesome and replace the css properties of .icon-list li:before.

You change content: "\f0a4"; and font-family: FontAwesome; to background: url(/the-url-path-to-new-icon.svg) no-repeat left top;
(upload the SVG file on your site and get its URL for the background property url().)

[Ravi Dixit]

I have tried doing the exact same but CSS did not work.

[Elvin]

Did you have the necessary svg file for the url() property?

It won’t work if you copy and paste it as is. It’s crucial for it to work.

[Ravi Dixit]

Yes, I have uploaded the SVG icon files first then added the URL in the background. but it is not working… Check this out https://prnt.sc/23341of

[Ying]

Your CSS format is not correct, try to follow the format like this: background: left top no-repeat url("the full link of SVG file");

And you need to define the pseudo element’s height and width in the CSS.

[Ravi Dixit]

It is still not working, even I tried to give height and weight. Check it https://prnt.sc/235w187

I have also tried with full link(including domain). but not working

[Ying]

Can you link us to your site?

[Ravi Dixit]

Okay, here is the site link https://www.staymeonline.com/speechelo-review/

Please look into this as it is on a live site.

Here is the code applied…

.pros-list li:before {
	background: left top no-repeat url("https://www.staymeonline.com/wp-content/uploads/2021/12/pros.svg");
	background-position: 0 12px;
    background-size: 17px 16px;
    padding-left: 28px;
    margin-bottom: 12px;
	/*content: "\f164";
    font-family: FontAwesome;
	  margin-right: 8px;
	  color: green;*/
}

[Author]

Posts