Font customization in v4

[lrgabriel]

Hello!

I would like to use a custom font (Atkinson Hyperlegible Next) and I was hoping to ask for help figuring out how.

I've tried to follow the advice in the README.md, but it's pretty sparse and the link in that section is broken. I set contentFont = "Atkinson Hyperlegible Next" in my hugo.toml, but the font isn't listed as an option in <site_root>\themes\bilberry-hugo-theme\v4\assets\sass\_fontface.scss which is why I suppose that didn't work.

I have the woff2 files for the font, and imagine I need to add them in <site root>\static\fonts and reference them somehow, but that's where I'm stuck.

Thank you for your time!

[lrgabriel]

Ok, I've managed to change the site font, but now I'm stuck again--how do I change font size?

For the custom font situation:

1. I placed my font files in <site_root>\static\fonts
2. I created the file <site_root>\static\customfonts.css:

@font-face {
    font-family: 'Atkinson';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson';
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson';
    font-style: italic;
    font-weight: 700;
    src: url('/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
    font-display: swap;
}

3. I set contentFont = "Atkinson" in hugo.toml.

[igor-baiborodine]

@lrgabriel, thanks for the input. I will update the README accordingly.

[lrgabriel]

I forgot a step:

4. I added my customfonts.css to the css_modules param in hugo.toml:

[params]
  css_modules = ["customfonts.css"]

I've submitted a pull request (#692) updating the README. Also, I've standardized everything in this discussion by editing my comments so customfonts.css is everywhere instead of customfont.css.

[igor-baiborodine]

@lrgabriel, the font size is hard-coded in v4/assets/sass/_bilberry-hugo-theme.scss, i.e., currently it's not configurable:

Either you submit a pull request with a quick fix by adding a new variable named content-font-size in v4/assets/sass/theme.scss:

or you fork the theme and change the size with the value you need in the _bilberry-hugo-theme.scss.

[lrgabriel]

I submitted pull request #689 adding the variable. Thank you so much for the help--I really appreciate it!

[igor-baiborodine]

Merged and released in v4.12.0.