Importing Custom Fonts

The_StarLord · 2026-06-25T15:51:41.557+00:00

I am hosting a font I need for a project on my github as a public page. When I navigate to the URL, the font is downloaded so I would think this is accessible to import through a script or something, but I can't figure out how to get it to appear in Nordcraft when referencing it.Anyone tried this setup or can point me in the right direction for importing custom fonts?

The_StarLord
15 days ago
I am hosting a font I need for a project on my github as a public page. When I navigate to the URL, the font is downloaded so I would think this is accessible to import through a script or something, but I can't figure out how to get it to appear in Nordcraft when referencing it.

Anyone tried this setup or can point me in the right direction for importing custom fonts?
Bobby Randhawa
15 days ago
As far as I'm aware, Nordcraft does not let you import a font and then have it selectable in the native font dropdown list. What you can do though (and I've used this successfully) is use a @font-face css rule (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face) and then you can reference that font with whatever name you use in the rule by manually entering it in the font field.
@Bobby Randhawa
As far as I'm aware, Nordcraft does not let you import a font and then have it selectable in the native font dropdown list. What you can do though (and I've used this successfully) is use a @font-face css rule (https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face) and then you can reference that font with whatever name you use in the rule by manually entering it in the font field.
The_StarLord
15 days ago
I think I have tried this method and couldn't figure it out.

Where are you throwing the css rule? On the element itself, in the head.. somewhere else?
Also if you have a link to a font I can test with, happy to take that link as well.

Either way I continue to try and figure it out
Bobby Randhawa
15 days ago
In my case I used Fontsource (https://fontsource.org). I load the font via CDN method (https://fontsource.org/docs/getting-started/cdn) and then followed their instructions to create the @font-face rule (https://fontsource.org/docs/getting-started/display). The rule itself I placed in a <style> element under the Page settings panel so it loads in the head.
@Bobby Randhawa
In my case I used Fontsource (https://fontsource.org). I load the font via CDN method (https://fontsource.org/docs/getting-started/cdn) and then followed their instructions to create the @font-face rule (https://fontsource.org/docs/getting-started/display). The rule itself I placed in a <style> element under the Page settings panel so it loads in the head.
The_StarLord
14 days ago
Fontsource is interesting, but most of the fonts I am seeing there are actually available within Nordcraft already as they are Google fonts, which is defeating the point a little in my case.
The_StarLord
14 days ago
I am also running into a CORS error (not unexpected) when attempting to pull in the fonts.

This is unforunately for my project extremely important as they have a highly custom expensive font they want to use.
Erik Beuschau
14 days ago
If you want to avoid CORS errors, you could proxy the font request using a Nordcraft proxy? https://docs.nordcraft.com/pages/proxies
The_StarLord
14 days ago
I figured it out!

So I stumbled (with the held of Gemini) onto https://www.jsdelivr.com/?docs=gh this allows me to self-host the file through a public github repo and then pull it in to the head with that font face trick.

Its not optimal as I am technically sharing paid fonts, however I need this by monday and then can figure it out more...
Here you can see the import using the style in the head
The_StarLord
14 days ago
Then to use it I need to set a CSS variable manually to the name of the font I set in the import, in this case "ABCcamera", and then use that CSS variable in the font input (as I wasn't able to directly type it in)
hope this helps someone else
@Erik Beuschau
If you want to avoid CORS errors, you could proxy the font request using a Nordcraft proxy? https://docs.nordcraft.com/pages/proxies
The_StarLord
14 days ago
Will look into that if I get the other project requirements done this weekend! Thanks for the input
🙌1
Bobby Randhawa
14 days ago
Should still be able load your font in a similar fashion though if you are self hosting. For my case I need to access additional weights and properties of the font that Nordcraft’s implementation doesn’t currently allow. Otherwise you’re right, Nordcraft loads the same fonts from Google.

Importing Custom Fonts

The_StarLord

Bobby Randhawa

The_StarLord

Bobby Randhawa

The_StarLord

The_StarLord

Erik Beuschau

The_StarLord

The_StarLord

The_StarLord

Bobby Randhawa