Portal - Homepage - Custom Fonts

[BenGrod]

We would like to change our Portal for ArcGIS 10.3.1 Homepage fonts to custom fonts that align with our companies branding and standards. I installed the fonts on the web server and correctly tagged them in a custom html updating the "Description" but the custom font is being ignored and it appears to be defaulting to Veranda. I noticed there were only 5 standard fonts available in the "Description" text editor and I wondered can you use fonts outside of that list?

Example of the html modifying the font face to a custom "Geogrotesque Md"

<p align="center"><b><span style="font-size: 22pt; color: rgb(64, 64, 64);"><font face="Geogrotesque Md">Get started! Learn how to…</font></span></b></p>

[BenGrod · Accepted solution]

I kept experimenting and found that you can change all of the homepage elements through modifying the html of the Banner which is accessible through My Organization - Edit Settings - Homepage - Banner - Custom Design - View HTML Source. Some things you can change include the homepage fonts, webkit-box shadows for featured maps, gallery label container, and other things. Below is a small example which changes the font on the Header text and makes the Featured Maps "webkit-box" transparent. Though, there is lots more you can do. Good luck and hope this is helpful. Also, check out this Esri blog for Home Page customization.

<style>

#header .nav a {font-family: Geogrotesque Medium;font-size:20px; color: #718473}

#featuredMaps {background: transparent; -webkit-box-shadow: none; box-shadow: none; border-bottom: none}

#featuredMaps #fHeader {background: transparent; border-bottom: transparent;}

</style>

[MatthewTwietmeyer]

Ben,

Do you know how too modify or the #... to change the featured map title text/color and map description under the thumbnail?

Appreciate your help!

Matt

[BenGrod]

Hi Matthew,

Sorry for the late reply, try this. If you want a unique font it must be installed on the server before you are able to change/apply it.

.galleryNode .galleryLabelContainer {font-family: Font name here; font-size:18px; color: #FFF ; font-weight: bold ;}