Nondeterministic Polynomial Munchies

    @fylgja/fontface

    2.1.1 • Public • Published

    Fylgja - FontFace

    NPM version

    The Fylgja font-face mixin makes it super easy to load fonts.

    It will set all required settings for a good font-face automatically. Which are still configurable if needed.

    Table of Contents

    Installation

    npm i -D @fylgja/fontface

    How to use

    Include the font-face package in to your code via;

    Include the utilkit package in to your code via;

    @import "@fylgja/fontface"; // (DartSass, LibSass 3.6)
    @import "@fylgja/fontface/index"; // old way

    To load a font. Call the font-face mixin. Add your font name + suffix of the font.

    All the other steps will be created by the mixin automatically, (See config).

    Input:

    @include font-face("Roboto", "Bold Italic");

    Output:

    @font-face {
      font-family: "Roboto";
      src:
        local("Roboto Bold Italic"),
        local("Roboto-BoldItalic"),
        url("../fonts/Roboto-BoldItalic.woff2") format("woff2"),
        url("../fonts/Roboto-BoldItalic.woff") format("woff");
      unicode-range: "U+0000—00FF";
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }

    Config

    There is no real config except the mixin options that you can pass per font.

    Most options are filled in. if left to its default value.

    For this reason it is better to call a specific option. Instead changing the complete mixin options. Until you've reached the option you need to change.

    Examples;

    Bad way:

    @include font-face("Roboto", "Regular", 400, "U+0-10FFFF", "../assets");

    Good way:

    @include font-face("Roboto", "Regular", $path: "../assets");
    Options Default value Description
    $name Name of the font family
    $suffix null Suffix (e.g. Regular or Bold)
    $styles $suffix Styles (e.g. 700i or 700 italic)
    $unicode $u-latin Unicode range of the the font face.
    $path '../fonts' Path to the font file
    $file-name null File name of the font
    $formats local, woff2, woff The file formats of the font-face.
    $load swap Loading option of the font

    If an option is NULL it will be filled in by the font-face defaults

    If an option is missing. Plz leave a feature request.

    Tips

    Loop

    You can load the entire Roboto font stack via a foreach loop.

    $fonts-roboto: (
        "Light",
        "Light Italic",
        "Regular",
        "Italic",
        "Bold"
    );
    
    @each $styles in $fonts-roboto {
        @include font-face("Roboto", $styles);
    }

    Icons

    You can use this mixin to also load font icon libraries. Simply call the mixin as describe above. But leave the suffix field to its default value of null.

    @include font-face("FontAwesome", $unicode: "U+0-10FFFF");

    Or use the suffix value of 'Regular'

    @include font-face("Material Icons", "Regular", $unicode: "U+0-10FFFF");

    This will set by default the:

    • font-weight to 400
    • font-style to normal

    You must still set the $unicode, since icon libraries have a diffrent one than just Latin. The default for the unicode is U+0-10FFFF which is all unicodes.

    FAQ

    Why is the name different from the file

    This is a little thing that came with the first publish. Sadly this is stuck to the repo.

    But I am not planing to change this Since then I have to deprecate this one and republish a new font-face repo.

    How do I use this with Variable Fonts

    If you are planing to use variable fonts you don't need this.

    This makes loading font-families easier and is over kill for just one font-face.

    Install

    npm i @fylgja/fontface

    DownloadsWeekly Downloads

    16

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    9

    Last publish

    Collaborators

    • grimlink