How to Include Custom Non-Google Font

NFlourish — Thu, 24 Oct 2019 17:01:07 GMT

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?

Re: How to Include Custom Non-Google Font

NFlourish — Sun, 12 Dec 2021 03:35:36 GMT

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;
}

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.

topic Re: How to Include Custom Non-Google Font in ArcGIS Hub Questions

How to Include Custom Non-Google Font

Re: How to Include Custom Non-Google Font