Bundle and inline web fonts

diff --git a/Inter.woff2 b/Inter.woff2
new file mode 100644 (file)
index 0000000..10aa9ea
Binary files /dev/null and b/Inter.woff2 differ

diff --git a/Inter_Bold.woff2 b/Inter_Bold.woff2
new file mode 100644 (file)
index 0000000..10aa9ea
Binary files /dev/null and b/Inter_Bold.woff2 differ

diff --git a/Source_Code_Pro.woff2 b/Source_Code_Pro.woff2
new file mode 100644 (file)
index 0000000..cb77957
Binary files /dev/null and b/Source_Code_Pro.woff2 differ

diff --git a/index.html b/index.html
index 264f5e09fb58002be78f0ab9c3c845cbf3054924..e467224a6753fec5f63f69eae09d7e8fd6e66c3a 100644 (file)
--- a/index.html
+++ b/index.html
@@ -9,23 +9,29 @@
   <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="canonical" href="https://cssforlineclampellipsis.com/">
   <link rel="icon" href="data:,">
   <title>CSS for line clamp ellipsis</title>
   <style>
-    :root {
-      font-family: 'Inter', sans-serif;
+    @font-face {
+      font-family: 'Inter';
+      font-weight: 400;
+      src: local('Inter'), url('/Inter.woff2') format('woff2');
     }
 
-    @supports (font-variation-settings: normal) {
-      :root {
-        font-family: 'Inter var', sans-serif;
-      }
+    @font-face {
+      font-family: 'Inter';
+      font-weight: 700;
+      src: local('Inter'), url('/Inter_Bold.woff2') format('woff2');
+    }
+
+    @font-face {
+      font-family: 'Source Code Pro';
+      src: local('Source Code Pro'), url('/Source_Code_Pro.woff2') format('woff2');
+    }
+
+    :root {
+      font-family: 'Inter', sans-serif;
     }
 
     body {
@@ -70,7 +76,7 @@
     }
 
     p {
-      inline-size: min(80ch, 100%);
+      inline-size: min(51ch, 100%);
     }
 
     p:not(.line-clamp, .dynamic-line-clamp) {