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

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

Home Forums Support How I can start using System Fonts?

Viewing 15 posts - 1 through 15 (of 32 total)
  • Author
    Posts
  • #2047395
    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…

    #2047506
    David
    Staff
    Customer Support

    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 ?

    #2047708
    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";
    }
    #2047965
    David
    Staff
    Customer Support

    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 ?

    #2048031
    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?

    #2048087
    Ying
    Staff
    Customer Support

    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.

    #2048182
    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.

    #2048197
    Elvin
    Staff
    Customer Support

    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().)

    A wise man once said:
    "Have you cleared your cache?"

    #2049526
    Ravi Dixit

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

    #2049568
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #2049575
    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

    #2050396
    Ying
    Staff
    Customer Support

    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.

    #2050415
    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

    #2050459
    Ying
    Staff
    Customer Support

    Can you link us to your site?

    #2050519
    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;*/
    }
Viewing 15 posts - 1 through 15 (of 32 total)
  • You must be logged in to reply to this topic.