# official-fontface Set of official fonts of companies in SCSS. ![official-fontface](https://user-images.githubusercontent.com/10347617/44003020-8225eea0-9e54-11e8-8df8-0c20f5856cc3.png)

Total Downloads Latest Stable Version License

## 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. ![example](https://user-images.githubusercontent.com/10347617/43971310-3abb54f0-9cd9-11e8-86bb-f5b8f962fe8f.png) ## 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 ``` Also, you can use certain fonts pack in your application: ```html ``` ## 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).