nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Encontre mais publicações marcadas com

Accepted answers

All comments

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#.k6uxk1fc9

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.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.