Choose the font you want to use on your site.

When you choose a font you want to use on your site, we recommend choosing one from fonts.google.com to ensure it will be available across all types of devices and browsers.

Once you've chosen your font, click Get embed code.

Modify the provided CSS based on the font you choose

After you've chosen your font and selected Get embed code, you will choose the @import option, take the provided @import section of the code, and replace the @import in the provided CSS within the section labeled:

/* THIS IS WHERE YOU IMPORT THE WEB FONTS */.

You will also replace the CSS class declaration in the provided CSS with the CSS class from Google. This is all done in the section of the provided CSS labeled:

/* THIS IS WHERE YOU DECLARE YOUR CSS CLASS FOR THE FONT YOU ARE IMPORTING */

After you have imported your font and declared the class, you specify the font-family name per component in the section of the provided CSS labeled:

/* THIS IS WHERE YOU PICK THE FONT-FAMILY NAME PER COMPONENT */

For example, if you are changing the font of your headings and titles, you would replace "Montserrat" in all components in the provided CSS with the font you declared earlier.

You can remove any components you are not customizing the font for.

/* THIS IS WHERE YOU IMPORT THE WEB FONTS */ 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&display=swap'); 

/* THIS IS WHERE YOU DECLARE YOUR CSS CLASS FOR THE FONT YOU ARE IMPORTING */

@font-face { font-family: 'Droid Serif'; font-style: italic; font-weight: 400; src: url(https://fonts.gstatic.com/s/droidserif/v13/tDbK2oqRg1oM3QBjjcaDkOr4nAfcHi6FRUI.woff2) format('woff2'); 
} 

@font-face { font-family: 'Droid Serif'; font-style: italic; font-weight: 700; src: url(https://fonts.gstatic.com/s/droidserif/v13/tDbX2oqRg1oM3QBjjcaDkOr4lLz5CwOnSGjW7BA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
} 

@font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/droidserif/v13/tDbI2oqRg1oM3QBjjcaDkOr9rAXWGQyH.woff2) format('woff2'); 
} 

@font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 700; 
} 

/* THIS IS WHERE YOU PICK THE FONT-FAMILY NAME PER COMPONENT */ 

body { font-family: "Droid Serif", Helvetica, Arial, sans-serif; 
} 
.product .price { font-family: "Droid Serif", Helvetica, Arial, sans-serif; 
} 

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "Montserrat", Helvetica, Arial, sans-serif; 
} 

.product .name { font-family: "Montserrat", Helvetica, Arial, sans-serif; } 

.widget .title { font-family:"Montserrat", Helvetica, Arial, sans-serif; 
} 

input, button, select, textarea { font-family: "Montserrat", Helvetica, Arial, sans-serif; 
} 

.breadcrumb-2 li a, .breadcrumb-2 li { font-family: "Montserrat", Helvetica, Arial, sans-serif; 
} 

.text-tabs .tab-title span { font-family:"Montserrat", Helvetica, Arial, sans-serif; 
} 

.btn { font-family: "Montserrat", Helvetica, Arial, sans-serif; 
} 

.menu { font-family: "Montserrat", Helvetica, Arial, sans-serif; 
} 

input { font-family: "Montserrat", Helvetica, Arial, sans-serif; 
} 

a.slidermore { font-family: "Montserrat", Helvetica, Arial, sans-serif; 
}

Add the custom CSS to the Custom Styles section of your site

In the admin area of your Run Free Project site, navigate to Layout then Branding.
Add CSS from the /* THIS IS WHERE YOU IMPORT THE WEB FONTS */ section of the modified provided CSS to line 1 of the Custom Styles Section.
Add the rest of the modified CSS from below the sections labeled /* THIS IS WHERE YOU DECLARE YOUR CSS CLASS FOR THE FONT YOU ARE IMPORTING */ and /* THIS IS WHERE YOU PICK THE FONT-FAMILY NAME PER COMPONENT */ to the bottom of the Custom Styles section.
Save Settings in the upper right of the page.

After you modify the CSS in your Custom Styles section, you will need to clear the cache in your browser and refresh your site to see the changes.

custom font css.rtf