How to add a local custom font?

[ngoohebi]

The doc here https://www.docsy.dev/docs/adding-content/lookandfeel/#fonts only shows how to add a web font.
Is there a proper way to add local custom font?

Already put the font files at /static/fonts and try several approach for Hugo, but no luck.

[fekete-robert]

That should work. See https://discourse.gohugo.io/t/how-to-use-local-custom-font/40064

[ngoohebi]

That should work. See https://discourse.gohugo.io/t/how-to-use-local-custom-font/40064

Thanks! Is that the suggested approach to modify css here static/css/style.css for Docsy?

I read the docs here: https://www.docsy.dev/docs/adding-content/lookandfeel/#project-style-files
[_styles_project.scss](https://github.com/google/docsy/blob/main/assets/scss/_styles_project.scss) is where you can add your own custom SCSS styles, including overriding any of the styles in Docsy’s theme SCSS files.

Should I put it here?

[fekete-robert]

Hi, Put the font under /static/fonts, and reference it from /assets/scss/_styles_project.scss (as /fonts/..., so omit /static from the reference).

[ngoohebi]

Hello, how can I add the static font with the method written in the docs here?
https://www.docsy.dev/docs/adding-content/lookandfeel/#fonts

The things need to override is from here:
https://github.com/google/docsy/blob/main/assets/scss/_variables.scss

[ngoohebi]

Ok, I did it. But I'm not sure it follows how Docsy does.

In the file assets/scss/_variables_project.scss, add:

@font-face {
    font-family: 'MyLocalCustomFont';
    font-weight: 400;
    font-display: swap;
    src: local('Taibun'),
        url('/fonts/my-local-custom-font.woff2') format('woff2'),
        url('/fonts/my-local-custom-font.woff') format('woff');
}

$font-family-base: 'MyLocalCustomFont';

And how can I use my font and join those original ones?