To begin, open the Site Template editor.

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.

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

<link href="https://fonts.googleapis.com/css?family=Lato" 
      rel="stylesheet">

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;
}