official-fontface
Version:
Set of official fonts of companies in SASS
282 lines (221 loc) • 11.1 kB
Markdown
# official-fontface
Set of official fonts of companies in SCSS.
<p align="center">
<a href="https://yarn.pm/official-fontface"><img src="https://img.shields.io/npm/dt/official-fontface.svg?style=flat-square" alt="Total Downloads" /></a>
<a href="https://yarn.pm/official-fontface"><img src="https://img.shields.io/npm/v/official-fontface.svg?style=flat-square" alt="Latest Stable Version" /></a>
<a href="LICENSE"><img src="https://img.shields.io/npm/l/official-fontface.svg?style=flat-square" alt="License" /></a>
</p>
## Installation
**npm** ([download](https://nodejs.org/en/))
```bash
npm i --save-dev official-fontface
```
**yarn** ([download](https://yarnpkg.com/getting-started/install))
```
yarn add --dev official-fontface
```
## What does it do?
The package provides only `@font-face` attribute. To use the desired font, you need to register its name in the `font-family` attribute of your CSS files.
Below is an example of how this can be done.
The package contains official fonts of companies:
* [Cars](#cars)
* [Fiat](#fiat)
* [Ford](#ford)
* [Honda](#honda)
* [Hyundai](#hyundai)
* [Isuzu](#isuzu)
* [Mercedes-Benz](#mercedes-benz)
* [Mitsubishi](#mitsubishi)
* [Opel](#opel)
* [Renault](#renault)
### Cars
#### Fiat
```css
.fiat-pro { font-family: 'fiatpro'; font-weight: 400; font-style: normal; }
.fiat-mopar { font-family: 'mopar-fiat'; font-weight: 400; font-style: normal; }
.fiat-mopar-private { font-family: 'mopar-private-fiat'; font-weight: 400; font-style: italic; }
```
#### Ford
```css
.ford-antenna-black { font-family: 'FordAntenna'; font-weight: 900; font-style: normal; }
.ford-antenna-bold { font-family: 'FordAntenna'; font-weight: 700; font-style: normal; }
.ford-antenna-semibold { font-family: 'FordAntenna'; font-weight: 600; font-style: normal; }
.ford-antenna-medium { font-family: 'FordAntenna'; font-weight: 500; font-style: normal; }
.ford-antenna-regular { font-family: 'FordAntenna'; font-weight: 400; font-style: normal; }
.ford-antenna-light { font-family: 'FordAntenna'; font-weight: 300; font-style: normal; }
.ford-antenna-comp-black { font-family: 'FordAntennaComp'; font-weight: 900; font-style: normal; font-stretch: extra-condensed; }
.ford-antenna-cond-bold { font-family: 'FordAntennaCond'; font-weight: 700; font-style: normal; }
.ford-antenna-cond-medium { font-family: 'FordAntennaCond'; font-weight: 500; font-style: normal; }
.ford-antenna-cond-regular { font-family: 'FordAntennaCond'; font-weight: 400; font-style: normal; }
```
#### Honda
```css
.honda-bold { font-family: 'AvenirNext'; font-weight: 700; font-style: normal; }
.honda-demibold { font-family: 'AvenirNext'; font-weight: 600; font-style: normal; }
.honda-medium { font-family: 'AvenirNext'; font-weight: 500; font-style: normal; }
.honda-medium-italic { font-family: 'AvenirNext'; font-weight: 500; font-style: italic; }
.honda-regular { font-family: 'AvenirNext'; font-weight: 400; font-style: normal; }
.honda-light { font-family: 'AvenirNext'; font-weight: 300; font-style: normal; }
```
#### Hyundai
```css
.hyundai-sans-head-bold { font-family: 'HyundaiSansHead'; font-weight: 700; font-style: normal; }
.hyundai-sans-head-medium { font-family: 'HyundaiSansHead'; font-weight: 500; font-style: normal; }
.hyundai-sans-head-regular { font-family: 'HyundaiSansHead'; font-weight: normal; font-style: normal; }
.hyundai-sans-head-light { font-family: 'HyundaiSansHead'; font-weight: 300; font-style: normal; }
.hyundai-sans-text-bold { font-family: 'HyundaiSansText'; font-weight: 600; font-style: normal; }
.hyundai-sans-text-bold-italic { font-family: 'HyundaiSansText'; font-weight: 600; font-style: italic; }
.hyundai-sans-text-medium { font-family: 'HyundaiSansText'; font-weight: 500; font-style: normal; }
.hyundai-sans-text-medium-italic { font-family: 'HyundaiSansText'; font-weight: 500; font-style: italic; }
.hyundai-sans-text-italic { font-family: 'HyundaiSansText'; font-weight: normal; font-style: italic; }
.hyundai-sans-text-regular { font-family: 'HyundaiSansText'; font-weight: normal; font-style: normal; }
```
#### Isuzu
```css
.isuzu-expand { font-family: 'Usuzi Expanded'; font-weight: normal; font-style: normal; }
```
#### Mercedes-Benz
```css
.mercedes-benz-a-regular { font-family: 'Corporate A'; font-weight: 400; }
.mercedes-benz-s-light { font-family: 'Corporate S'; font-weight: 200; }
.mercedes-benz-s-regular { font-family: 'Corporate S'; font-weight: 400; }
.mercedes-benz-s-demi { font-family: 'Corporate S'; font-weight: 600; }
.mercedes-benz-a-arab-regular { font-family: 'Corporate A Arab'; font-weight: 400; }
.mercedes-benz-s-arab-light { font-family: 'Corporate S Arab'; font-weight: 300; }
.mercedes-benz-s-arab-regular { font-family: 'Corporate S Arab'; font-weight: 400; }
.mercedes-benz-s-arab-demi { font-family: 'Corporate S Arab'; font-weight: 600; }
```
#### Mitsubishi
```css
.mitsubishi-regular { font-family: 'Bitsumishi'; font-weight: 400; font-style: normal; }
```
#### Opel
```css
.opel-regular { font-family: 'Opel Sans Condensed'; font-weight: 400; font-style: normal; font-stretch: condensed; }
.opel-regular-italic { font-family: 'Opel Sans Condensed'; font-weight: 400; font-style: italic; font-stretch: condensed; }
.opel-bold { font-family: 'Opel Sans Condensed'; font-weight: 700; font-style: normal; font-stretch: condensed; }
.opel-extra-bold { font-family: 'Opel Sans Condensed'; font-weight: 800; font-style: normal; font-stretch: condensed; }
```
#### Renault
```css
.renault-bold { font-family: 'Renault Life'; font-weight: 700; font-style: normal; }
.renault-bold-italic { font-family: 'Renault Life'; font-weight: 700; font-style: italic; }
.renault-regular { font-family: 'Renault Life'; font-weight: 400; font-style: normal; }
.renault-italic { font-family: 'Renault Life'; font-weight: 400; font-style: normal; }
.renault-light { font-family: 'Renault Life'; font-weight: 300; font-style: normal; }
.renault-light-italic { font-family: 'Renault Life'; font-weight: 300; font-style: italic; }
```
## Examples
And see [test.html](tests/test.html) as example.
## Using
### SCSS
You can use all fonts:
```scss
@import "~official-fontface/src/scss/official-fontface";
```
Or you can use certain fonts pack in your application:
```scss
@import "~official-fontface/src/scss/companies/fiat";
@import "~official-fontface/src/scss/companies/ford";
@import "~official-fontface/src/scss/companies/honda";
@import "~official-fontface/src/scss/companies/hyundai";
@import "~official-fontface/src/scss/companies/isuzu";
@import "~official-fontface/src/scss/companies/mercedes-benz";
@import "~official-fontface/src/scss/companies/mitsubishi";
@import "~official-fontface/src/scss/companies/opel";
@import "~official-fontface/src/scss/companies/renault";
```
Or connect a specific font. For example:
```scss
@import "~official-fontface/src/scss/companies/mercedes-benz/corporate-a-condensed";
@import "~official-fontface/src/scss/companies/hyundai/hyundai-sans-head-regular";
@import "~official-fontface/src/scss/companies/ford/fordantennacond-regular";
@import "~official-fontface/src/scss/companies/opel/opel_sans-regular";
```
### CSS
Copy the folders `dist/css` and `dist/fonts` to root dir of your project and connect them:
```html
<head>
<!-- ... -->
<link href="/css/official-fontface.css" rel="stylesheet" media="screen,projection">
</head>
```
Also, you can use certain fonts pack in your application:
```html
<head>
<!-- ... -->
<link href="/css/ford.css" rel="stylesheet" media="screen,projection">
<link href="/css/hyundai.css" rel="stylesheet" media="screen,projection">
<link href="/css/isuzu.css" rel="stylesheet" media="screen,projection">
<link href="/css/mercedes-benz.css" rel="stylesheet" media="screen,projection">
<link href="/css/mitsubishi.css" rel="stylesheet" media="screen,projection">
</head>
```
## For contributors
You can easily add any official dealer fonts by following the steps.
For example, add fonts `Honda`:
1. Create `honda` folder in `src/fonts` and storing files:
```
src/fonts/honda/AvenirNext-Light/
AvenirNext-Light.eot
AvenirNext-Light.svg
AvenirNext-Light.ttf
AvenirNext-Light.woff
AvenirNext-Light.woff2
src/fonts/honda/AvenirNext-Regular/
AvenirNext-Regular.eot
AvenirNext-Regular.svg
AvenirNext-Regular.ttf
AvenirNext-Regular.woff
AvenirNext-Regular.woff2
```
2. Create `scss` files in `src/scss/companies`, as well as a directory named `honda`:
```
src/scss/honda/
src/scss/honda.scss
```
3. In the folder `src/scss/honda`, create style files for each font, named files in `kebab-case`:
```
src/scss/honda/_avenirnext-light.scss
src/scss/honda/_avenirnext-regular.scss
```
4. Next, fill the files with styles. For example:
```scss
@font-face {
font-family: 'AvenirNext-Light';
font-weight: 300;
font-style: normal;
src: local('AvenirNext-Light'),
local('Avenir Next Cyr W00 Light'),
url('../../../fonts/honda/AvenirNext-Light/AvenirNext-Light.eot'),
url('../../../fonts/honda/AvenirNext-Light/AvenirNext-Light.eot?#iefix') format('embedded-opentype'),
url('../../../fonts/honda/AvenirNext-Light/AvenirNext-Light.woff2') format('woff2'),
url('../../../fonts/honda/AvenirNext-Light/AvenirNext-Light.woff') format('woff'),
url('../../../fonts/honda/AvenirNext-Light/AvenirNext-Light.svg#DaimlerCAC-Regular') format('svg');
}
```
5. After that, add links to these files in `src/scss/honda.scss` file:
```scss
@import "honda/avenirnext-bold";
@import "honda/avenirnext-demibold";
@import "honda/avenirnext-medium";
@import "honda/avenirnext-mediumitalic";
@import "honda/avenirnext-regular";
@import "honda/avenirnext-light";
```
6. Add the file import to the main stylesheet `src/scss/official-fontface.scss`:
```scss
@import "companies/honda";
```
7. Finally, add a link to the file in the webpack settings:
```js
mix
// ...
.sass(path + 'companies/honda.scss', 'dist/css')
```
8. Profit!
Or, simply by creating a [issue](https://github.com/andrey-helldar/official-fontface/issues) and attaching the font files (or, at least, the name of the font and the company that uses it) to it.
## License
This package is released under the [MIT License](LICENSE).