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

[Elvin]

Try this:

.pros-list li:before {
    content: "";
	background-image: url("https://www.staymeonline.com/wp-content/uploads/2021/12/pros.svg");
	background-position: center center;
	height: 10px;
	width: 10px;
	margin-right: 8px;
}

[Ravi Dixit]

It is still not working, check here https://prnt.sc/237cegl and https://prnt.sc/237cqmj

[Elvin]

Try this one:

.pros-list li:before {
    content: "";
    background-image: url(https://www.staymeonline.com/wp-content/uploads/2021/12/pros.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 15px;
    width: 15px;
    display: inline-block;
    margin-right: 8px;
}

here’s the test – https://share.getcloudapp.com/4guZQ5k7

[Ravi Dixit]

It worked this time, I was using the FontAwesome icon on creating these kinds of lists. I will change all the CSS with this having the same SVG image as an icon. Now there is no need for FontAwesome icons, can I remove the plugin?

[Elvin]

I’m not sure where else are you using font icons from FontAwesome but it should be okay to remove it.

Just do an inspection afterwards of what parts of the site loses its icon so you know what parts to do CSS on. 😀

[Ravi Dixit]

Oh, great!

Can you guide me on how can I do that?

[Elvin]

Can you guide me on how can I do that?

It’s basically a visual inspection of the site. You can browse through the site’s pages and check which parts you think has missing icons.

I can’t determine it for you as this is a matter of your design choice/preference of which part of the content of the site’s pages should get an icon. 😀

[Ravi Dixit]

Okay, that’s great and thanks for your time in this matter.

[Elvin]

No problem. 😀

[Ravi Dixit]

I started using the System fonts but still, my website is loading some other fonts. Check this out: https://prnt.sc/25pnkpe

[Ying]

Do you have any google fonts added to the font manager at customizer > typography?

[Ravi Dixit]

I have checked out in customizer>typography but there is no Google font is added… https://prnt.sc/25q42by

It seems like I have added them through any custom code, if it is true where can I find them?

[Ying]

You are still using the old typography system, can you switch to the new dynamic typography system?
https://docs.generatepress.com/article/dynamic-typography-overview/

[Ravi Dixit]

Oh, I did that! And there is no additional font added in Font manager?

[Ying]

If there’s no font added to the font manager, then the site should be using system fonts.

If your site is still requesting google fonts, try to disable all plugins and custom functions to test.

Let me know 🙂

[Author]

Posts