(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)
Here's a summary of what you'll want to do:
-
Download the
.woff2files for your font. Ideally, it should be a variable font file. -
In your site's theme folder, create a new folder under
site-folder/input/themes/your-theme/assets/dynamic/fontsfor your new font. For example, if your new font is Source Serif 4, createsite-folder/input/themes/your-theme/assets/dynamic/fonts/sourceserif4 -
Paste your
.woff2files in that folder, and rename them as such (keeping with the same example):sourceserif4.woff2andsourceserif4-italic.woff2(if there's a variable italic file) -
In your theme folder, open up the
theme-variables.jsfile. Underlet fontParams = {, add a new entry for your font, then save your changes:- Make sure the backslash in the
familyvalue doesn't get deleted by your code editor's "Format on Save" function (looking at you, Prettier). - The
weightvalue indicates the weight range (for variable fonts). The one above indicates that Source Serif 4 can be used from 200 to 900. Check your font specs to get these numbers. - If you included an italic font file, mark
hasItalicas "true".
- Make sure the backslash in the
'sourceserif4': {
name: 'Source Serif 4',
family: '\'Source Serif 4\', serif',
weight: '200 900',
hasItalic: true
},- Open the config.json file and add the name of your font in two sections:
fontBodyandfontHeadings, then save the changes:
{
"name": "fontBody",
"label": "Body font",
"group": "Fonts",
"value": "system-ui",
"type": "select",
"options": [
{
"label": "Source Serif 4",
"value": "sourceserif4",
"group": "Serif"
},
...
{
"name": "fontHeadings",
"label": "Headings font (H1-H6)",
"group": "Fonts",
"value": "system-ui",
"type": "select",
"options": [
{
"label": "Source Serif 4",
"value": "sourceserif4",
"group": "Serif"
},
...- Reload Publii, and open your Theme Settings to select your font.
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.
Found these tips helpful? Consider supporting my work so that I can keep going. 😊
