official-fontface
Set of official fonts of companies in SCSS.
Installation
npm (download)
npm i --save-dev official-fontface
yarn (download)
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
Fiat
.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
.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
.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
.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
.isuzu-expand { font-family: 'Usuzi Expanded'; font-weight: normal; font-style: normal; }
Mercedes-Benz
.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
.mitsubishi-regular { font-family: 'Bitsumishi'; font-weight: 400; font-style: normal; }
Opel
.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
.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 as example.
Using
SCSS
You can use all fonts:
@import "~official-fontface/src/scss/official-fontface";
Or you can use certain fonts pack in your application:
@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:
@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:
<head>
<link href="/css/official-fontface.css" rel="stylesheet" media="screen,projection">
</head>
Also, you can use certain fonts pack in your application:
<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
:
- 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
- Create
scss
files in src/scss/companies
, as well as a directory named honda
:
src/scss/honda/
src/scss/honda.scss
- 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
- Next, fill the files with styles. For example:
@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');
}
- After that, add links to these files in
src/scss/honda.scss
file:
@import "honda/avenirnext-bold";
@import "honda/avenirnext-demibold";
@import "honda/avenirnext-medium";
@import "honda/avenirnext-mediumitalic";
@import "honda/avenirnext-regular";
@import "honda/avenirnext-light";
- Add the file import to the main stylesheet
src/scss/official-fontface.scss
:
@import "companies/honda";
- Finally, add a link to the file in the webpack settings:
mix
.sass(path + 'companies/honda.scss', 'dist/css')
- Profit!
Or, simply by creating a issue 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.