1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-18 21:45:31 -04:00

switch main font to the beautiful Inter – https://rsms.me/inter/

This commit is contained in:
2020-01-21 23:55:51 -05:00
committed by GitHub
parent 3e65bd1f8d
commit 8c3fb6f50b
33 changed files with 61 additions and 49 deletions

View File

@@ -13,17 +13,19 @@
}
// Web fonts (see components/_fonts.scss)
@mixin font-face($family, $src-local, $src-local-alt, $src,
@mixin font-face($family, $src,
$style: normal, $weight: normal, $display: swap) {
@font-face {
font-family: $family;
font-style: $style;
font-weight: $weight;
font-display: $display;
src: local("#{$src-local}"), local("#{$src-local-alt}"),
url("#{$src}.woff2") format("woff2"),
src: url("#{$src}.woff2") format("woff2"),
url("#{$src}.woff") format("woff");
// url('#{$src}.ttf') format('truetype'),
// url('#{$src}.eot') format('embedded-opentype');
// src: local("#{$src-local}"), local("#{$src-local-alt}"),
// url('#{$src}.ttf') format('truetype'),
// url('#{$src}.eot') format('embedded-opentype');
unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF,
U+2190-21FF, U+2200-22FF, U+2122;
}
}

View File

@@ -9,7 +9,7 @@ $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
$system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
"Menlo", "Courier", monospace;
$webfont-roboto: "Roboto", sans-serif;
$webfont-inter: "Inter", sans-serif;
// Misc Settings
$responsive-width: 890px;

View File

@@ -1,6 +1,6 @@
@charset "UTF-8";
/*! Roboto Latin | Apache License 2.0 | https://fonts.google.com/specimen/Roboto */
@include font-face("Roboto", "Roboto", "Roboto-Regular", "./fonts/roboto-latin-regular", normal, 400);
@include font-face("Roboto", "Roboto Medium", "Roboto-Medium", "./fonts/roboto-latin-medium", normal, 500);
@include font-face("Roboto", "Roboto Bold", "Roboto-Bold", "./fonts/roboto-latin-bold", normal, 700);
/*! Inter UI | SIL Open Font License 1.1 | https://rsms.me/inter/ */
@include font-face("Inter", "./fonts/inter-regular", normal, 400);
@include font-face("Inter", "./fonts/inter-medium", normal, 500);
@include font-face("Inter", "./fonts/inter-bold", normal, 700);

View File

@@ -3,6 +3,7 @@
// Global Footer Styles
footer {
width: 100%;
letter-spacing: -0.01em;
line-height: 1.7;
padding: 1.5em 2.5em;
box-sizing: border-box;

View File

@@ -7,7 +7,10 @@ body {
margin: 0 auto;
background-color: $color-gray-background; // really just the color of header & footer
color: $color-text;
font-family: $webfont-roboto, $system-fonts-emoji;
font-family: $webfont-inter;
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
font-kerning: normal;
font-variant-ligatures: normal;
line-height: 1.5;
box-sizing: border-box;
}

View File

@@ -23,7 +23,7 @@ header {
margin: 0 0 0 0.8em;
font-size: 1.5em;
font-weight: 500;
letter-spacing: 0.01em;
letter-spacing: -0.01em;
}
svg {

View File

@@ -11,6 +11,7 @@ main#home {
margin: 0 0 0.6em 0;
font-size: 1.6em;
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.2;
}
@@ -18,16 +19,20 @@ main#home {
margin: 0.6em 0;
font-size: 1.3em;
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.4;
}
p {
margin: 0.8em 0;
letter-spacing: -0.02em;
line-height: 1.55;
}
sup {
top: -0.5em;
font-size: 0.5em;
letter-spacing: -0.005em;
line-height: 0;
margin-right: 0.1em;
position: relative;

View File

@@ -7,10 +7,11 @@ main#list {
margin: 0 auto;
section.year {
font-size: 1.1em;
font-size: 1.05em;
h2 {
font-size: 1.8em;
font-size: 2.25em;
letter-spacing: -0.025em;
margin: 0;
}
@@ -22,6 +23,7 @@ main#list {
li {
display: flex;
letter-spacing: -0.015em;
div.date {
color: $color-medium;

View File

@@ -9,6 +9,7 @@ main#single {
article div {
&#content {
font-weight: 400;
letter-spacing: -0.011em;
line-height: 1.7;
h1,

View File

@@ -8,6 +8,7 @@ main#video {
h1 {
margin-top: 0;
letter-spacing: -0.005em;
a {
color: inherit;
@@ -16,6 +17,7 @@ main#video {
p {
font-size: 0.85em;
letter-spacing: -0.01em;
line-height: 1.5;
color: #777777;
margin: 1.25em;