How to Include Custom Non-Google Font

10-24-2019 10:01 AM
Occasional Contributor

I want to include a custom font. It is free for personal use and my use is personal. However it is not a Google font and not by-default hosted online.

I have the TTF file.

I have placed this on my web server and can access it.

I also created a custom CSS file that contains a font-face element referencing my custom font.

But I cannot seem to enter any URL to that TTF file, or the CSS with the font-face element in it in the Hub font selector that works correctly.

My font is here:

My font-face element is here: 

Any ideas?

Tags (2)
1 Reply
Occasional Contributor

Ok. I figured a few things out:

1) CORS was blocking access to my CSS url. Stupid CORS... 

2) Cleaned up the CSS

/* latin */ @font-face { font-family: "Cubano"; font-style: normal; src: url("") format("truetype"); font-weight: 400; }

3) For some reason the URL that you enter into the custom font URL box needs to include the "?family=Cubano" (or whatever family) at the end. 


0 Kudos