Preload Inter font to avoid FOIT on slow connections

package.json

@@ -86,6 +86,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
     "@babel/runtime": "^7.12.5",
+    "@principalstudio/html-webpack-inject-preload": "^1.2.7",
     "@types/flux": "^3.1.9",
     "@types/modernizr": "^3.5.3",
     "@types/node": "^14.14.22",

src/vector/index.html

@@ -49,6 +49,15 @@
            <link rel="stylesheet" href="<%= file %>">
         <% }
     } %>
+
+    <% for (var i=0; i < htmlWebpackPlugin.tags.headTags.length; i++) {
+        var tag = htmlWebpackPlugin.tags.headTags[i];
+        var path = tag.attributes && tag.attributes.href;
+        if (path.indexOf("Inter") !== -1) { %>
+            <link rel="preload" as="font" href="<%= path %>" crossorigin="anonymous"/>
+        <% }
+    } %>
+
   </head>
 
 

webpack.config.js

@@ -4,6 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const webpack = require("webpack");
+const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');
 
 let ogImageUrl = process.env.RIOT_OG_IMAGE_URL;
 if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png';
@@ -386,6 +387,10 @@ module.exports = (env, argv) => {
                 chunks: ['usercontent'],
             }),
 
+            new HtmlWebpackInjectPreload({
+                files: [{ match: /.*\.(woff2?|ttf|eot)$/ }],
+            }),
+
             ...additionalPlugins,
         ],
 
@@ -418,6 +423,9 @@ module.exports = (env, argv) => {
             hot: false,
             inline: false,
         },
+        stats: {
+            warnings: false,
+        },
     };
 };
 

yarn.lock

@@ -1263,6 +1263,11 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
+"@principalstudio/html-webpack-inject-preload@^1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@principalstudio/html-webpack-inject-preload/-/html-webpack-inject-preload-1.2.7.tgz#0c1f0b32a34d814b36ce84111f89990441cc64e8"
+  integrity sha512-KJKkiKG63ugBjf8U0e9jUcI9CLPTFIsxXplEDE0oi3mPpxd90X9SJovo3W2l7yh/ARKIYXhQq8fSXUN7M29TzQ==
+
 "@sinonjs/commons@^1.7.0":
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.2.tgz#858f5c4b48d80778fde4b9d541f27edc0d56488b"
@@ -12128,6 +12133,11 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+velocity-animate@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-2.0.6.tgz#1811ca14df7fbbef05740256f6cec0fd1b76575f"
+  integrity sha512-tU+/UtSo3GkIjEfk2KM4e24DvpgX0+FzfLr7XqNwm9BCvZUtbCHPq/AFutx/Mkp2bXlUS9EcX8yxu8XmzAv2Kw==
+
 vendors@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"