How to Include Custom Non-Google Font

NFlourish

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: https://ags.stone-env.net/cubano-regular-webfont.ttf

My font-face element is here: https://ags.stone-env.net/cubano.css 

Any ideas?

Screen Shot 2019-10-24 at 13.00.32.png

transparent-rotating-earth.gif

NFlourish

Ok. I figured a few things out:

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

https://enable-cors.org/server_iis7.html 

2) Cleaned up the CSS

cubano.css/* latin */
@font-face {
 font-family: "Cubano";
 font-style: normal;
 src: url("https://ags.stone-env.net/cubano-regular-webfont.ttf") 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.