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

  801 65,358 9.8 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 featured

  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 256 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,680 8.9 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

  508 43,154 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!

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project