No Padding Module

    official-fontface

    1.6.2 • Public • Published

    official-fontface

    Set of official fonts of companies in SCSS.

    official-fontface

    Total Downloads Latest Stable Version License

    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.

    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
    
    1. Create scss files in src/scss/companies, as well as a directory named honda:
    src/scss/honda/
    src/scss/honda.scss
    
    1. 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
    
    1. 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');
    }
    1. 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";
    1. Add the file import to the main stylesheet src/scss/official-fontface.scss:
    @import "companies/honda";
    1. Finally, add a link to the file in the webpack settings:
    mix
        // ...
        .sass(path + 'companies/honda.scss', 'dist/css')
    1. 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.

    Install

    npm i official-fontface

    DownloadsWeekly Downloads

    55

    Version

    1.6.2

    License

    MIT

    Unpacked Size

    60.5 MB

    Total Files

    497

    Last publish

    Collaborators

    • helldar