How to change font?

[h-enk]

Discussed in thuliteio/doks#492

^{Originally posted by leoplct October 6, 2021}
I've edited this file to replace Jost to Roboto but it keeps using Jost.
Fonts file are saved here: static/fonts/vendor/Roboto/Roboto-Regular.ttf and I can successfully download it from http://localhost:1313/fonts/vendor/Roboto/Roboto-Regular.ttf

I've run

npm run clean   
npm run server

assets/scss/common/_fonts.scss

/* jost-regular - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Roboto"),
    url("fonts/vendor/Roboto/Roboto-Regular.ttf") format("ttf");
}

/* jost-500 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    local("Roboto"),
    url("fonts/vendor/Roboto/Roboto-Medium.ttf") format("ttf");
}

/* jost-700 - latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Roboto"),
    url("fonts/vendor/Roboto/Roboto-Bold.ttf") format("ttf");
}

/* jost-italic - latin */
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:
    local("Roboto"),
    url("fonts/vendor/Roboto/Roboto-Italic.ttf") format("ttf");
}

/* jost-500italic - latin */
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src:
    local("Roboto"),
    url("fonts/vendor/Roboto/Roboto-MediumItalic.ttf") format("ttf");
}

/* jost-700italic - latin */
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto"), url("fonts/vendor/Roboto/Roboto-BoldItalic.ttf") format("ttf");
}
...
```</div>

[ImaCrea]

Hey,

I managed to change the font on a child version of the theme. Caution: I'm very new with Hugo so it's probably not the best way, but it works :) In this example, our new font-family is Fengardoneue.

1. Drop the folder containing your font in /static/fonts/
2. Copy node_modules/@hyas/doks/assets/scss/common/_variables.scss to assets/scss/common/_variables.scss
3. Rename assets/scss/common/_variables.scss to assets/scss/common/_variablesCustom.scss
4. Copy node_modules/@hyas/doks/assets/scss/app.scss to assets/scss/app.scss
5. In assets/scss/app.scss, replace @import "common/variables"; by @import "common/variablesCustom";
6. Create a custom.scss in assets/scss/common/
7. Insert your font font-face script into custom.scss :

/* fengardoneue - latin */
@font-face {
  font-family: "Fengardoneue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Fengardoneue"),
    url("fonts/Fengardoneue/fengardoneue_regular.woff2") format("woff2"),
    url("fonts/Fengardoneue/fengardoneue_regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* fengardoneue black - latin */
@font-face {
  font-family: "Fengardoneue";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src:
    local("Fengardoneue_black"),
    url("fonts/Fengardoneue/fengardoneue_black.woff2") format("woff2"),
    url("fonts/Fengardoneue/fengardoneue_black.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

5. Finally, in assets/scss/common/_variablesCustom.scss replace $font-family-sans-serif: "Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; by $font-family-sans-serif: "Fengardoneue", "Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; — (I just added it to let Jost as a backup).

Et voilà!

Hope it helps ^^

[dxsup]

I have successfully changed the font following @ImaCrea's instructions. Thank you!

But I encountered a problem as leoplct at the beginning. When editing the file _custom.scss in step 7, I used a tff font, but it kept using the original one. After I changed the tff file to woff/woff2, it worked immediately.

I'm entirely new to web development, so I don't know why. Maybe the problem raised by leoplct is also caused by this because I noticed that the _fonts.scss file provided also uses tff fonts.

[h-enk]

Any reason for using ttf?

Although regular OpenType fonts (TTF and OTF files) can be used as web fonts, such usage is not recommended as it usually contravenes license agreements—and the files are significantly larger.

Source: Web font

I recommend converting ttf to woff2 with a tool like e.g. TTF to WOFF2 Converter

[dxsup]

No special reason, just because the font file I got is ttf, and I have no experience with using fonts.

By the way, I love the design of doks, thanks for your work, and it would be better if there is documentation on how to change the font.

[h-enk]

Thanks + noted