diff --git a/CHANGELOG.md b/CHANGELOG.md index e5c60a5b..23aab921 100644 --- 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 new file mode 100644 index 00000000..29ff6938 Binary files /dev/null and b/src/nationalarchives/assets/fonts/OpenSans-Italic.ttf differ diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss index 324d6e6d..3adeedfe 100644 --- 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 index 667dda0f..66333ad9 100644 --- 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;