Load custom local font

[lugitan]

Hello,

I would like to use a custom font in my nodebb forum. I am using a custom theme and I have placed the .ttf file in theme-folder/public/fonts/font.ttf. I have referenced the font file in my scss file with:

@font-face { 
            font-family: CustomFont; 
            src: url('/fonts/font.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

body {
   font-family: "CustomFont", "Lato", sans-serif !important;
}

My assumption was, that when building the platform, that the font will be used, however i get the error: GET http://localhost:4567/fonts/font.ttf net::ERR_ABORTED 404 (Not Found)

Am I missing something?

[baris]

Hey @lugitan, the following should work. In your plugin.json add a staticDirs entry to your font path in the theme.

"staticDirs": {
	"fonts": "./public/fonts"
}

Then in your scss file you can use the below.

@font-face {
	font-family: CustomFont;
	src: url('./plugins/nodebb-theme-mycustomtheme/fonts/font.ttf');
	font-weight: normal;
	font-style: normal;
}

#elementWithCustomFont {
	font-family: "CustomFont", sans-serif !important;
}

This will result in loading the font from the url /assets/plugins/nodebb-theme-mycustomtheme/fonts/font.ttf

[lugitan]

Yes thank you! That solved my problem.