Custom Font in for web map (CSS)

2137
6
11-16-2017 04:07 PM
FDirie
by
New Contributor

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, 

0 Kudos
6 Replies
RickeyFight
MVP Regular Contributor

What does your code look like? 

CSS

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

0 Kudos
FDirie
by
New Contributor

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

 

0 Kudos
RickeyFight
MVP Regular Contributor

In your css try changing the font-family to : 

Title{

          font-family: merriweather !important

}

0 Kudos
FDirie
by
New Contributor

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.

0 Kudos
RickeyFight
MVP Regular Contributor

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. 

0 Kudos
FDirie
by
New Contributor

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. 

0 Kudos