fix declaration of font face for FontAwesome font

.eleventy.js

@@ -36,7 +36,13 @@ module.exports = function (eleventyConfig, rest) {
         postcssPresetEnv({ browsers: 'defaults,not IE 11' }),
         (css, result) => {
           result.root.walk((node) => {
-            if (node.type === 'decl' && node.prop === 'font-display') node.remove()
+            if (node.type === 'decl') {
+              if (node.prop === 'font-display') {
+                node.remove()
+              } else if (node.prop === 'src' && node.parent.name === 'font-face' && node.value.includes('.eot')) {
+                node.parent.remove()
+              }
+            }
           })
           return result
         },

pages/assets/css/_doc.css

@@ -106,13 +106,14 @@
 }
 
 #editorPreview i.fa {
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: FontAwesome;
   hyphens: none;
   display: inline-block;
 }
 
 #editorPreview span.icon > i.fa {
-  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-  font: normal normal normal 1rem FontAwesome;
+  font-size: 1rem;
 }
 
 #editorPreview p code,

pages/assets/css/_font.css

@@ -9,3 +9,9 @@
 @import "@fontsource/source-code-pro/latin-400.css";
 @import "@fontsource/source-code-pro/latin-500.css";
 @import "@fontsource/source-code-pro/latin-600.css";
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('./files/fontawesome-webfont.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}