Add $family-secondary, $family-tertiary, and 6 font family helpers (#2178)

* Add secondary and tertiary font families to derived-variables.sass

* Add font family helpers to helpers.sass

* Add has-font-* to typography-helpers.html

* Correct number of font family helpers in typography-helpers.html

* Remove $family-tertiary, change has-font to is-family, and update docs.

docs/documentation/modifiers/typography-helpers.html

@@ -412,3 +412,48 @@ breadcrumb:
   </tr>
   </tbody>
 </table>
+
+{% include elements/anchor.html name="Font family" %}
+
+<div class="content">
+  <p>
+    You can change the font family with the use of one of <strong>5 font family
+    helpers</strong>:
+  </p>
+</div>
+
+<table class="table is-bordered">
+  <thead>
+  <tr>
+    <th>
+      Class
+    </th>
+    <th>
+      Family
+    </th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td><code>is-family-primary</code></td>
+    <td>Changes font family to <strong>$family-primary</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-family-secondary</code></td>
+    <td>Changes font family to <strong>$family-secondary</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-family-sans-serif</code></td>
+    <td>Changes font family to <strong>$family-sans-serif</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-family-monospace</code></td>
+    <td>Changes font family to <strong>$family-monospace</strong></td>
+  </tr>
+  <tr>
+    <td><code>is-family-code</code></td>
+    <td>Changes font family to <strong>$family-code</strong></td>
+  </tr>
+  </tbody>
+</table>
+

sass/base/helpers.sass

@@ -120,6 +120,21 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
 .has-text-weight-bold
   font-weight: $weight-bold !important
 
+.is-family-primary
+  font-family: $family-primary !important
+
+.is-family-secondary
+  font-family: $family-secondary !important
+
+.is-family-sans-serif
+  font-family: $family-sans-serif !important
+
+.is-family-monospace
+  font-family: $family-monospace !important
+
+.is-family-code
+  font-family: $family-code !important
+
 // Visibility
 
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'

sass/utilities/derived-variables.sass

@@ -67,6 +67,7 @@ $link-active-border: $grey-dark !default
 // Typography
 
 $family-primary: $family-sans-serif !default
+$family-secondary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
 $size-small: $size-7 !default