Use a custom Google font in the 2015 (Old) Template

Updated on

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;


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article CSS and Javascript Customizations for the 2015 (Old) Template
Next Article Variables available in the Header and Footer sections of the 2015 (Old) Template
Still Need Help? Contact Us