Announcement

Collapse
No announcement yet.

Questions about the fonts

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Questions about the fonts

    An SEO team working with the store owner has asked a couple of interesting questions regarding the font usage with Colossus.

    The first question - Is there a reason why there are 5 backup fonts? They referenced this:
    ​​​​​​
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    The second question / comment - The browser is giving the warning "The resource https://fonts.googleapis.com/css?fam...splay=optional was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.”

    Is it being "preloaded for nothing"? They are wanting to "remove some extraneous requests".

    I'm not sure how to respond to these concerns.
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Hi Leslie,

    The depth of the font stack should not have any impact on SEO as far as I know. They are just that, fallbacks in case the indicated font doesn't load...go on and try the next one. We use a system stack so one of the fallbacks should be there based on the OS.

    In a default Colossus installation, we are using preconnect not preload. If this site is set up for preload, then this resource might help: https://www.debugbear.com/blog/rel-preload-problems
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #3
      Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      The depth of the font stack should not have any impact on SEO as far as I know. They are just that, fallbacks in case the indicated font doesn't load...go on and try the next one. We use a system stack so one of the fallbacks should be there based on the OS.

      In a default Colossus installation, we are using preconnect not preload. If this site is set up for preload, then this resource might help: https://www.debugbear.com/blog/rel-preload-problems
      Maybe they meant this?

      Code:
      <link href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts">
      I copied it directly from the demo.
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        Hi Leslie,

        Edit that link in the admin to include rel=preconnect and crossorigin with no value. Your output should then look like this:
        Code:
        <link rel="preconnect" crossorigin="" href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts">
        Matt Zimmermann
        Front-End Development Director / Miva, Inc.

        Comment


          #5
          Originally posted by Matt Zimmermann View Post
          Hi Leslie,

          Edit that link in the admin to include rel=preconnect and crossorigin with no value. Your output should then look like this:
          Code:
          <link rel="preconnect" crossorigin="" href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts">
          Will do. Is that going to be one of the changes in Colossus 2.0?

          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Hi Leslie,

            Yes. It was done in Shadows as well.
            Matt Zimmermann
            Front-End Development Director / Miva, Inc.

            Comment


              #7
              Originally posted by Matt Zimmermann View Post
              Hi Leslie,

              Edit that link in the admin to include rel=preconnect and crossorigin with no value. Your output should then look like this:
              Code:
              <link rel="preconnect" crossorigin="" href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts">
              Okay, color me stupid. What do I click on in CSS/JavaScript Resources? I can't seem to find what will let me edit that. When I click on Tag Attributes for Resource: preconnect-google-fonts there is nothing there. Or, duh, is that where I add it?

              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


                #8
                Hey Leslie,

                Correct, Colossus doesn't ship with any attribute for this item; you will need to add them.
                Matt Zimmermann
                Front-End Development Director / Miva, Inc.

                Comment


                  #9
                  Another font / CSS question. https://web.dev/font-display/ recommends this:

                  Code:
                  @font-face { font-family: 'Pacifico';
                  font-style: normal;
                  font-weight: 400;
                  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
                  font-display: swap; }
                  with that I've tweaked this but I do not know what the "local" needs to be:

                  Code:
                  @font-face {
                  font-family: 'ReadyTheme Icons';
                  font-style: normal;
                  font-weight: normal;
                  /*font-display: fallback;*/
                  font-display: swap;
                  src: url('themes/colossus/ui/css/ReadyThemeIcons.woff') format('woff');
                  }
                  Leslie Kirk
                  Miva Certified Developer
                  Miva Merchant Specialist since 1997
                  Previously of Webs Your Way
                  (aka Leslie Nord leslienord)

                  Email me: [email protected]
                  www.lesliekirk.com

                  Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                  Comment


                    #10
                    Hi Leslie,

                    Since you are dealing with a custom icon font, there really wouldn't be a "local" resource you could reference. According to the MDN: [ https://developer.mozilla.org/en-US/...CSS/@font-face ]
                    If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.

                    By allowing authors to provide their own fonts, @font-face makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an Internet connection.

                    It's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.
                    Matt Zimmermann
                    Front-End Development Director / Miva, Inc.

                    Comment


                      #11
                      Originally posted by Matt Zimmermann View Post
                      Hi Leslie,

                      Since you are dealing with a custom icon font, there really wouldn't be a "local" resource you could reference. According to the MDN: [ https://developer.mozilla.org/en-US/...CSS/@font-face ]
                      Okay thanks for the reference. Sorry, I've been trying to reply back to SEO folks wanting this done.
                      Leslie Kirk
                      Miva Certified Developer
                      Miva Merchant Specialist since 1997
                      Previously of Webs Your Way
                      (aka Leslie Nord leslienord)

                      Email me: [email protected]
                      www.lesliekirk.com

                      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                      Comment


                        #12
                        Originally posted by lesliekirk View Post
                        An SEO team working with the store owner has asked a couple of interesting questions regarding the font usage with Colossus.

                        The second question / comment - The browser is giving the warning "The resource https://fonts.googleapis.com/css?fam...splay=optional was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.”

                        Is it being "preloaded for nothing"? They are wanting to "remove some extraneous requests".
                        I need to circle back on this because the SEO team that is working with this particular store is still concerned with this "Poppins" and "Roboto" font issue
                        "all the different fonts that get loaded are causing render blocking issues"

                        I did make the recommend tweak

                        Code:
                        <link rel="preconnect" crossorigin href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts" /><link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700|Roboto:400i&amp ;display=optional" data-resource-group="css_list" data-resource-code="google-fonts" />

                        Should I try using "prefetch?

                        Leslie Kirk
                        Miva Certified Developer
                        Miva Merchant Specialist since 1997
                        Previously of Webs Your Way
                        (aka Leslie Nord leslienord)

                        Email me: [email protected]
                        www.lesliekirk.com

                        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                        Comment

                        Working...
                        X