# Custom local fonts

**URL:** <https://forum.ghost.org/t/custom-local-fonts/41556>\
**Category:** Developer help\
**Created:** [September 29, 2023, 1:20pm UTC](https://forum.ghost.org/t/custom-local-fonts/41556 "2023-09-29T13:20:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lejeczek](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lejeczek/32/18989_2.png) [@lejeczek](https://forum.ghost.org/u/lejeczek)\
**Post date:** [September 29, 2023, 1:20pm UTC](https://forum.ghost.org/t/custom-local-fonts/41556/1 "2023-09-29T13:20:09Z")

</div>

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

```auto
	@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.

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [September 29, 2023, 1:46pm UTC](https://forum.ghost.org/t/custom-local-fonts/41556/2 "2023-09-29T13:46:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lejeczek](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lejeczek/32/18989_2.png) [@lejeczek](https://forum.ghost.org/u/lejeczek)\
**Post date:** [September 29, 2023, 1:58pm UTC](https://forum.ghost.org/t/custom-local-fonts/41556/3 "2023-09-29T13:58:20Z")

</div>

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

```auto
- 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?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [September 29, 2023, 2:46pm UTC](https://forum.ghost.org/t/custom-local-fonts/41556/4 "2023-09-29T14:46:56Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![lejeczek](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lejeczek/32/18989_2.png) [@lejeczek](https://forum.ghost.org/u/lejeczek)\
**Post date:** [September 29, 2023, 3:02pm UTC](https://forum.ghost.org/t/custom-local-fonts/41556/5 "2023-09-29T15:02:35Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![lejeczek](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lejeczek/32/18989_2.png) [@lejeczek](https://forum.ghost.org/u/lejeczek)\
**Post date:** [September 29, 2023, 3:19pm UTC](https://forum.ghost.org/t/custom-local-fonts/41556/6 "2023-09-29T15:19:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Cathy\_Sarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/cathy_sarisky/32/25750_2.png) [@Cathy\_Sarisky](https://forum.ghost.org/u/Cathy_Sarisky)\
**Post date:** [September 29, 2023, 3:40pm UTC](https://forum.ghost.org/t/custom-local-fonts/41556/7 "2023-09-29T15:40:23Z")

</div>

> [@Cathy\_Sarisky](#):
>
> 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.)

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

---

<div class="post-metadata">

**Author:** ![lejeczek](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/lejeczek/32/18989_2.png) [@lejeczek](https://forum.ghost.org/u/lejeczek)\
**Post date:** [September 30, 2023, 10:17am UTC](https://forum.ghost.org/t/custom-local-fonts/41556/8 "2023-09-30T10:17:03Z")

</div>

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.