https://github.com/wikiline/webfont-ubuntu
https://github.com/wikiline/webfont-ubuntu
css less scss webfont woff woff2
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/wikiline/webfont-ubuntu
- Owner: wikiline
- License: mit
- Created: 2023-07-05T10:51:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-17T19:30:38.000Z (over 1 year ago)
- Last Synced: 2025-03-22T13:39:10.611Z (7 months ago)
- Topics: css, less, scss, webfont, woff, woff2
- Language: CSS
- Size: 553 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebFont Ubuntu
Package for integrating `Ubuntu` fonts in a web environment.
___
## Installation
This package can be deployed automatically using NPM:
```
npm i @wikiline/webfont-ubuntu
```
## Usage (CSS)
Font files are located in the `fonts/` directory. To import all fonts, you can use:
```css
body {
font-family: 'Ubuntu', sans-serif;
}
```
### Importing
```css
@import "~@wikiline/webfont-ubuntu/css/all.css";
@import "~@wikiline/webfont-ubuntu/css/all-normal.css";
@import "~@wikiline/webfont-ubuntu/css/all-italic.css";
```
To import specific fonts, you can use:
```css
@import "~@wikiline/webfont-ubuntu/css/weight-300.css";
@import "~@wikiline/webfont-ubuntu/css/weight-300-normal.css";
@import "~@wikiline/webfont-ubuntu/css/weight-300-italic.css";
@import "~@wikiline/webfont-ubuntu/css/weight-400.css";
@import "~@wikiline/webfont-ubuntu/css/weight-400-normal.css";
@import "~@wikiline/webfont-ubuntu/css/weight-400-italic.css";
@import "~@wikiline/webfont-ubuntu/css/weight-500.css";
@import "~@wikiline/webfont-ubuntu/css/weight-500-normal.css";
@import "~@wikiline/webfont-ubuntu/css/weight-500-italic.css";
@import "~@wikiline/webfont-ubuntu/css/weight-700.css";
@import "~@wikiline/webfont-ubuntu/css/weight-700-normal.css";
@import "~@wikiline/webfont-ubuntu/css/weight-700-italic.css";
```
Note: Also, each file is presented in a minimized form.
### Variables
Each font uses the following CSS variables to set the font display property with the default `swap` value if CSS
variables are not defined:
```css
:root {
--font-display: swap;
--font-display-ubuntu: swap;
}
```
## Usage (LESS)
Font files are located in the `fonts/` directory. To import all fonts, you can use:
```scss
body {
font-family: 'Ubuntu', sans-serif;
}
```
### Importing
```less
@import "~@wikiline/webfont-ubuntu/less/all";
@import "~@wikiline/webfont-ubuntu/less/all-normal";
@import "~@wikiline/webfont-ubuntu/less/all-italic";
```
To import specific fonts, you can use:
```less
@import "~@wikiline/webfont-ubuntu/less/_weight-300";
@import "~@wikiline/webfont-ubuntu/less/_weight-300-normal";
@import "~@wikiline/webfont-ubuntu/less/_weight-300-italic";
@import "~@wikiline/webfont-ubuntu/less/_weight-400";
@import "~@wikiline/webfont-ubuntu/less/_weight-400-normal";
@import "~@wikiline/webfont-ubuntu/less/_weight-400-italic";
@import "~@wikiline/webfont-ubuntu/less/_weight-500";
@import "~@wikiline/webfont-ubuntu/less/_weight-500-normal";
@import "~@wikiline/webfont-ubuntu/less/_weight-500-italic";
@import "~@wikiline/webfont-ubuntu/less/_weight-700";
@import "~@wikiline/webfont-ubuntu/less/_weight-700-normal";
@import "~@wikiline/webfont-ubuntu/less/_weight-700-italic";
```
### Variables
Each font uses the following LESS variables to set the font display property with the default `swap` value if SCSS
variables are not defined:
```less
@font-display: swap;
@font-display-ubuntu: swap;
```
or
```less
@import "~@wikiline/webfont-ubuntu/less/config/_variables";
```
## Usage (SCSS)
Font files are located in the `fonts/` directory. To import all fonts, you can use:
```scss
body {
font-family: 'Ubuntu', sans-serif;
}
```
### Importing
```scss
@import "~@wikiline/webfont-ubuntu/scss/all";
@import "~@wikiline/webfont-ubuntu/scss/all-normal";
@import "~@wikiline/webfont-ubuntu/scss/all-italic";
```
To import specific fonts, you can use:
```scss
@import "~@wikiline/webfont-ubuntu/scss/weight-300";
@import "~@wikiline/webfont-ubuntu/scss/weight-300-normal";
@import "~@wikiline/webfont-ubuntu/scss/weight-300-italic";
@import "~@wikiline/webfont-ubuntu/scss/weight-400";
@import "~@wikiline/webfont-ubuntu/scss/weight-400-normal";
@import "~@wikiline/webfont-ubuntu/scss/weight-400-italic";
@import "~@wikiline/webfont-ubuntu/scss/weight-500";
@import "~@wikiline/webfont-ubuntu/scss/weight-500-normal";
@import "~@wikiline/webfont-ubuntu/scss/weight-500-italic";
@import "~@wikiline/webfont-ubuntu/scss/weight-700";
@import "~@wikiline/webfont-ubuntu/scss/weight-700-normal";
@import "~@wikiline/webfont-ubuntu/scss/weight-700-italic";
```
### Variables
Each font uses the following SCSS variables to set the font display property with the default `swap` value if SCSS
variables are not defined:
```scss
$font-display: swap;
$font-display-ubuntu: swap;
```
## Licensing
It is important to always read the license for every font that you use. Most of the fonts in the collection use the SIL
Open Font License, v1.1. Some fonts use the Apache 2 license. The Ubuntu fonts use the Ubuntu Font License v1.0.