Skip to main content

Typography

loonar-wp/assets/styles/config/
├── colors/
├── layout/
├── typography/
│   ├── custom-fonts/
│   │   └── _index.scss
│   ├── _colors.scss
│   ├── _stacks.scss
│   └── _weights.scss
└── z-index/

In this phase you're going to set up the entire typography for the project.

Font Colors​

In the previous step you've defined the colors used in the entire project. Now, you're going to define the colors used only for the typography. By doing so we ensure that in the future we can easily change typography colors, without affecting the entire website.

_colors.scss
@use '../colors' as color;

$first: color.$first;
$second: color.$fourth;
$third: color.$fifth;

You'll be able to use these colors within your component through the font-color(first) function.

Font Weights​

The process of adding font weights is the same as defining the project colors.

_weights.scss
$thin: 100;
$extra-light: 200;
$light: 300;
$regular: 400;
$medium: 500;
$semi-bold: 600;
$bold: 700;
$extra-bold: 800;
$black: 900;

You'll be able to use these font weights within your component through the font-weight(thin) function.

Custom fonts faces​

caution

Do not create nor assign the font-family to a variable in this phase, as you will do so later on.

In this step you're going to define font faces for the typography.

CDN Fonts​

Whenever you want to use a font from a CDN, @import the font providing the url.

custom-fonts/_index.scss
// import the font from the CDN
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

Self-hosted fonts​

If your project uses a paid font, and you have to host it on the project's server you need to first place the font files under loonar-wp/assets/fonts/ directory.

loonar-wp/assets/fonts/
└── example-font/
    ├── example-font-regular.woff2
    ├── example-font-regular-italic.woff2
    ├── example-font-bold.woff2
    └── example-font-bold-italic.woff2

Next, define the @font-face directives and @forward the file to make it accessible to loonar module.

custom-fonts/_example-font.scss
@use '../weights' as fw;

@font-face {
  font-family: 'Example Font'; // remember the name!
  font-style: regular;
  font-weight: fw.$regular;
  font-display: swap;
  src: url('@fonts/example-font/example-font-regular.woff2') format('woff2');
}`

// rest of @font-face directives
custom-fonts/_index.scss
@forward 'example-font';

Font Stacks​

The process of adding font stacks is similar as defining the project colors or font weights. However, you will need to pass the font names that come with @font-face declarations, provided by you or within the CDN url.

_stacks.scss
$main: 'Open Sans', sans-serif; // CDN
$second: 'Example Font', sans-serif; // self hosted example

You'll be able to use these font stacks within your component through the font-stack(main) function.