[leo]

Hi,

Where should I put the font files if I need to self host google fonts, like using google-webfonts-helper?

And, how to specify the font files src in my custom CSS?

Many thanks,

Leo

[candidexmedia]

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

[leo]

Thanks! Actually I hope to know exactly which folder the font files should be put in, and how to refer these files path in my CSS (I mean the src). Thanks again!

[candidexmedia]

Hi @leo:

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.

 

[candidexmedia]

The Publii forum strikes again! The src was deleted, so I pasted my answer here: https://gist.github.com/candidexmedia/fc7d21c470631ddbbffa4bd7fae14d0f

Please consult the gist for the correct code and screenshot.

[leo]

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

[gpsblues]

@candidexmedia thanks so much

[Rohten]

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

[leo]

👍👍👍😀😀😀

[candidexmedia]

Rohten 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!!

[Bregenbitter]

That’s what I need … but in the editor I need the font familie name 🙂

MyWebFont

[Bregenbitter]

Made it over two ways 🙂

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

[Author]

Posts