Add italic version of Open Sans (#70)

nationalarchives · Dec 29, 2023 · 9f28a2b · 9f28a2b
1 parent 9c7363b
commit 9f28a2b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.32...HEAD)
 
 ### Added
+
+- Added italic version of Open Sans
+
 ### Changed
 
 - The default cookie banner colour is dark on light but can be changed with a `style` attribute or classes such as `tna-cookie-banner--contrast`

diff --git a/src/nationalarchives/assets/fonts/OpenSans-Italic.ttf b/src/nationalarchives/assets/fonts/OpenSans-Italic.ttf
diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -17,6 +17,14 @@
     // font-display: swap;
   }
 
+  @font-face {
+    font-family: "Open Sans";
+    src: url("#{assets.$tna-font-path}/OpenSans-Italic.ttf");
+    font-weight: typographyVars.$main-font-weight;
+    font-style: italic;
+    // font-display: swap;
+  }
+
   @font-face {
     font-family: "Open Sans";
     src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
@@ -41,7 +49,7 @@
     // font-display: swap;
   }
 } @else {
-  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
+  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
 }
 
 .tna-template {

diff --git a/src/nationalarchives/variables/_typography.scss b/src/nationalarchives/variables/_typography.scss
@@ -10,7 +10,8 @@ $body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !defau
 
 $interactive-text-decoration-thickness: 3.5px !default;
 
-$main-font-family: "Open Sans", sans-serif !default;
+$main-font: "Open Sans" !default;
+$main-font-family: $main-font, sans-serif !default;
 $main-font-weight: 400 !default;
 $main-font-weight-bold: 700 !default;