diff --git a/components/main.scss b/components/main.scss index e926c20..b6f49e2 100644 --- a/components/main.scss +++ b/components/main.scss @@ -1,20 +1,48 @@ @import './rcss.bundled.scss'; @font-face { - font-family: Crimson; - src: - url('fonts/Crimson/CrimsonText-Regular.ttf'), - url('fonts/Crimson/CrimsonText-Bold.ttf'), - url('fonts/Crimson/CrimsonText-Italic.ttf'); -} - -@font-face { - font-family: Montserrat; - src: - url('fonts/Montserrat/Montserrat-Regular.ttf'), - url('fonts/Montserrat/Montserrat-Bold.ttf'), - url('fonts/Montserrat/Montserrat-Italic.ttf'); -} + font-family: 'Crimson Text'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Crimson Text Italic'), local('CrimsonText-Italic'), url(fonts/Crimson/CrimsonText-Italic.ttf) format('truetype'); + } + @font-face { + font-family: 'Crimson Text'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Crimson Text Regular'), local('CrimsonText-Regular'), url(fonts/Crimson/CrimsonText-Regular.ttf) format('truetype'); + } + @font-face { + font-family: 'Crimson Text'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Crimson Text Bold'), local('CrimsonText-Bold'), url(fonts/Crimson/CrimsonText-Bold.ttf) format('truetype'); + } + @font-face { + font-family: 'Montserrat'; + font-style: italic; + font-weight: 400; + font-display: swap; + src: local('Montserrat Italic'), local('Montserrat-Italic'), url(fonts/Montserrat/Montserrat-Italic.ttf) format('truetype'); + } + @font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Montserrat Regular'), local('Montserrat-Regular'), url(fonts/Montserrat/Montserrat-Regular.ttf) format('truetype'); + } + @font-face { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: local('Montserrat Bold'), local('Montserrat-Bold'), url(fonts/Montserrat/Montserrat-Bold.ttf) format('truetype'); + } + $-beige: #D7CEC7; $-grey: #565656; @@ -25,12 +53,9 @@ $-almost-white: #f9f9f9; $-primary-sans-serif-font: Montserrat, Helvetica, sans-serif; -$-primary-serif-font: Crimson, +$-primary-serif-font: 'Crimson Text', Times, serif; -$-primary-sans-serif-accent-font: Roboto, -Arial, -sans-serif; $-viewport-extra-small: 450px; $-viewport-small: 650px;