How to add custom fonts and not depend on google

support
1

For a start i would like to change only header font and blog description.
i already have ttf, woff, woff2 files.
And suspect that code should be smth like this:

@font-face {
    font-family: 'amiga_topaz_unicode_rusRg';
	src: url('\static\fonts\amiga-webfont.woff2') format('woff2'),
	       url('\static\fonts\amiga-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

Tried to put it theme assest\css\style.css
No use…

my hugo theme:

2

Have you tried forward slash (‘/’)? I suspect that in the CSS you need that, not backslash, even on Windows. (But I am making a guess here, others might know better).

3

I guess (not tested) you have to remove the static part in your code.
Hugo makes your fonts available in /font folder.

4 Likes
4

Would have a similar issue as @divinerites pointed out, except you’d need to remove assets and assets is only used with resources (see Hugo Pipes Introduction | Hugo (gohugo.io))

The Hugo documentation about paths might also help.

1 Like
5

Put your CSS in the static/css directory. Put your fonts in the static/fonts directory. Refer to the font as …/fonts/fontname.woff.

1 Like
6

Thank you to all of you, i will try it in a while and report back.
Too much load on work these days.

7

This has an elegant solution for self hosted fonts: GitHub - theNewDynamic/hugo-module-tnd-styles

3 Likes
8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.