Add custom fonts to a Story Map

CoryBoschman

Hello,

I'm looking to add two specific fonts to be used in a journal story map that will be hosted on ArcGIS online. I'd like to add one font for the section tittle and one for the section content.

It may be over my head, but does any one know if there are any resources online that could help me to do this?

I've attached the fonts to give an idea of what I have to work with. bebas for the section title, and lato for the section content.

Thanks,

Cory

bebas (1).zip

Lato.zip

deelesh_1-1746125690790.png

deelesh_0-1746125603380.png

StephenSylvia

At this time the story maps apps do not allow you use custom fonts in the version that is hosted on ArcGIS Online. We provide the source code for our apps that you can customize with your own fonts but you will need a basic web server to host app once you make the changes.

The easiest way to add custom fonts with with a solution like Google Fonts where they take care of font hosting, conversions, and base CSS. All you need to do is add a single link to their CSS file and write a couple lines of CSS to match the font families with the text elements in the Map Journal. Here's a blog post that explains more: https://medium.com/@ssylviageo/jazz-up-your-story-maps-with-google-fonts-65f4cefb38f8#.wudjqz1w9/.

If can't find font's to use on Google Font's or a similar service, you'll need to host the font files and write the CSS so that the fonts are loaded by the app. Because of varying browser support, you need a couple different file formats of the same fonts. The fonts that you shared are not in the correct format to support websites. There are some online converters but you need to make sure you have the proper license to convert the files and use in your app (most that come with your computer are not supported). If you don't know for sure, you should assume you don't have the correct license. Here's a generic blog post that explains the CSS you will need: https://css-tricks.com/snippets/css/using-font-face/. Also, you should only load the minimum amount of fonts you need. If you don't have any italic or bold text, do not reference these in your CSS file. Adding too many font files can drastically increase the load time of your app. Once you have the proper CSS, you'll need to reference the font family with the corresponding map journal elements. The end to the Medium blog post will help with this.