Skip to content

Instantly share code, notes, and snippets.

@candidexmedia
Last active December 22, 2023 03:33
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save candidexmedia/fc7d21c470631ddbbffa4bd7fae14d0f to your computer and use it in GitHub Desktop.
Save candidexmedia/fc7d21c470631ddbbffa4bd7fae14d0f to your computer and use it in GitHub Desktop.
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)

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.

@LochanLoch
Copy link

LochanLoch commented Dec 13, 2022

Yeah ty will try it out in Publii - I need it only for special paragraphs in a Post file if it work it would be fine :-)

/* Absatz in HTML: <p style="font-family:'**MyWebFont**'">..Text..</p> */
@font-face {
 font-family: '**MyWebFont**';
   font-display:swap;
 src: url('webfont.eot');                                    /* IE9 Compat Modes */
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff2') format('woff2'),                  /* Super Modern Browsers */
      url('webfont.woff') format('woff'),                    /* Pretty Modern Browsers */
      url('webfont.ttf')  format('truetype'),                /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg');          /* Legacy iOS */
   font-weight: normal;
   font-style: normal;
}
/* Absatz in HTML: <p **class**="**abs-MyWebFont**">..Text..</p> */
.**abs-MyWebFont** {
   font-family: 'MyWebFont', 'sans-serif';
   font-size: normal;
}

Will try it :-) above is the CSS File and in the Mark is the HTML Code ;-)
Big fail must use class ;-)

@LochanLoch
Copy link

LochanLoch commented Dec 17, 2022

@RohtenGames write:

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

In my dir I can't find the file fonts.hbs ;-( maybe its too simple.

17.12.2022 - OK found it in /themes/THEMENAME/partials m) sorry my fault.

@Rohten-WBS
Copy link

This guide is from march and I would guess it is a little outdated .
Good that you found it :)
Else I would assume, that the structure of Publii had some minor changes in the meanwhile.

@LochanLoch
Copy link

Minor changes xD fontFamily, font-pair-XY and so on changed, best would now to bring the Fonts in config.json in the List like the fonts in ../assets/dynamic/fonts/YourFont but now I think only woff2 Fonts would be used. The Fonts have now more places where they must stay ...
In config.json two places and theme-variables.js one place ...
for font jetbrainsmono ...
config.json row: 556 and 795
theme-variables.js row: 101

but that was not the way I need my Fonts. Will see if it work what I need :-)

@LochanLoch
Copy link

LochanLoch commented Dec 18, 2022

It work now with my FONTS :-)
in /input/themes/THEME-override/assets/css I put my fontstyle.css
there I made my fonts folder

/* Absatz in HTML	<p class="absWiegelKurrentMedium">..Text..</p> */
@font-face {
 font-family: 'WiegelKurrentMedium';
  font-display:swap;
 src: local('WiegelKurrentMedium'), local('WiegelKurrentMedium-normal'),
      url('fonts/WiegelKurrentMedium.woff2') format('woff2'),
      url('fonts/WiegelKurrentMedium.ttf')  format('truetype');
   font-weight: normal;
   font-style: normal;
}
.absWiegelKurrentMedium {
   font-family: 'WiegelKurrentMedium', 'sans-serif';
   font-size: normal;
}

Funny point is that the style=blaBupp would be deleted all time in Publii and I was a bit tired ... but I noticed my wrong syntax and was happy when I noticed that class="absWiegelKurrentMedium" My Text in Wiegel Kurrent - Than work fine.
I don't need in Publii - Seiteneinstellungen - Erweiterte Optionen - Editoren Page Settings - Advanced Options - Editors: something in the WYSIWYG-Editor Field.
Only under Tools and Plugins - Custom CSS I dropped the lines from fontstyle.css and in Custom HTML Head I added the line:
<link rel="fontstyle" href="fontstyle.css" type="text/css" charset="utf-8"/>
In theme-variables.js are the fonts publii themes bring with.

@candidexmedia
Copy link
Author

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

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