The webfont-ubuntu
package simplifies self-hosting the Ubuntu Font for your web applications. This means you can use the font without relying on external services. It works with both vanilla CSS and popular frameworks like Tailwind.
Install the package:
$ npm install -S webfont-ubuntu
Import it into your main stylesheet:
@import url('/node_modules/webfont-ubuntu/dist/index.css');
Register it in your application:
html {
font-family: "Ubuntu", sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
font-display: swap;
...
}
Alternatively, if you're using Tailwind CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: "Ubuntu", sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
font-display: swap;
...
}
}
- CSS
- Install dependencies:
$ npm install
- Build the package:
$ npm start
- Publish to
npm
:
$ npm publish