add base typography mixins

src/html/index.html

@@ -11,6 +11,7 @@
 		<meta name="description" content="THE DESCRIPTION IS THIS!">
 		<meta name="author" content="I AM THE AUTHOR!">
 
+		<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
 		<link rel="stylesheet" href="css/style.css">
 
 	</head>

src/scss/_base.scss

@@ -40,6 +40,7 @@
 
 body {
   font-size: 100%;
+	@include font-body;
   color: $color-body;
   background-color: $background-color;
 }

src/scss/_typography.scss

@@ -0,0 +1,27 @@
+@mixin font-1($weight) {
+	font-family: "Montserrat", sans-serif;
+	@if $weight == regular {
+		font-weight: 400;
+	} @else if $weight == medium {
+		font-weight: 500;
+	} @else if $weight == semi-bold {
+		font-weight: 600;
+	} @else if $weight == bold {
+		font-weight: 700;
+	} @else {
+		@error "font-weight #{$weight} not in valid font-weights for font-1: 'Montserrat'.";
+	}
+}
+
+@mixin font-body($weight: regular) {
+	@include font-1($weight);
+}
+
+@mixin font-title($weight: medium) {
+	@include font-1($weight);
+}
+
+@mixin font-link($weight: medium) {
+	@include font-1($weight);
+}
+

src/scss/style.scss

@@ -1,4 +1,5 @@
 @import "variables";
 @import "node_modules/modern-css-reset/src/reset";
+@import "typography";
 @import "base";
 @import "layout";