Registering a Font

a_5mith

So, I've had a minor idea for a plugin, mainly for my own site, but I'll template it and upload for anyone that wants to fork.

I've made a plugin that loads a custom font not available on Google Fonts.

I've got the various webfonts in the src folder of my plugin, next to the style.less folder where I have

@font-face {
font-family: 'WebFont;
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
     url('WebFont.woff2') format('woff2'),
     url('WebFont.woff') format('woff'),
     url('WebFont.ttf') format('truetype'),
     url('WebFont.svg#WebFont') format('svg');
font-weight: normal;
font-style: normal;
}

The css is rendered in style.css, however when trying to specify the font-family on (for example) the h1, it doesn't work, defaults back to bland old Arial, I'm assuming this is because the route from the style.less isn't right. I've tried ./src/ and without. But neither works.

Plugin.json looks like

"staticDirs": {
    "static": "./src"
},
"less": [
    "src/style.less"
]

Do I need to add the routes to the fonts under this as well? What would I do that as? Fonts? Main?

Cheers guys

julian

In the LESS file, the fonts will have to be written as url('static/WebDont.eot') etc etc...

Give that a shot?

a_5mith

Will give this a go when I wake up, had about 3 hours sleep in the last 2 days. Feeling a bit groggy.

a_5mith

Noo, that didn't work. Still defaults to Arial.

Githubs here if you want to ridicule my code.

mootzville

Maybe this:

Use multiple custom fonts using @font-face?

I'm sure I'm missing something really straight forward. Been using a single custom font with normal font face: @font-face { font-family: CustomFont; src: url('CustomFont.ttf'); } All work...

Stack Overflow (stackoverflow.com)

a_5mith

@mootzville Not sure which answer you were referring to, but you can combine multiple font formats in one font-face. The issue is with getting Nodebb to find the route to the src folder of the plugin. The less is loaded with the font face, but it doesn't find the actual fonts.

snodejoke

@a_5mith Did you ever find the solution to this?

Was the result the nodebb-plugin-custom-font plugin?