feat: set fonts for htmlized doc template (ietf-tools#5636)

Author: NGPixel

ietf/static/css/document_html.scss

@@ -6,6 +6,9 @@ $btn-font-family: inherit !default;
 $nav-link-font-weight: inherit !default;
 $tooltip-margin: inherit !default;
 
+$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;
+
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/maps";

ietf/static/css/ietf.scss

@@ -10,13 +10,15 @@ $enable-negative-margins: true;
 
 $popover-max-width: 100%;
 
-// Only import what we need:
-
-@import "bootstrap/scss/variables";
+// Override default fonts
 
 $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;
 
+// Only import what we need:
+
+@import "bootstrap/scss/variables";
+
 $h1-font-size: $font-size-base * 2.2;
 $h2-font-size: $font-size-base * 1.8;
 $h3-font-size: $font-size-base * 1.6;

ietf/templates/doc/document_html.html

@@ -18,6 +18,8 @@
             {% endif %}
         </title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <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">
         {% if request.COOKIES.pagedeps == 'inline' %}
             <script>{{ js|safe }}</script>
             <style>{{ css|safe }}</style>
@@ -28,10 +30,7 @@
             {% endif %}
             <script src="{% static 'ietf/js/document_html.js' %}"></script>
         {% endif %}
-        <link rel="alternate"
-              type="application/atom+xml"
-              title="Document changes"
-              href="/feed/document-changes/{{ doc.name }}/">
+        <link rel="alternate" type="application/atom+xml" title="Document changes" href="/feed/document-changes/{{ doc.name }}/">
         <meta name="description"
             {% if not snapshot and doc.get_state_slug == 'rfc' %}
                 content="{{ doc.title }} (RFC {{ doc.rfc_number }}{% if published %}, {{ published.time|date:'F Y' }}{% endif %}{% if obsoleted_by %}; obsoleted by {% for rel in obsoleted_by %}{{ rel.source.canonical_name|prettystdname}}{% if not forloop.last%}, {% endif %}{% endfor %}{% endif %})"
@@ -40,7 +39,7 @@
             {% endif %}>
         {% include "base/icons.html" %}
         {% include "doc/opengraph.html" %}
-         {% analytical_head_bottom %}
+        {% analytical_head_bottom %}
         <style>
             {# Force "text-overflow: ellipsis" to hide the beginning of a doc name #}
             .diff-form .select2-selection__rendered {