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

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

Hi [anonymous]

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.

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

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

[anonymous] wrote:

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

This is fantastic, thank you!!

Made it over two ways 🙂

The main target was for me to switch the font for an paragraph like the PDF SchriftenPublii