6564 - Make sure we are loading italic font styles from Google & update /style-guide to include examples (#6895)

fixes

maintenance/maintenance.html

@@ -7,8 +7,8 @@
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900,400i">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i,400i,600i">
   <link rel="stylesheet" href="static/css/main.css">
   <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="static/images/apple-touch-icon-180x180@2x.png">
   <link rel="icon" type="image/png" sizes="196x196" href="static/images/favicon-196x196@2x.png">

network-api/networkapi/templates/pages/base.html

@@ -32,8 +32,8 @@
 
     {% block stylesheets %}
       <link rel="stylesheet" href="{% static "_css/main.compiled.css" %}">
-      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900">
-      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i">
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900,400i">
+      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i,400i,600i">
     {% endblock %}
 
     {% block extended_head %}{% endblock %}

network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html

@@ -29,7 +29,7 @@
 {% block stylesheets %}
   <link rel="stylesheet" href="{% static "_css/buyers-guide.compiled.css" %}">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,400i">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i,400i">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i,400i,600i">
 {% endblock %}
 
 

network-api/networkapi/wagtailpages/templates/maintenance/maintenance.html

@@ -6,8 +6,8 @@
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900,400i">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,600,700,300i,400i,600i">
   <link rel="stylesheet" href="{% static 'css/main.css' %}">
   <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{% static 'images/apple-touch-icon-180x180@2x.png' %}">
   <link rel="icon" type="image/png" sizes="196x196" href="{% static 'images/favicon-196x196@2x.png' %}">

network-api/networkapi/wagtailpages/templates/wagtailpages/static/styleguide.html

@@ -251,13 +251,13 @@
       <h3 class="h2-heading mt-5">Paragraphs</h3>
       <hr />
       <div class="py-2">
-        <p class="body-large">.body-large with <b>bold</b> and <strong>strong</strong> text</p>
+        <p class="body-large">.body-large with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
       </div>
       <div class="py-2">
-        <p class="body">.body with <b>bold</b> and <strong>strong</strong> text</p>
+        <p class="body">.body with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
       </div>
       <div class="py-2">
-        <p class="body-small">.body-small with <b>bold</b> and <strong>strong</strong> text</p>
+        <p class="body-small">.body-small with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
       </div>
       <div class="py-2">
         <p class="quote">.quote</p>
@@ -348,13 +348,13 @@
       <hr />
       <div class="dark-theme bg-black">
         <div class="py-2">
-          <p class="body-large">.body-large with <b>bold</b> and <strong>strong</strong> text</p>
+          <p class="body-large">.body-large with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
         </div>
         <div class="py-2">
-          <p class="body">.body with <b>bold</b> and <strong>strong</strong> text</p>
+          <p class="body">.body with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
         </div>
         <div class="py-2">
-          <p class="body-small">.body-small with <b>bold</b> and <strong>strong</strong> text</p>
+          <p class="body-small">.body-small with <b>bold</b> and <strong>strong</strong> and <i>italic</i> text</p>
         </div>
         <div class="py-2">
           <p class="quote">.quote</p>
@@ -362,6 +362,7 @@
         <div class="py-2">
           <h2 class="type-accent">.type-accent</h2>
         </div>
+
       </div>
 
       <h3 class="h2-heading mt-5">Dark Theme Paragraphs with links</h3>