Ever wish your story map had a little more flair? Maybe your organization has a specific branding that needs to be reflected in the apps you publish. This trick will allow you to add a unique font in just a few minutes.
Essentials for Success
- Have access to a web server to host your customized story.
- Create a Story Map using one of Esri’s Story Map apps.
- Knowledge of your browsers web inspector and basic understand of CSS selectors is helpful for specific changes.
For this post, we’ll be starting with the Mountains of Fire Story Map that our team produced highlighting the deadliest and most active volcanoes around the world. This story uses 3D Web Scenes embedded as web pages to bring the volcanoes to life. Adjusting the text color already draws your audience into the text but adding a custom font will liven it up even more.
To begin, we’ll first need to download the source code. All of the Story Map apps are open source and available for download so you can use and customize as you wish. The source code for each app can be found by navigating to our apps page and clicking the “Learn More” button under the description for each app. About halfway down this page, you should see a link to “Download configurable app.” Unzip the contents of this download to a new folder on your server.
Next, you’ll need to get the application ID that is associated with the version of the app that is hosted on ArcGIS Online. All the content of your story will still be hosted on ArcGIS Online and you’ll still be able to use the online builder to edit your story. The application ID will link your hosted version with the customized version that is now on your server. This application ID can be found by looking at the URL of your hosted app. Just copy the alphanumeric code that comes after the “appid=” in the url (see example in bold below).
Once you have this open the index.html file in your favorite text editor. Notepad works fine but I recommend using a text editor that has syntax highlighting to make it much easier to read. Notepad++ and Atom Editor are two free apps that work really well on both Mac and PC. Scroll down to configuration section and paste the application ID between the quotes of the appid variable.
At this point, if you open the app in your browser, you should have an exact duplicate of the app you created in ArcGIS Online except it will be hosted on your own server.
Create a Google Fonts Collection
Now we need to go to Google Fonts and select the fonts we want to use in our app. Google has hundreds of fonts to choose from so have fun browsing for your favorites. It’s important to remember that your audience may be reading your story on a variety of devices so pick a font that is easily readable even if it very small.
I’ve decided to use two different fonts for this example. A san-serif font called “Oswald” for the title and section heading and a serif font called “Lora” for the body text. Add each of these to your collection and click the “Use” button.
Loading many fonts, font weights, or styles can make your story load very slowly. Google Fonts allows you to select only the weights and styles you need for each font you select. Go through your story and look for every time you use bold or italic text. In the Mountains of Fire story, the body text has a couple instances where it is bold but the heading are all the same font style.
Add the Google Font code to your app
Now scroll down to step 3 and copy the code that google gives you:
<link href=’https://fonts.googleapis.com/css?family=Oswald|Lora:400,700' rel=’stylesheet’ type=’text/css’>
Paste this at the bottom of the head tag (about line 68 of the index.html file). Next add the following code in the custom styles section that you’ll find at the top of the body tag (about line 71 of the index.html file).
NOTE: If you’re using different fonts, replace font family names with the names of the fonts you selected. This provided in step 4 of Google Fonts “Use” section.
If you’ve done it correctly, the code should look like this:
Preview your app your app once more. Your new fonts should now be loading in your app. If you’ve followed along with the Mountains of Fire application ID and the same font families, your app should look the same as the image below.
If you’ve been working off a test server, it’s now time to move your code over to your production server and share your story with the public.
For Advanced Users
This example only provides that minimum code needed to change the body and header font of your app. If you have experience with yours browsers web inspector, use it to get the CSS selectors of specific elements so your pick and choose which fonts to change. Maybe you want a blockquote to have a special font or change the navigation look and feel. Remember to preview your app on both desktop and mobile browsers as smaller screens may need different selectors.