Skip to content

Latest commit

 

History

History
53 lines (40 loc) · 1.62 KB

fonts.md

File metadata and controls

53 lines (40 loc) · 1.62 KB

_fonts.scss

File includes helper for adding @font-face rules

List of content:

Mixin font-face

Description

Specify a font name, URL where it can be found, font weight and font style.

Parameters

  • $font-name - defines a name for the font (required)
  • $file-name - name of font files with path (required)
  • $weight - defines the boldness of the font. Default value is "normal".
  • $style - defines how the font should be styled. Default value is "normal".

Usage:

Case 1

Define font Poppins from ../fonts folder.

@include font-face(Poppins, '../fonts/poppins-v3-latin-ext-500', 500, italic);

Each kind of font's file have to have the same naming pattern. For example:

poppins-v3-latin-ext-500.eot
poppins-v3-latin-ext-500.woff
poppins-v3-latin-ext-500.ttf
poppins-v3-latin-ext-500.svg

Case 2 - Using mixin along with css-modules

NOTE: While using face-font mixin along with css-modules for best optimization you should place it in component which is used in whole application. Best place for that is inside scss file for CoreLayout component. Thanks to that it will be imported only once and not in every component. It's very important to place it outside of any class declaration.

Define font Graphik from ../fonts folder.

@include font-face(Graphik Regular, '../fonts/Graphik-Regular');
@include font-face(Graphik Light, '../fonts/Graphik-Light');
@include font-face(Graphik Medium, '../fonts/Graphik-Medium');
@include font-face(Graphik Semibold, '../fonts/Graphik-Semibold');

.sampleClass {
...
}