How do I change font?

[lightyisreal]

Hello, I really want to change the font so that I can still use this theme, I really like it. What are the steps to change it?

[h-enk]

1. Copy node_modules/@hyas/doks-core/assets/scss/common/_fonts.scss to themes/my-doks-theme/assets/scss/common/_fonts.scss and update the file for your font — put the fonts in the static folder.

2. Copy the relevant variables from node_modules/@hyas/doks-core/assets/scss/common/_variables.scss to themes/my-doks-theme/assets/scss/common/_variables-custom.scss and update the variables for your font:

   // scss-docs-start font-variables
   // stylelint-disable value-keyword-case
   // $font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; (default)
   $font-family-sans-serif:      "Jost", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   // stylelint-enable value-keyword-case
   $font-family-base:            var(--#{$prefix}font-sans-serif);
   $font-family-code:            var(--#{$prefix}font-monospace);

3. Copy node_modules/@hyas/doks-core/layouts/partials/head/resource-hints.html to themes/my-doks-theme/layouts/partials/head/resource-hints.html and update the file for your font.

[lightyisreal]

I've just tried this with a custom font. While the font is preloaded, the website is still using the Jost font. Do I have to do something else after the three steps?

[lightyisreal]

I used the doks folder instead of the my-doks-theme folder because that's what I got for the template and I recently updated to v1.0

[cristianmarint]

Hi @plymc, I encounter the same issue. Did you solved it?

[h-enk]

See https://getdoks.org/docs/guides/customization/

[cristianmarint]

love it, thanks @h-enk !!