Load the Inter font and improve text readability

assets/css/style.css

@@ -242,8 +242,12 @@
   }
 }
 
-/* Fonts */
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
+/* Fonts. Inter is loaded in head.html. Without this rule, text that has no
+   inter-* class, such as paragraphs written in Markdown, uses Bootstrap's
+   system font stack. */
+body {
+  font-family: "Inter", sans-serif !important;
+}
 
 /* Variables */
 :root {
@@ -1382,3 +1386,18 @@ a.next-page-btn:hover {
 .content pre::-webkit-scrollbar-thumb:hover {
   background: #afb8c1 !important;
 }
+
+/* Line length. Running text is capped at about 80 characters per line.
+   Paragraphs and list items that hold an image, video, embed, table, code
+   block or other layout keep the full width of their container. */
+main :is(p, li):not(:has(img, video, iframe, table, pre, div)) {
+  max-width: 40em !important;
+}
+
+/* Keep centered paragraphs centered once they are narrower than their
+   container. */
+main .text-center p,
+main p.text-center {
+  margin-left: auto;
+  margin-right: auto;
+}

layouts/news/single.html

@@ -57,7 +57,7 @@ <h3 class="inter-700 dark-900 text-48-responsive">{{ .Title | markdownify }}</h3
                         </div>
                         {{ end }}
                     </div>
-                    <div class="inter dark-500 mt-4">
+                    <div class="inter dark-700 mt-4">
                         {{ .Content }}
                     </div>
                     {{ with .Params.ext_link }}

layouts/partials/essentials/head.html

@@ -45,3 +45,8 @@
 
 <!-- Custom CSS fixes -->
 <link rel="stylesheet" href="/css/list-alignment-fix.css">
+
+{{/*  Inter, the typeface that the font-family rules in style.css name  */}}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap">

layouts/partials/shared/header.html

@@ -151,7 +151,7 @@
               <div class="navbar-right ms-lg-3">
                 <a
                   href="{{ site.Params.cta.link | relURL }}"
-                  class="btn btn-primary bg-second scale border-second animate">
+                  class="btn btn-primary bg-second scale border-second animate text-nowrap">
                   {{ site.Params.cta.text }}
                 </a>
               </div>