Load local custom font

[alexgutjahr]

Load local custom font

[tfsomrat]

here is a simple guideline for you. I am using sampoty font as an example

1. store your fonts in the root static folder, you need to create this folder. store fonts like ./static/sampoty.woff.

then link the font in custom.scss

@font-face {
  font-family: "sampotyregular";
  src:
    url("../sampoty.woff2") format("woff2"),
    url("../sampoty.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

2. If you want to use the custom font as Primary font. then use the font name in themes.json file

"fonts": {
    "font_family": {
      "primary": "sampotyregular",
      "primary_type": "sans-serif",
      "secondary": "Signika:wght@500;700",
      "secondary_type": "sans-serif"
    },
    "font_size": {
      "base": "16",
      "scale": "1.250"
    }
  }

3. customize the google font link in style.html file. (I removed primary_font link from here)

googleFont.href = "https://fonts.googleapis.com/css2?{{with $sf}}family={{. | safeURL}}{{end}}&display=swap";

and you have successfully setup your custom font, along with google font.

[tfsomrat]

Hey @alexgutjahr, thanks for your interest. Custom font needs to link in the CSS file. custom.scss could be a good way to link your fonts.

[alexgutjahr]

Thanks for the swift reply @tfsomrat, appreciate it! Also wanna say that your template is the best I've seen over the years, thanks for building it.

About the custom.scss I can load the font-face in there, how would I then reference the local woff2 file, or more specifically, where do you suggest the files should be stored so they are accessible to the stylesheets? I went with assets/fonts but was not able to reference the files successfully, i.e. when the page is built the fonts are not found.

Secondly, assuming that I can successfully load the font-face, How do I override just the secondary font? I assume theme.toml expects a Google font and will not work with custom fonts, will it? If not, where/how can I override just the secondary font? Thanks!

[alexgutjahr]

Works perfect, thank you!