Custom local fonts

Developer help
1

Hi guys.
I’ve been browsing the forum for custom local fonts and I ended up with:

	@font-face {
  		font-family: Cascadia
		src: local(Cascadia),
      	src: url('assets/fonts/Cascadia.otf');
	}
    
	.gh-content {
        align-items: flex-start;
        //font-family: 'Open Sans';
    	font-family: Cascadia !important;
    	font-size: 13px;
    	font-weight: normal;
		font-style: normal;
	}

That seems to work but it fails to show/display in Vivaldi & Chromium, on Fedora, other browsers show it a ok.
Interestingly, I use that same font outside of Ghost and there it loads fine everywhere, including two above browsers.
On a remote Ubuntu box none of the browsers renders that css.
I must be getting something trivial – being a complete webdev-knob – wrong. What is it?
Many! thanks.

2

You need a / before assets in the url to make sure it loads regardless of what page the user is on.

3

Thanks, nope, I had fiddled with those. The issue is partially solved by

- src: url('assets/fonts/Cascadia.otf');
+ url('assets/fonts/Cascadia.otf');

But remote Ubuntu still !? fails to show these fonts.
I’ve only started looking at whole Ghost/html thing.
I presume this like fonts, but anything what code injection use, must/should be uploaded manually into – in my case – themes/journal/assets/fonts/ - right?

4

Can you check dev tools on your browser? Does it try to get the font and fail, or not try?

You can put font files into your theme as you describe, yes. You could also make a draft post, drop the file there, then grab the url of the file. (That can be convenient for images especially.)

5

For those who are like me on distros with SELinux – when I copy new asset-files into Ghost’s container mapped volume’s tree, only after, upon container restart I saw that those new files errored out with “permissions denied” so I had to se-relabel.
Otherwise, the tips given were helpful, thanks!

1 Like
6

But still I have that one question - is there a way to add files/assets via webui or any other “via Ghost” way, as oppose to manual container/volume data changes directly?

7

Answer above! There’s not an upload interface but treating it like post content works!

8

There should be – in case @devel read here, perhaps future enhancements – that would solve a few issues such as, when Ghost runs off containers, filesystem permission/selinux labels. I am not a webdev bu I see other solutions have such mechanism(s) for adding assets to the system, globally. Thanks.