official-fontface v1.6.2

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
  • Ford
  • Honda
  • Hyundai
  • Isuzu
  • Mercedes-Benz
  • Mitsubishi
  • Opel
  • Renault

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:

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:

@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:

@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:

@import "companies/honda";

7. Finally, add a link to the file in the webpack settings:

mix
    // ...
    .sass(path + 'companies/honda.scss', 'dist/css')

8. 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.