https://github.com/jesusgraterol/webfont-roboto

The webfont-roboto package simplifies self-hosting the Roboto 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-roboto

font fonts google google-fonts roboto sans sans-serif serif web

Last synced: 25 days ago
JSON representation

The webfont-roboto package simplifies self-hosting the Roboto 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-roboto
• Owner: jesusgraterol
• License: mit
• Created: 2024-05-02T13:05:41.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-12-03T13:09:01.000Z (2 months ago)
• Last Synced: 2025-01-04T08:08:08.682Z (about 1 month ago)
• Topics: font, fonts, google, google-fonts, roboto, sans, sans-serif, serif, web
• Language: CSS
• Homepage: https://www.npmjs.com/package/webfont-roboto
• Size: 800 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# WebFont: Roboto

The `webfont-roboto` package simplifies self-hosting the [Roboto Font](https://fonts.google.com/specimen/Roboto) 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-roboto

```

Import it into your main stylesheet:

```css

@import url('/node_modules/webfont-roboto/dist/index.css');

```

Register it in your application:

```css

html {

  font-family: "Roboto", 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: "Roboto", 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/Roboto)




## Deployment

Install dependencies:

```bash

npm install

```

Build the package:

```bash

npm start

```

Publish to `npm`:

```bash

npm publish

```