IHUBAPP HACK: How to change the body and header fonts

If branding is especially important to your client, this is an EASY way to change the body and heading fonts on a Hub. 

NOTE: For this to work, you must use Google fonts with available font files. Here are the steps to get the correct Google font link for the font you want to use: 

1. Go to fonts.google.com and find/open the font family you want to use for your body and/or heading font
2. Choose the style(s) of the font family you want to use by clicking on the blue Select + icon on the right of the style(s)
3. Click on the View Selected Families icon (three boxes and + sign) in upper right corner or the screen
4. In the “Use on the web” section in the right column, click on the @import option
5. Copy the link for use in the CSS below.

HEADING FONT

This is the code I used to change the heading font to League Spartan in one of my Hubs:

/* Import League Spartan font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');

/* Apply League Spartan font to heading elements (e.g., h1, h2, h3, h4, h5, h6) */
h1, h2, h3, h4, h5, h6 {
 font-family: 'League Spartan', sans-serif;
}

BODY FONT

This is the code I used to change the body font to Lato in one of my Hubs:

/* Import Lato font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/* Apply Lato font to the body element */
body {
 font-family: 'Lato', sans-serif;
}

INCREASING HEADING SIZES

If you also want to change the font sizes of any of the headings, here is the CSS code for that (this is for H1, simply change heading name for other headings):

/* Increase the size of H1 header to 36px */
h1 {
 font-size: 36px;
}