How to change header title font in Story Map - Map Tour?

[EmilyLee]

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

[KenBuja]

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.

[EmilyLee]

Oh I'm sorry! My apologies! Thanks.

[GregoryL_Azou]

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.

[EmilyLee]

Thanks a lot, Gregory!

[MichaelCampbell3]

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.

https://developerscorner.storymaps.arcgis.com/jazz-up-your-story-maps-with-google-fonts-65f4cefb38f8...

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?

[StephenSylvia]

Try this:

#header .title {
  font-family: 'your font name'
}

[MichaelCampbell3]

Thanks Stephen, that worked.