feat: change fonts to Inter and Noto Sans Mono (ietf-tools#5628)

NGPixel · web-flow · commit 3d6ca172ce8a · 2023-05-15T16:37:00.000-05:00
diff --git a/client/agenda/AgendaScheduleList.vue b/client/agenda/AgendaScheduleList.vue
@@ -1061,7 +1061,7 @@ onBeforeUnmount(() => {
 
   &-cell-ts {
     border-right: 1px solid $gray-300 !important;
-    // -> Use system font instead of Montserrat so that all digits align vertically
+    // -> Use system font instead of Inter so that all digits align vertically
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 1rem;
     font-weight: 700;
diff --git a/client/index.html b/client/index.html
@@ -8,6 +8,8 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
+    <link href="https://static.ietf.org/fonts/inter/import.css" rel="stylesheet">
+    <link href="https://static.ietf.org/fonts/noto-sans-mono/import.css" rel="stylesheet">
   </head>
   <body>
     <div class="pt-3 container-fluid">
diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
@@ -14,6 +14,9 @@ $popover-max-width: 100%;
 
 @import "bootstrap/scss/variables";
 
+$font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
 $h1-font-size: $font-size-base * 2.2;
 $h2-font-size: $font-size-base * 1.8;
 $h3-font-size: $font-size-base * 1.6;
diff --git a/ietf/templates/base.html b/ietf/templates/base.html
@@ -15,12 +15,8 @@
             {% block title %}No title{% endblock %}
         </title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        {% comment Halloween %}
-        <link href='https://fonts.googleapis.com/css?family=IM+Fell+English+SC|IM+Fell+DW+Pica:400,400italic|Nova+Mono|IM+Fell+English:400,400italic&subset=latin-ext,latin' rel='stylesheet'>
-        {% endcomment %}
-        <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=Montserrat:wght@300..700&display=swap" rel="stylesheet">
+        <link href="https://static.ietf.org/fonts/inter/import.css" rel="stylesheet">
+        <link href="https://static.ietf.org/fonts/noto-sans-mono/import.css" rel="stylesheet">
         <link rel="stylesheet" href="{% static 'ietf/css/ietf.css' %}">
         <link rel="stylesheet" href="{% static 'ietf/css/select2.css' %}">
         <style>
diff --git a/ietf/templates/meeting/agenda.html b/ietf/templates/meeting/agenda.html
@@ -16,9 +16,6 @@
     {% vite_asset 'client/main.js' %}
 {% endblock %}
 {% block morecss %}
-body {
-    font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
 
 /* Avoid hiding the page footer when on mobile with the footer toolbar overlay */
 @media screen and (max-width: 992px) {
