добавляет шрифты Open Sans

.eleventy.js

@@ -20,6 +20,8 @@ module.exports = (eleventyConfig) => {
     }
   })
 
+  eleventyConfig.addPassthroughCopy('./src/fonts/')
+
   eleventyConfig.addPlugin(svgContents)
   eleventyConfig.addPlugin(faviconPlugin, {
     destination: './dist'

package-lock.json

@@ -4475,6 +4475,17 @@
             "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
             "dev": true
         },
+        "postcss-import": {
+            "version": "14.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+            "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+            "dev": true,
+            "requires": {
+                "postcss-value-parser": "^4.0.0",
+                "read-cache": "^1.0.0",
+                "resolve": "^1.1.7"
+            }
+        },
         "postcss-js": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@@ -5006,6 +5017,15 @@
                 }
             }
         },
+        "read-cache": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+            "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+            "dev": true,
+            "requires": {
+                "pify": "^2.3.0"
+            }
+        },
         "read-chunk": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-1.0.1.tgz",

package.json

@@ -21,6 +21,7 @@
         "eslint-plugin-n": "^15.2.0",
         "eslint-plugin-promise": "^6.0.0",
         "postcss": "^8.4.13",
+        "postcss-import": "^14.1.0",
         "rollup": "^2.72.1",
         "rollup-plugin-terser": "^7.0.2",
         "tailwindcss": "^3.0.24"

postcss.config.js

@@ -6,6 +6,7 @@ module.exports = {
   from: 'src/css/index.css',
   to: 'dist/css/index.css',
   plugins: [
+    require('postcss-import'),
     require('tailwindcss'),
     require('autoprefixer'),
     ...(process.env.NODE_ENV === 'production' ? [cssnano] : [])

src/css/fonts.css

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: normal;
+  src: url("/fonts/OpenSans-Regular.woff2") format("woff2"),
+    url("/fonts/OpenSans-Regular.woff") format("woff"),
+    url("/fonts/OpenSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-style: bold;
+  font-weight: bold;
+  src: url("/fonts/OpenSans-Bold.woff2") format("woff2"),
+    url("/fonts/OpenSans-Bold.woff") format("woff"),
+    url("/fonts/OpenSans-Bold.ttf") format("truetype");
+}

src/css/index.css

@@ -1,3 +1,4 @@
-@tailwind base;
+@import 'fonts.css';
-@tailwind components;
+@import 'tailwindcss/base';
-@tailwind utilities;
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

src/pages/index.njk

@@ -6,4 +6,7 @@ layout: 'base.njk'
     <a href="/" class="block rounded-xl p-1">
         {{ '/src/images/logo.svg' | svgContents("max-h-24 block w-[50vw]") | safe }}
     </a>
-</header>
+</header>
+<main>
+    <p>Привет мир!</p>
+</main>

tailwind.config.js

@@ -1,10 +1,16 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
   content: [
     './src/css/**/*',
     './src/pages/**/*'
   ],
   theme: {
-    extend: {}
+    extend: {
+      fontFamily: {
+        sans: ['"Open Sans"', ...defaultTheme.fontFamily.sans]
+      }
+    }
   },
   plugins: []
 }