topic Re: Custom Font in for web map (CSS) in ArcGIS Instant Apps Questions

Custom Font in for web map (CSS)

FDirie — Fri, 17 Nov 2017 00:07:56 GMT

Hi,

I am changing some elements in a map using custom css option. I am wondering how to add custom fonts (google fonts) in order to change the title using CSS. I know that you have to use @import but am not able to get my font choice working.

thanks,

Re: Custom Font in for web map (CSS)

RickeyFight — Fri, 17 Nov 2017 00:36:44 GMT

What does your code look like?

CSS

{
font-family: "Times New Roman", Times, serif;
}

Re: Custom Font in for web map (CSS)

FDirie — Fri, 17 Nov 2017 14:00:22 GMT

It shows up as:

I'm customizing the Story Map Basic template and using inspect in chrome to make changes + copy the code snippet above and paste into the custom css box when configuring my web map. I'm trying to get it to change to Merriweather (Google Fonts) for the title and have tried pasting the following above the #title but that didn't seem to work.

@import url('https://fonts.googleapis.com/css?family=Merriweather');

Any help is appreciated,

thanks

Re: Custom Font in for web map (CSS)

RickeyFight — Fri, 17 Nov 2017 16:16:05 GMT

In your css try changing the font-family to :

Title{

font-family: merriweather !important;

}

Re: Custom Font in for web map (CSS)

FDirie — Fri, 17 Nov 2017 20:12:43 GMT

Thanks, that worked. The only issue is when I take my code and paste in the custom css box, the change goes away back to the old font.

#title {
font-family: font-family: merriweather !important;
height: 45px;
padding-left: 4px;
padding-top: 0px;
font-size: 40px;
font-weight: 400;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow: visible;
}

Where it says "open_sanssemibold..." was replaced with the font-family: merriweather !important; but doesn't reflect in map anymore.

Re: Custom Font in for web map (CSS)

RickeyFight — Fri, 17 Nov 2017 20:39:01 GMT

You do not need to have font-family twice

Are you talking about the Attach code on AGOL?

If so look at this:

Item details—ArcGIS Online Help | ArcGIS

Code Attachment—You can attach code (as a ZIP file) to your apps. This can be helpful if you are sharing a sample or a configurable app and want others to have access to your code.

To update a code attachment without resetting the download counter on the item, use Update Codeand upload a ZIP file with the same name as the original ZIP file. If you want to attach a new file, first delete the existing file; then use Attach Code. This will reset the download count on the item.

Basically the code you attach will allow others to download it but it will not affect your storymap.

Re: Custom Font in for web map (CSS)

FDirie — Tue, 02 Jan 2018 03:18:00 GMT

Thanks, I eventually just ended up downloading the source code and adding my fonts in there (took out the font-family I had listed twice in there). Thanks for your help.