Adding Google Fonts to your StatusPage

If you are on the Public Startup plan (or higher) or any of our Private Statuspage plans you can use Google fonts in your status page to give your page a unique look and feel.

Step 1 - Finding your Google Font

To get started, you will need the @import URL for your font from Google. You can find your font by going to https://fonts.google.com/

Once you find the font you want to use, click the "+" sign next to your font. This will expand a small window at the bottom of your browser.

Now click on the black bar at the bottom of your browser to see the content.

This will expand a dialog box where you can customize your font further. Once you have your font configured, just click on the @IMPORT link.

This adjusts the code to a format that can be used within your Statuspage.

Step 2 - Copy the Code

Now copy the line from @import all the way through to the ";"

This is part of the code that we will be adding to our custom CSS field on our Statuspage. The line of code will replace "(1)REPLACE WITH @IMPORT LINE" in the Sample Code below.

/* Start Custom CSS */
(1)REPLACE WITH @IMPORT LINE
body {
(2)REPLACE WITH SPECIFY IN CSS
}
/* End Custom CSS */

One last thing that we will need to copy to our Sample Code, is the code in the "Specify in CSS" box. That code will replace "(2)REPLACE WITH SPECIFY IN CSS". The numbers in this screen shot correspond to the numbers in the Sample Code.

Once you've added your the 2 lines of code to the Sample Code, your code should look something like this:

/* Start Custom CSS */
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body {
font-family: 'Roboto Condensed', sans-serif;
}
/* End Custom CSS */

Step 3 - Adding the code to your Statuspage

We can now add this code to our custom CSS field on our Statuspage. To do so, login to your Statuspage Management Portal and click on the Customize Page section in the left-hand navigation bar.

Once the page loads, click on the Custom CSS/HTML tab.

This is where we can now add our custom code to the custom CSS field.

Once you add the code, the page preview will automatically refresh and show how the added code changes your Statuspage.

Once you are satisfied with your customizations, click the PUBLISH CHANGES button in the top-right to finalize your changes and make them visible to your audience.