Sign in

Where should the font files be put if self host google fonts

  • This topic has 9 replies, 4 voices, and was last updated 7 months, 2 weeks ago by .
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #7028
    Avatar photoleo

    Hi,

    Where should I put the font files if I need to self host google fonts, like using google-webfonts-helper?

    And, how to specify the font files src in my custom CSS?

    Many thanks,

    Leo

    #7034
    Avatar photocandidexmedia

    I found this article on how to self-host Google Fonts last year:

    https://webdesign.tutsplus.com/tutorials/how-to-self-host-google-fonts–cms-34775

    It was very helpful, and this is what I do for my own site because I want a certain look. There’s even a link to a resource that generates the CSS code for you.

    Follow those instructions carefully, and let me know if you have any follow-up questions.

    To make upgrading easier, make sure to create a themes override folder. Check out the documentation article on overrides: https://getpublii.com/dev/theme-overrides/#theme-overrides

    #7036
    Avatar photoleo

    Thanks! Actually I hope to know exactly which folder the font files should be put in, and how to refer these files path in my CSS (I mean the src). Thanks again!

    #7039
    Avatar photocandidexmedia

    Hi @leo:

    In terms of where to put the fonts: that’s up to you. I’ve shared what I’ve done for my sites below.

    In terms of referring: I would just use the Google Webfonts Helper to go faster: https://google-webfonts-helper.herokuapp.com/fonts. Just indicate which fonts you want, which weights, charset, where the files are located, etc. and it will format the code that you need to add at the top of your <code class=”EnlighterJSRAW” data-enlighter-language=”generic”>main.css file. This code will include the src.

     

    Personally, what I’ve done is the following (I’m using the Documentation theme):

    I created my theme override folders:

    [SITE-NAME] > input > themes > documentation-override > assets > css

     

    I added a folder in css called fonts where I added all the font files downloaded from Google Webfonts Helper:

    [SITE-NAME] > input > themes > documentation-override > assets > css> fonts

     

    In the css folder, I copied and pasted the main.css file. In the main.css file, I pasted the Google Webfonts Helper code at the top. Here is an example of how this would look like for Syne, weight 400:

    /* syne-regular - latin-ext_latin */
    @font-face {
      font-family: "Syne";
      font-style: normal;
      font-weight: 400;
      src: url("fonts/syne-v3-latin-ext_latin-regular.eot");
      /* IE9 Compat Modes */
      src: local(""),
        url("fonts/syne-v3-latin-ext_latin-regular.eot?#iefix")
          format("embedded-opentype"),
        /* IE6-IE8 */ url("fonts/syne-v3-latin-ext_latin-regular.woff2")
          format("woff2"),
        /* Super Modern Browsers */
          url("fonts/syne-v3-latin-ext_latin-regular.woff") format("woff"),
        /* Modern Browsers */ url("fonts/syne-v3-latin-ext_latin-regular.ttf")
          format("truetype"),
        /* Safari, Android, iOS */
          url("fonts/syne-v3-latin-ext_latin-regular.svg#Syne") format("svg");
      /* Legacy iOS */
    }

    In the Google Webfonts Helper, I made sure to type “fonts/” in the “Customize folder prefix (optional)” field.

     

    I also have another website where I put all the font files directly in the css folder. In that case, the CSS code was formatted as such (for space grotesk weight 300):

    /* space-grotesk-300 - latin-ext_latin */
    @font-face {
      font-family: "Space Grotesk";
      font-style: normal;
      font-weight: 300;
      src: url("space-grotesk-v6-latin-ext_latin-300.eot");
      /* IE9 Compat Modes */
      src: local(""),
        url("space-grotesk-v6-latin-ext_latin-300.eot?#iefix")
          format("embedded-opentype"),
        /* IE6-IE8 */ url("space-grotesk-v6-latin-ext_latin-300.woff2")
          format("woff2"),
        /* Super Modern Browsers */ url("space-grotesk-v6-latin-ext_latin-300.woff")
          format("woff"),
        /* Modern Browsers */ url("space-grotesk-v6-latin-ext_latin-300.ttf")
          format("truetype"),
        /* Safari, Android, iOS */
          url("space-grotesk-v6-latin-ext_latin-300.svg#SpaceGrotesk") format("svg");
      /* Legacy iOS */
    }

    In the Google Webfonts Helper, I left the “Customize folder prefix (optional)” field blank.

     

    #7040
    Avatar photocandidexmedia

    The Publii forum strikes again! The src was deleted, so I pasted my answer here: https://gist.github.com/candidexmedia/fc7d21c470631ddbbffa4bd7fae14d0f

    Please consult the gist for the correct code and screenshot.

    #7043
    Avatar photoleo

    Brilliant! That’s very detailed and helpful! Appreciate it! 😀

    #7056
    Avatar photogpsblues

    @candidexmedia thanks so much

    #7057
    Avatar photoRohten

    I added a tutorial to the gist how you can add the local/custom fonts to the theme settings in Publii 🙂

    Screenshot-from-2022-03-14-03-46-32

    #7060
    Avatar photoleo

    👍👍👍😀😀😀

    #7277
    Avatar photocandidexmedia

    I added a tutorial to the gist how you can add the local/custom fonts to the theme settings in Publii 🙂

    Screenshot-from-2022-03-14-03-46-32

    This is fantastic, thank you!!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.