Update web snippet for better performance

This commit is contained in:
Vadim Makeev 2022-07-18 09:54:11 +02:00
parent 5404f90640
commit 1188b12eb6
2 changed files with 21 additions and 7 deletions

View file

@ -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

View file

@ -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>