Hello GeoCommunity,
Can I change the header font on Story Map-Map Tour in the hosted version? Specifically to the "Scriptina Pro" font. I downloaded the font and the app template. I assume I'd need to put the font folder into \resource\font folder? But afterward, I'm not sure where to specify the change. I tried to look into the maptour-config.js file, but not sure which lines to edit. Please help.
Thank you,
Emily
Emily,
Please note that the GeoNet Help space is for the discussion of GeoNet itself, not specific applications. I've moved this to the Story Maps space, but if it's more appropriate to be in another space, please move it there.
Oh I'm sorry! My apologies! Thanks.
Hi Emily,
resources/font is a really good place to put your new font.
To use it in the application, there is 2 steps.
First you will have to load it, your font probably come with a CSS file and multiple files like ttf, woff.
You have to reference the CSS file in index.html, for example after line 100 modify the code to be:
... loadCSS("//js.arcgis.com/3.14/esri/css/esri.css", true); loadCSS("//js.arcgis.com/3.14/dijit/themes/claro/claro.css", true); loadCSS("resources/font/myfont.css"); if( isProduction ) { loadCSS("app/maptour-min.css"); } ...
Then what you will want to do is to add a css rules that tell the application to use the font, you will do that in index.html too, around line 186 by modifying the code to be
<style> body { font-family: 'yourfontname'; } </style>
Your font should come with a readme where you will know what name to use for that CSS rule.
Thanks a lot, Gregory!
I'm also trying to change the font of the title of a Story Map Tour hosted version using Google fonts, which is outlined in the following blog post.
I have referenced the Google font family in the head section of the index.html file and added the custom CSS rules near line 186. I have used a variety of CSS selectors, but nothing seems to work to change the font of the title. I tried using .textArea and the subtitle changes correctly, but the title does not. When you inspect the title element I can see that the Google font is being overwritten and it is using the opensanssemibold and sans-serif font families from the maptour-min.css file instead.
Which CSS selector(s) should I be using to change just the font of the title of the Story Map Tour for both mobile and desktop?
Try this:
#header .title { font-family: 'your font name' }
Thanks Stephen, that worked.