Font utilities

Installation

npm i @superflycss/utilities-fonts

Usage

The root package contains all Google Fonts Utilities. That means all the fonts and all the supporting weights..

Load all fonts utilities like this:

@import '@superflycss/utilities-fonts';
...

Or load them by idividual sub packages.  For example:

``` css
@import '@superflycss/utilities-fonts/lato';
...

To use the lato font at normal weight apply the utility like this:

<h1 class="u-font-lato-400">A Font Lato Heading Normal Font Weight (400)</h1>

To use the italic lato font at normal weight apply the utility like this:

<h1 class="u-font-lato-400-italic">A Font Lato Heading Normal Font Weight (400)</h1>

Now run the build with sfc build and postcss font-magician will create the font face rules in the target build file.

Have a look here for all the font face rules the build generates.

Dependency Install

This will install all dependencies including the SuperflyCSS CLI.

npm run i

Clone

git clone [email protected]:superflycss/utilities-fonts.git

Build

npm run pub

Publish

npm run pub

Related Articles

• Quickly Generate Google Fonts Preview

Snippets

This snippet contains @import statements for all the font utility pakcage. This enables developers to quickly add imports for the fonts of their choosing.

• Imports for all Font Utility Packages