// Main Font "Muli" @import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); // Monospace Font "Source Code Pro" @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); $font-sizes: ( h1: 96px, h2: 60px, h3: 48px, h4: 34px, h5: 24px, h6: 20px, p: 18px, a: 18px, span: 18px, ); $font-weights: ( h1: lighter, h2: lighter, h3: normal, h4: normal, h5: normal, h6: 500, p: normal, a: normal, span: normal, ); @each $tag, $size in $font-sizes { #{$tag} { font-family: Muli; color: $clr-text; font-size: $size; margin: $size / 2 auto $size / 3 auto; } } @each $tag, $weight in $font-weights { #{$tag} { font-weight: $weight; } } p { line-height: 1.5; } code { font-family: "Source Code Pro"; font-weight: 400; }