Announcement

Collapse
No announcement yet.

How to host google fonts locally

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

  • How to host google fonts locally

    To speed up page load time, I've learned that it would be great to host google fonts locally on the same server where your site is hosted. I'm using Genesis/Dynamik and I love the super easy way to incorporate google fonts and I've been using that. However, this site gives some great ideas on how to host google fonts locally: https://wpglorify.com/host-google-fo...levrage-cache/ I'm not so good with custom css so I'm asking if anyone might suggest WHERE I would add the code and if there is any alterations that we would need to do to the code or any other adjustments to make this work in Dynamik. Thank you.
    Learn how you can host Google fonts locally and get rid of page speed insight warning to boost your page speed and user experience.

  • #2
    Have a look here -

    https://sridharkatakam.com/video-how...-in-wordpress/

    Comment


    • #3
      Thank you adytc! That is great info. I have a few more questions if you can or if anyone else knows the answers:
      1) WHERE do you actually post the CSS code? in the styles.php file or directly within Dynamik? And if it goes in the styles.php, do you have to keep updating it every time there is a Dynamik or Genesis update?
      2) Do you need to undo any of the font selection settings from within Dynamik to make it work or would this just override it? Thank you!

      Comment


      • #4
        The CSS must go into > Dynamik > Custom Options >> CUSTOM CSS

        For the fonts themselves , you must create the new folder and then add that folder to the 'Protected' section in >> Dynamik - Theme Settings


        Create the fonts folder in the dynamik theme dir - \wp-content\themes\dynamik-gen\

        fonts-dir.jpg



















        Add this folder as protected here -

        fonts-local.jpg



        Read the article below -

        http://dynamikdocs.cobaltapps.com/ar...k-auto-updates

        Note this bit

        Please Note: If you ever edit/add files/folders inside one of your Protected Folders then you'll need to click the "Save Changes" button in your Dynamik Settings admin page to update your Protected Folders backup folder accordingly. Otherwise, upon auto-update, your previously saved/backed up folder will be restored, leaving out your new changes to that folder's contents.




        You can then specify the font family where you need them in >> Dynamik - Design Options >> #Custom as shown below -

        custom-css.jpg



        You can also specify the font family for an element in custom-css if you need to , but you might need to add !important

        If you followed that , it will now be update safe

        Comment


        • #5
          The code for the fonts in custom css should look as below - example for Montserrat font , add all the types the same way


          Code:
          /* montserrat-regular - latin */
          @font-face {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            src: url('../fonts/montserrat-v10-latin-regular.eot'); /* IE9 Compat Modes */
            src: local('Montserrat Regular'), local('Montserrat-Regular'),
                 url('../fonts/montserrat-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('../fonts/montserrat-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
                 url('../fonts/montserrat-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
                 url('../fonts/montserrat-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
                 url('../fonts/montserrat-v10-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
          }
          Specify it in #custom like -

          Code:
          font-family:'Montserrat Regular' , sans-serif;
          Also , the check the last comment on Sridhrars tutorial - check this link to generate everything you need instead of using Fontsquirrel

          http://google-webfonts-helper.herokuapp.com/fonts

          Comment


          • #6
            andytc: This is really fantastic and just what I need. Thank you for your time and your knowledge. I notice this call in the source code of my site:
            <link rel='dns-prefetch' href='//fonts.googleapis.com' /> Wouldn't that line of code prevail even if I implemented all your suggestions and wouldn't that still slow down the site? It seems that this is auto-coded into dynamik when you choose a google font via Dynamik. No?

            Comment


            • #7
              You can take a look through this thread and see if this is what you need and relevant to you -

              https://wordpress.org/support/topic/...prefetch-code/

              Any code you want to try posted in that thread would go into custom-functions with affect admin checked.

              Pay attention to the first line -

              Code:
              <?php
              /* Do not remove this line. Add your functions below. */
              
              /* remove_dns_prefetch */
              function remove_dns_prefetch( $hints, $relation_type ) {
                  if ( 'dns-prefetch' === $relation_type ) {
                      return array_diff( wp_dependencies_unique_hosts(), $hints );
                  }
              
                  return $hints;
              }
              
              add_filter( 'wp_resource_hints', 'remove_dns_prefetch', 10, 2 );
              Remove any unwanted fonts from >> Dynamik - Design Options > Body >> Google Font Control

              Comment


              • #8
                Pretty cool that you know about this. wow. thank you.

                Comment

                Working...
                X