From 1188b12eb64a0a164d6d9a2417e4aa1542bd6e6b Mon Sep 17 00:00:00 2001
From: Vadim Makeev <pepelsbey@gmail.com>
Date: Mon, 18 Jul 2022 09:54:11 +0200
Subject: [PATCH] Update web snippet for better performance

---
 README.md       | 16 ++++++++++++----
 docs/index.html | 12 +++++++++---
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index a90a3015a..54326247b 100644
--- a/README.md
+++ b/README.md
@@ -29,11 +29,20 @@ several [OpenType features](https://rsms.me/inter/#features), like contextual al
 - To use Inter on a web page, use the official
 [CDN distribution:](https://rsms.me/inter/inter.css)
 
+```html
+<link rel="preconnect" href="https://rsms.me/">
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+```
+
 ```css
-@import url('https://rsms.me/inter/inter.css');
-html { font-family: 'Inter', sans-serif; }
+html {
+  font-family: 'Inter', sans-serif;
+}
+
 @supports (font-variation-settings: normal) {
-  html { font-family: 'Inter var', sans-serif; }
+  html {
+    font-family: 'Inter var', sans-serif;
+  }
 }
 ```
 
@@ -149,4 +158,3 @@ Translating between EM units and pixels:
 - Rasterized at 11px: 1px = 256 units
 - Rasterized at 22px: 1px = 128 units
 - Rasterized at 44px: 1px =  64 units
-
diff --git a/docs/index.html b/docs/index.html
index 86efa5c58..28ab65822 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -87,10 +87,16 @@ endfor
         the font files. If you're making a web thing, you can use the following CSS.
         <!-- or get it from <a href="https://fonts.google.com/specimen/Inter">Google Fonts</a>. -->
       </p>
-      <pre>@import url('https://rsms.me/inter/inter.css');
-html { font-family: 'Inter', sans-serif; }
+      <pre>&lt;link rel=&quot;preconnect&quot; href=&quot;https://rsms.me/&quot;&gt;
+&lt;link rel=&quot;stylesheet&quot; href=&quot;https://rsms.me/inter/inter.css&quot;&gt;</pre>
+      <pre>html {
+  font-family: 'Inter', sans-serif;
+}
+
 @supports (font-variation-settings: normal) {
-  html { font-family: 'Inter var', sans-serif; }
+  html {
+    font-family: 'Inter var', sans-serif;
+  }
 }</pre>
     </c>