Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Self-Host Google Fonts to Publii

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

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 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.

@candidexmedia
Copy link
Author

candidexmedia commented Mar 9, 2022

image

@RohtenGames
Copy link

RohtenGames commented Mar 14, 2022

An advanced way to implement the custom font into your override theme or custom theme is to add it in the fonts.hbs and config.json

The steps to archive that is relative easy:

  • Create a copy of the config.json and fonts.hbs in your override folder.
  • In the assets/css folder create a new css for your fonts you can name it whatever you want but I recommend something like "fonts.css".
  • Paste the whole css from https://google-webfonts-helper.herokuapp.com/fonts/ into it.

! Important ! for this method you should NOT add your css to the main.css since Publii will add it in the rendering process!

  • Now search in the config.json after "fontFamily".
  • Scroll down to the last label in the "options" list and add a new one. The label field is the display name for the Publii theme settings and the value field should be "font-pair-X" where X is the next number e.g. if the last option was font-pair-18" the next will be "font-pair-19".
	{
            "name": "fontFamily",
            "label": "Font family",
            "group": "Fonts",
            "note": "The 'OS Default Font' option will use the native system fonts of the browser your site visitors are using, providing a boost to speed and performance.<p><strong>Please note:</strong> when using Google Fonts, the IP address of your website visitors will be sent to Google to allow the correct fonts to be downloaded to their browser. The Google Fonts API limits the collection, storage and use of end-user data only to what is needed to deliver the fonts efficiently.</p>",
            "value": "font-pair-0",
            "type": "select",
            "options": [
                {
                    "label": "OS Default Font + OS Default Font",
                    "value": "font-pair-0"
                },
                {
                    "label": "Sura + OS Default Font",
                    "value": "font-pair-1"
                },
                
                .
                .
                .

                {
                    "label": "PT Serif + PT Serif",
                    "value": "font-pair-18"
                },
                {
                    "label": "Syne",
                    "value": "font-pair-19"
                }
            ]
        },

Next open the fonts.hbs and scroll down to the last {{#checkIf}}..{{/checkIf}} pair and add a new one with copy paste of it.

  • Change the number of the "font-pair-X" to the same as in the config.json.
  • Then change the to the destination of your css in which you have your font css
  • In the style part of the root branches you can now (re)define which variables use which font.
  • In the example below I redefine the --body-font variable to Syne and sans-serif as the fallback. All other Theme font variables (like header logo and menu) are defined to use the --body-font variable.
{{#checkIf @config.custom.fontFamily '===' "font-pair-19"}}
<link href="../assets/css/fonts.css" rel="stylesheet">
<style>:root{--body-font:'Syne', sans-serif;--heading-font:var(--body-font);--logo-font:var(--body-font);--menu-font:var(--body-font)}</style>
{{/checkIf}}

save everything and start Publii. Now you can select your custom font in your theme settings.

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

If you don't know what kind of Generic font families you should use as a fallback go to https://fonts.google.com look up your font and copy the generic name from the css there:

Screenshot from 2022-03-14 03-48-14

@candidexmedia
Copy link
Author

candidexmedia commented Apr 15, 2022

@RohtenGames This is fantastic for people creating custom templates. Thank you for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment