Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/andrey-helldar/official-fontface

Set of fonts for official dealers
https://github.com/andrey-helldar/official-fontface
Last synced: about 2 months ago
JSON representation
Set of fonts for official dealers
Host: GitHub
URL: https://github.com/andrey-helldar/official-fontface
Owner: andrey-helldar
License: mit
Created: 2018-08-09T10:02:50.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2022-09-24T12:42:36.000Z (about 2 years ago)
Last Synced: 2024-10-29T16:02:00.240Z (about 2 months ago)
Language: SCSS
Homepage:
Size: 38.7 MB
Stars: 2
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project

README

        # official-fontface

Set of official fonts of companies in SCSS.





    

    

    



## 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 licensed under the [MIT License](LICENSE).