ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(font): serve inter var from public (#2403)

Browse Source 
* perf(font): load Inter var from HTML, not JS

* perf(font): use font-display block

Prevents FOUT.

* perf(font): preload font

Further removes font from the critical render path.
This commit is contained in:
Zach Pomerantz 2021-09-21 12:44:20 -07:00 committed by GitHub
parent 91de599f12
commit 9fa3b70475
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/fonts/Inter-roman.var.woff2 Normal file
View File

Binary file not shown.

20
public/index.html
View File

@ -26,15 +26,31 @@
<link rel="preconnect" href="https://www.google-analytics.com/"> <link rel="preconnect" href="https://www.google-analytics.com/">
<link rel="preload" href="%PUBLIC_URL%/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin>
<style> <style>
* { * {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
box-sizing: border-box; box-sizing: border-box;
} }
/**
Explicitly load Inter var from public/ so it does not block LCP's critical path.
*/
@font-face {
font-family: 'Inter custom';
font-weight: 100 900;
font-style: normal;
font-display: block;
font-named-instance: 'Regular';
src: url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2 supports variations(gvar)"),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2-variations"),
url(%PUBLIC_URL%/fonts/Inter-roman.var.woff2) format("woff2");
}
@supports (font-variation-settings: normal) { @supports (font-variation-settings: normal) {
* { * {
font-family: 'Inter var', sans-serif; font-family: 'Inter custom', sans-serif;
} }
} }
@ -92,7 +108,7 @@
<!-- The root is the container of the app --> <!-- The root is the container of the app -->
<div id="root"> <div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app --> <!-- Triggers the font to load immediately and then is replaced by the app -->
<div style="visibility: hidden">X</div> <div>&emsp;</div>
</div> </div>
<div id="background-radial-gradient"></div> <div id="background-radial-gradient"></div>