Fix: Font weights

_includes/certs.html

@@ -1,6 +1,6 @@
 {% for cert in site.data.certs %}
 <div class="pe-lg-5 pt-lg-5 mt-lg-1 pb-5">
-    <span class="fs-6 monospace text-secondary pb-md-2">{{ cert.name }}</span>
+    <h2 class="h4 text-secondary pb-md-2">{{ cert.name }}</h2>
     <ul class="list-unstyled">
         {% for value in cert.values %}
         <li class="mt-3">{{ value }}</li>

_layouts/default.html

@@ -26,6 +26,10 @@
         integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
         crossorigin="anonymous"></script>
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Source+Code+Pro:wght@500;600;700;800&display=swap" rel="stylesheet">
+
     <link type="text/css" rel="stylesheet" href="/styles/base.css">
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -52,7 +56,7 @@
         <div class="container-fluid">
             <div class="row d-flex flex-column flex-lg-row row-cols-lg-4">
                 <div class="pt-lg-5 mt-lg-1 pt-4 mt-3 pb-5">
-                    <a href="mailto:[email protected]" class="monospace text-primary contact-link">[email protected]</a>
+                    <a href="mailto:[email protected]" class="h4 text-primary">[email protected]</a>
                     <p class="address pt-2 mb-0">
                         525 S Hewitt St<br />Los Angeles, CA 90013
                     </p>
@@ -63,10 +67,10 @@
             </div>
             <div class="d-flex social-media-container">
                 <div class="d-flex py-4 gap-md-4 gap-3">
-                    <a class="social-media-icon" href="https://github.com/compilerla">
+                    <a aria-label="Compiler on GitHub" class="social-media-icon" href="https://github.com/compilerla">
                         <i class="github"></i>
                     </a>
-                    <a class="social-media-icon" href="https://www.linkedin.com/company/compiler-la">
+                    <a aria-label="Compiler on LinkedIn" class="social-media-icon" href="https://www.linkedin.com/company/compiler-la">
                         <i class="linkedin"></i>
                     </a>
                 </div>

_layouts/job_post.html

@@ -6,7 +6,7 @@
 <div class="container posting">
   <div class="row">
     <div class="offset-md-2 col-md-7 col-12 mt-5 pt-5 mb-5 pb-5">
-      <h1 class="mt-4 pt-2">{{ page.title }}{% if page.type %} ({{ page.type }}){% endif %}</h1>
+      <h1 class="h2 mt-4 pt-2 mb-5 pb-2">{{ page.title }}{% if page.type %} ({{ page.type }}){% endif %}</h1>
 
       {{ content }} {% if page.apply_link %}
       <a

jobs.html

@@ -6,13 +6,13 @@
     <div class="row">
         <div class="col-md-7 offset-md-2 mt-5">
             <span class="pill">Careers</span>
-            <h1>Compiler is a woman-owned software consultancy that’s passionate about making government tech solutions
+            <h1 class="h3">Compiler is a woman-owned software consultancy that’s passionate about making government tech solutions
                 accessible for all.</h1>
 
-            <h2 class="mt-5 fs-6 pb-1 mb-2">Open roles</h2>
+            <h2 class="h4 mt-5 fs-6 pb-1 mb-2">Open roles</h2>
             <ul id="open" class="list-unstyled d-flex flex-column gap-2 text-decoration-none"></ul>
 
-            <h2 class="mt-5 fs-6 pb-1 mb-2">Past roles</h2>
+            <h2 class="h4 mt-5 fs-6 pb-1 mb-2">Past roles</h2>
             <ul id="closed" class="list-unstyled d-flex flex-column gap-2"></ul>
 
             <p class="my-5">

styles/base.css

@@ -1,4 +1,3 @@
-@import url("./fonts.css");
 @import url("./nav.css");
 
 :root {
@@ -17,15 +16,15 @@
     --bs-info: #BEB3B3; /* Use with .text-info */
     --bs-info-rgb: 190,190,190;
     --bs-font-sans-serif: "Roboto", system-ui,-apple-system,"Segoe UI","Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-    --bs-font-monospace: "Source Code Pro Bold",monospace;
+    --bs-font-monospace: "Source Code Pro",monospace;
     --focus-box-shadow: 0 0 0 calc(2.5rem / 16) var(--brand-primary-black), 0 0 0 calc(4rem / 16) var(--brand-primary-green);
 }
 
 body {
     background-color: var(--brand-primary-black);
     color: var(--white);
     font-family: var(--bs-font-sans-serif);
-    font-weight: normal;
+    font-weight: 400;
 }
 
 .container-fluid {
@@ -53,7 +52,7 @@ a {
     color: var(--brand-primary-green);
     text-decoration: none;
     transition: 250ms;
-    font-weight: 700;
+    font-weight: 500;
 }
 
 a:hover:not(.btn) {
@@ -78,6 +77,7 @@ h3,
 h4,
 .h4 {
     font-family: var(--bs-font-monospace);
+    letter-spacing: 0;
 }
 
 .sans-serif {
@@ -90,11 +90,7 @@ h4,
 
 :root {
     --h2-font-size: calc(32rem / 16);
-    --h2-font-weight: 500;
-    --h2-line-height: 120%;
     --h3-font-size: calc(24rem / 16);
-    --h2-font-weight: 700;
-    --h2-line-height: 120%;
 }
 
 @media (min-width: 992px) {
@@ -114,24 +110,26 @@ h1 {
 h2,
 .h2 {
     font-size: var(--h2-font-size);
-    font-weight: var(--h2-font-weight);
-    line-height: var(--h2-line-height);
-    letter-spacing: 0;
+    font-weight: 700;
+    line-height: 120%;
     margin: 0;
 }
 
 h3,
+.h3,
 .posting h2 {
     font-size: var(--h3-font-size);
-    font-weight: var(--h3-font-weight);
-    line-height: var(--h3-line-height);
-    letter-spacing: 0;
+    font-weight: 700;
+    line-height: 120%;
     margin-top: calc(40rem / 16);
     margin-bottom: 1rem;
 }
 
-h4 {
+h4,
+.h4 {
     font-size: 1rem;
+    font-weight: 600;
+    line-height: 130%;
 }
 
 h5 {
@@ -163,7 +161,7 @@ h6 {
     --bs-btn-padding-y: calc(1rem - 1px);
     --bs-btn-font-family: var(--bs-font-monospace);
     --bs-btn-font-size: 1rem;
-    --bs-btn-font-weight: 400;
+    --bs-btn-font-weight: 600;
     --bs-btn-line-height: 1;
     --bs-btn-border-width: calc(1rem / 16);
     --bs-btn-border-radius: 0;