Self-Host Google Fonts to Publii

Publii-Google-Fonts-Self-Hosted.md

(Code Snippets for: https://forum.getpublii.com/topic/where-should-the-font-files-be-put-if-self-host-google-fonts/#post-7040)

Update: it is now easier than ever to add custom fonts in Publii. See: How to Add a Custom Font (Publii Docs). You can still use the Google Webfonts Helper to download the woff2 files (or download directly from the Google Fonts, or the Font Foundry)

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://gwfh.mranftl.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 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.

Update: it is now easier than ever to add custom fonts in Publii. See: https://getpublii.com/docs/fonts.html#adding-custom-font