Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jesusgraterol/webfont-ubuntu
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.
https://github.com/jesusgraterol/webfont-ubuntu
font fonts google google-fonts sans sans-serif serif ubuntu web
Last synced: 25 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/jesusgraterol/webfont-ubuntu
- Owner: jesusgraterol
- License: mit
- Created: 2024-05-02T13:47:28.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-12-03T13:07:07.000Z (2 months ago)
- Last Synced: 2024-12-03T14:19:42.296Z (2 months ago)
- Topics: font, fonts, google, google-fonts, sans, sans-serif, serif, ubuntu, web
- Language: CSS
- Homepage: https://www.npmjs.com/package/webfont-ubuntu
- Size: 1.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebFont: Ubuntu
The `webfont-ubuntu` package simplifies self-hosting the [Ubuntu Font](https://fonts.google.com/specimen/Ubuntu) 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.
## Getting Started
Install the package:
```bash
npm install -S webfont-ubuntu
```Import it into your main stylesheet:
```css
@import url('/node_modules/webfont-ubuntu/dist/index.css');
```Register it in your application:
```css
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:
```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;
...
}
}
```
## Built With
- CSS
## License
[MIT](https://choosealicense.com/licenses/mit/)
## Acknowledgments
- [Google Fonts](https://fonts.google.com/specimen/Ubuntu)
## Deployment
Install dependencies:
```bash
npm install
```Build the package:
```bash
npm start
```Publish to `npm`:
```bash
npm publish
```