1. roboto-fontface
A simple package providing the Roboto fontface.
roboto-fontface
Package: roboto-fontface
Created by: choffmeister
Last modified: Sun, 26 Jun 2022 13:46:14 GMT
Version: 0.10.0
License: Apache-2.0
Downloads: 485,102
Repository: https://github.com/choffmeister/roboto-fontface-bower

Install

npm install roboto-fontface
yarn add roboto-fontface

Roboto fontface

A simple package providing the Roboto fontface. The font was created by Christian Robertson.

Installing

Assuming you have NodeJS, NPM and Bower installed globally just open up a terminal, navigate to your projects root directory and then execute

# install via NPM
$ npm install roboto-fontface --save

# install via Bower
$ bower install roboto-fontface --save

Usage

There're several files in the css/ subdirectory. Import them in your project
to have access to "Roboto" font face:

  • css/roboto/roboto-fontface.css - whole font family compiled to CSS

  • css/roboto/sass/roboto-fontface.scss - whole font family in SCSS

  • css/roboto/less/roboto-fontface.less - whole font family in LESS

  • css/roboto-condensed/roboto-condensed-fontface.css - whole font family compiled to CSS

  • css/roboto-condensed/sass/roboto-condensed-fontface.scss - whole font family in SCSS

  • css/roboto-condensed/less/roboto-condensed-fontface.less - whole font family in LESS

  • css/roboto-slab/roboto-slab-fontface.css - whole font family compiled to CSS

  • css/roboto-slab/sass/roboto-slab-fontface.scss - whole font family in SCSS

  • css/roboto-slab/less/roboto-slab-fontface.less - whole font family in LESS

Importing whole family may be unnecessary and lead to huge build, so if you are
using SCSS or LESS, you can import only individual weights by importing for example:

  • css/roboto/sass/roboto-fontface-black.scss
  • css/roboto/sass/roboto-fontface-black-italic.scss

Hinting

Some of the included font files have hinting.

Files Hinting
.woff yes
.woff2 ?

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin