Fixed font loading. Now correctly uses bold and italic faces.

This commit is contained in:
Marcus Scholz 2020-09-04 20:21:54 +02:00
parent b78752144e
commit 3a8498ac0c
1 changed files with 43 additions and 18 deletions

View File

@ -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;