Using Fontsource With 11ty

• rollup-plugin-postcss

  3 672 0.0 JavaScript

  Seamless integration between Rollup and PostCSS.

import { nodeResolve } from "@rollup/plugin-node-resolve"; import postcss from "rollup-plugin-postcss"; import copy from "rollup-plugin-copy"; export default [ { input: "src/js/combine.js", output: { file: "src/js/minified/index.bundle.js", sourcemap: false, } plugins: [ nodeResolve(), postcss({ extract: true, // no way to move output to another folder https://github.com/egoist/rollup-plugin-postcss/issues/250 minimize: true, }), copy({ targets: [ { src: "src/js/minified/index.bundle.css", dest: "src/styles/minified", rename: "fonts.bundle.css", }, ], verbose: true, hook: "writeBundle", }) ], } ];

• vite

  787 64,769 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

Slinkity uses vite for bundling which is great, but it became a problem for me. I have a relatively old and large project with some custom configurations which came in the way of how vite does things, so migrating to vite resulted in a mess. The migration needs more time. So, I decided to take another approach which might be not so good.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• rollup-plugin-copy

  1 254 3.2 JavaScript

  Copy files and folders using Rollup

Now, to extract css, I used the postcss rollup plugin and the rollup copy plugin to copy the generated css file to the desired directory. I had to use rollup-plugin-copy because of this issue.

• fontsource

  40 4,564 9.1 TypeScript

  Self-host Open Source fonts in neatly bundled NPM packages.

  

I stumbled upon fontsource.org the other day and I found the idea of installing fonts from npm packages appealing.

• astro

  503 42,342 10.0 TypeScript

  The web framework for content-driven websites. ⭐️ Star to support our work!

  

At first, I used it in my personal site built with Astro. The process was incredibly simple. You just have to import fonts in your base layout file and that's it. You are ready to use it in your CSS!

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project