#ProTip: Using Custom Fonts on your Open Data Site

[#1]

Note: This post, from 2015, covers features that are not present in the newer versions of ArcGIS Open Data. 

----------------

I recently had a request to change the standard fonts on a custom site. This organization had specific font-families for the headings and body content. We were able to find the same fonts available in the Google Web Font library. After selecting the different font-weights to include for both, I grabbed the links and dropped them into the custom Header HTML of the site.

<link href='
https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700
' rel='stylesheet' type='text/css'>

<link href='
https://fonts.googleapis.com/css?family=Merriweather:400,700
' rel='stylesheet' type='text/css'>

‍‍‍‍‍‍‍‍

In order to target ALL text elements within Open Data sites the following CSS will address all of the body content and headers in two rules. Just use this at the top of the Custom CSS window.

/* GLOBAL STYLES */
body, html, p, ul, ol, .btn, .search-nav-item, #gsearch, #search-results-region, #show-banner-region .map-bar-title, #sub-nav-region, #sub-nav-region .link, #dataset-description, .attribute-name, .info-name {
  font-family: 'Source Sans Pro', sans-serif !important;
  font-weight: 400 !important;
}


h1, h2, h3, h4, h5, h6, .site-logo, .card-title, .card-title a {
  font-family: ‘Merriweather’, serif !important;
  font-weight: 400 !important;
}
‍‍‍‍‍‍‍‍‍‍‍

[Ferndale_GISAdministrator]

Hi, I'm trying to get the H1 headline in banners to be a different font with something like this in the header custom CSS:

h1 {
margin-top: 10px;
margin-bottom: 10px;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 40px;
line-height: 46px;
font-weight: 700;
letter-spacing: 1px;
}

But I'm getting all kinds of weird behavior from the open data site. Is there a simple way to change the font of the headlines in banners without janking up a lot of the other theming? 

[KlaraSchmitt]

Erich's post refers to our 1.9 version sites. If you are trying to change the font on the banner card via embedded styling on a 2.0 site, you might observe some weird behavior on your page, because you are using a generic tag as a selector that we have most likely used elsewhere and your CSS might be overriding our layout CSS. If you are trying to target just the h1 in the banner card, you can use the .jumbotron class in front of your h1:

.jumbotron h1 {
margin-top: 10px;
margin-bottom: 10px;
font-family: Georgia, Times, 'Times New Roman', serif;
font-size: 40px;
line-height: 46px;
font-weight: 700;
letter-spacing: 1px;
}

If you have multiple banner cards on your page though, just be warned this will apply to all of them.

Note: This will work for web safe fonts. For 2.0 sites, it is presently not possible to add custom fonts (like Google Fonts), although we do intend to add that functionality in the future.