Use web fonts

diff --git a/index.html b/index.html
index cfcde4696023efbeace837da0f96ce42d3f546c0..ce1300d7cadb1cb767085f3afbadcaee34e7b2b6 100644 (file)
--- a/index.html
+++ b/index.html
@@ -8,11 +8,25 @@
   <meta property="og:description" content="A reference page for this extremely specific combination of CSS properties that are required to truncate a paragraph after a specified number of lines.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://cssforlineclampellipsis.com/">
+  <link rel="preconnect" href="https://rsms.me/">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" >
   <link rel="icon" href="data:,">
   <title>CSS for line clamp ellipsis</title>
   <style>
+    :root {
+      font-family: 'Inter', sans-serif;
+    }
+
+    @supports (font-variation-settings: normal) {
+      :root {
+        font-family: 'Inter var', sans-serif;
+      }
+    }
+
     body {
-      font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
       background: hsl(216deg 50% 97%);
       color: hsl(216deg 50% 5%);
     }
@@ -59,6 +73,7 @@
 
     pre,
     code {
+      font-family: 'Source Code Pro', monospace;
       background: hsl(216deg 50% 90%);
       border-radius: 4px;
       border: 1px solid hsl(216deg 50% 75%);
@@ -104,17 +119,17 @@
     .height-resizable {
       resize: vertical;
       min-block-size: 21px;
-      max-block-size: 294px;
+      max-block-size: 262px;
     }
 
     .height-resizable-container {
-      min-block-size: 296px;
+      min-block-size: 264px;
     }
 
     .both-resizable {
       resize: both;
       min-block-size: 21px;
-      max-block-size: 294px;
+      max-block-size: 262px;
       min-inline-size: 50px;
       max-inline-size: min(1080px, 100%);
     }