Use a custom Google font on your Site

Updated Dec 13, 2018

This article will teach you how to use a Google font of your choosing in your site.

Open the site template editor

To begin, open the Site Template editor.

Select Helvetica as Header and Body Font

ScreenSteps uses the name of the selected font in the CSS classes that are generated for site content. Select Helvetica so that the CSS class names used in this article match the class names in your site.

Select Advanced layout

Add a link to the Google font to the Head section. Below is an example of adding Lato:

<link href="" 

Select CSS from the dropdown

Add the following code and change the instances of YOUR-FONT-NAME-HERE to the name of the Google font you added.

.helvetica-body, .helvetica-body input[type="email"], .helvetica-body input[type="number"], .helvetica-body input[type="password"], .helvetica-body input[type="search"], .helvetica-body input[type="tel"], .helvetica-body input[type="text"], .helvetica-body input[type="url"], .helvetica-body input[type="color"], .helvetica-body input[type="date"], .helvetica-body input[type="datetime"], .helvetica-body input[type="datetime-local"], .helvetica-body input[type="month"], .helvetica-body input[type="time"], .helvetica-body input[type="week"], .helvetica-body body, .helvetica-body select[multiple], .helvetica-body textarea, .helvetica-body input, .helvetica-body label, .helvetica-body select, .helvetica-body input[type="button"], .helvetica-body input[type="reset"], .helvetica-body input[type="submit"], .helvetica-body button
  font-family: 'YOUR-FONT-NAME-HERE', sans-serif;

.helvetica-header h1, .helvetica-header h2, .helvetica-header h3, .helvetica-header h4, .helvetica-header h5, .helvetica-header h6, .helvetica-header .screensteps-header * 
  font-family: 'YOUR-FONT-NAME-HERE', sans-serif;

For the font added in the previous step it would look like this:

  font-family: 'Lato', sans-serif;

0 Comment

Add your comment

E-Mail me when someone replies to this comment
Previous Article Customizing your Login Screen
Next Article Using jQuery to reorder the sidebar

Still Need Help?

Contact Us