Gazelle/static/styles/assets/scss/fonts.scss

/**
 * Fonts
 *
 * Enables sitewide access to the font engine.
 * All themes can use the font toggle options.
 */

/* Font Path */
$font-path: "assets/fonts/";

/**
 * Font Awesome
 */

@import "assets/fonts/fa/css/all.min.css";
$FontAwesome: "Font Awesome 5 Free";

.fa,
.fab,
.fad,
.fal,
.far,
.fas {
    font-family: $FontAwesome;
}

/**
 * Noto Sans
 */

$NotoSans: "NotoSans-SemiCondensed";
$NotoSansBold: "NotoSans-SemiCondensedBold";
$NotoSansItalic: "NotoSans-SemiCondensedItalic";

@font-face {
    font-family: "NotoSans-SemiCondensed";
    src: url($font-path + "noto/NotoSans-SemiCondensed.woff2");
}

@font-face {
    font-family: "NotoSans-SemiCondensedBold";
    src: url($font-path + "noto/NotoSans-SemiCondensedBold.woff2");
}

@font-face {
    font-family: "NotoSans-SemiCondensedItalic";
    src: url($font-path + "noto/NotoSans-SemiCondensedItalic.woff2");
}

/**
 * Noto Serif
 */

$NotoSerif: "NotoSerif-SemiCondensed";
$NotoSerifBold: "NotoSerif-SemiCondensedBold";
$NotoSerifItalic: "NotoSerif-SemiCondensedItalic";

@font-face {
    font-family: "NotoSerif-SemiCondensed";
    src: url($font-path + "noto/NotoSerif-SemiCondensed.woff2");
}

@font-face {
    font-family: "NotoSerif-SemiCondensedBold";
    src: url($font-path + "noto/NotoSerif-SemiCondensedBold.woff2");
}

@font-face {
    font-family: "NotoSerif-SemiCondensedItalic";
    src: url($font-path + "noto/NotoSerif-SemiCondensedItalic.woff2");
}

/**
 * Noto Mono
 */

$NotoMono: "NotoSansMono-SemiCondensed";
$NotoMonoBold: "NotoSansMono-SemiCondensedBold";

@font-face {
    font-family: "NotoSansMono-SemiCondensed";
    src: url($font-path + "noto/NotoSansMono-SemiCondensed.woff2");
}

@font-face {
    font-family: "NotoSansMono-SemiCondensedBold";
    src: url($font-path + "noto/NotoSansMono-SemiCondensedBold.woff2");
}

/**
 * Luxi Sans
 */

$LuxiSans: "LuxiSans";
$LuxiSansBold: "LuxiSans-Bold";
$LuxiSansItalic: "LuxiSans-Italic";

@font-face {
    font-family: "LuxiSans";
    src: url($font-path + "luxi/LuxiSans.woff2");
}

@font-face {
    font-family: "LuxiSans-Bold";
    src: url($font-path + "luxi/LuxiSans-Bold.woff2");
}

@font-face {
    font-family: "LuxiSans-Italic";
    src: url($font-path + "luxi/LuxiSans-Italic.woff2");
}

/**
 * Luxi Serif
 */

$LuxiSerif: "LuxiSerif";
$LuxiSerifBold: "LuxiSerif-Bold";
$LuxiSerifItalic: "LuxiSerif-Italic";

@font-face {
    font-family: "LuxiSerif";
    src: url($font-path + "luxi/LuxiSerif.woff2");
}

@font-face {
    font-family: "LuxiSerif-Bold";
    src: url($font-path + "luxi/LuxiSerif-Bold.woff2");
}

@font-face {
    font-family: "LuxiSerif-Italic";
    src: url($font-path + "luxi/LuxiSerif-Italic.woff2");
}

/**
 * Luxi Mono
 */

$LuxiMono: "LuxiMono";
$LuxiMonoBold: "LuxiMono-Bold";
$LuxiMonoItalic: "LuxiMono-Italic";

@font-face {
    font-family: "LuxiMono";
    src: url($font-path + "luxi/LuxiMono.woff2");
}

@font-face {
    font-family: "LuxiMono-Bold";
    src: url($font-path + "luxi/LuxiMono-Bold.woff2");
}

@font-face {
    font-family: "LuxiMono-Italic";
    src: url($font-path + "luxi/LuxiMono-Italic.woff2");
}

/**
 * Computer Modern Sans
 */

$CModernSans: "CMUSansSerif";
$CModernSansBold: "CMUSansSerif-Bold";
$CModernSansItalic: "CMUSansSerif-Oblique";

@font-face {
    font-family: "CMUSansSerif";
    src: url($font-path + "cmodern/CMUSansSerif.woff2");
}

@font-face {
    font-family: "CMUSansSerif-Bold";
    src: url($font-path + "cmodern/CMUSansSerif-Bold.woff2");
}

@font-face {
    font-family: "CMUSansSerif-Oblique";
    src: url($font-path + "cmodern/CMUSansSerif-Oblique.woff2");
}

/**
 * Computer Modern Serif
 */

$CModernSerif: "CMUSerif-Roman";
$CModernSerifBold: "CMUSerif-Bold";
$CModernSerifItalic: "CMUSerif-Italic";

@font-face {
    font-family: "CMUSerif-Roman";
    src: url($font-path + "cmodern/CMUSerif-Roman.woff2");
}

@font-face {
    font-family: "CMUSerif-Bold";
    src: url($font-path + "cmodern/CMUSerif-Bold.woff2");
}

@font-face {
    font-family: "CMUSerif-Italic";
    src: url($font-path + "cmodern/CMUSerif-Italic.woff2");
}

/**
 * Computer Modern Mono
 */

$CModernMono: "CMUTypewriter-Regular";
$CModernMonoBold: "CMUTypewriter-Bold";
$CModernMonoItalic: "CMUTypewriter-Italic";

@font-face {
    font-family: "CMUTypewriter-Regular";
    src: url($font-path + "cmodern/CMUTypewriter-Regular.woff2");
}

@font-face {
    font-family: "CMUTypewriter-Bold";
    src: url($font-path + "cmodern/CMUTypewriter-Bold.woff2");
}

@font-face {
    font-family: "CMUTypewriter-Italic";
    src: url($font-path + "cmodern/CMUTypewriter-Italic.woff2");
}

/**
 * Comic Neue
 */

$ComicNeue: "ComicNeue-Regular";
$ComicNeueBold: "ComicNeue-Bold";
$ComicNeueItalic: "ComicNeue-Italic";

@font-face {
    font-family: "ComicNeue-Regular";
    src: url($font-path + "comic/ComicNeue-Regular.woff2");
}

@font-face {
    font-family: "ComicNeue-Bold";
    src: url($font-path + "comic/ComicNeue-Bold.woff2");
}

@font-face {
    font-family: "ComicNeue-Italic";
    src: url($font-path + "comic/ComicNeue-Italic.woff2");
}

/**
 * OpenDyslexic
 */

$OpenDyslexic: "OpenDyslexic-Regular";
$OpenDyslexicBold: "OpenDyslexic-Bold";
$OpenDyslexicItalic: "OpenDyslexic-Italic";

@font-face {
    font-family: "OpenDyslexic-Regular";
    src: url($font-path + "dyslex/OpenDyslexic-Regular.woff2");
}

@font-face {
    font-family: "OpenDyslexic-Bold";
    src: url($font-path + "dyslex/OpenDyslexic-Bold.woff2");
}

@font-face {
    font-family: "OpenDyslexic-Italic";
    src: url($font-path + "dyslex/OpenDyslexic-Italic.woff2");
}

/*
 * Theme Options
 */

@mixin font-styles($b, $i, $m, $mb, $mi: null) {
    b,
    strong {
        font-family: $b;
        font-weight: normal;
    }

    /* Font Awesome exception to the Comic Sans rule */
    i:not(.fa):not(.fab):not(.fad):not(.fal):not(.far):not(.fas),
    em:not(.fa):not(.fab):not(.fad):not(.fal):not(.far):not(.fas) {
        font-family: $i;
        font-style: normal;
    }

    code,
    pre,
    tt {
        font-family: $m;
        margin-bottom: 1rem;
        word-wrap: break-word;
        /* word-wrap: pre; */

        b,
        strong {
            font-family: $mb;
            font-weight: normal;
        }

        i,
        em {
            /* Noto Mono workaround: no italics */
            @if ($mi) {
                font-family: $mi;
                font-style: normal;
            }
        }
    }
}

/* Noto Sans */
body.style_noto_sans {
    font-family: $NotoSans, sans-serif;
    @include font-styles($NotoSansBold, $NotoSansItalic, $NotoMono, $NotoMonoBold);
}

/* Noto Serif */
body.style_noto_serif {
    font-family: $NotoSerif, serif;
    @include font-styles($NotoSerifBold, $NotoSerifItalic, $NotoMono, $NotoMonoBold);
}

/* Luxi Sans */
body.style_luxi_sans {
    font-family: $LuxiSans, sans-serif;
    @include font-styles($LuxiSansBold, $LuxiSansItalic, $LuxiMono, $LuxiMonoBold, $LuxiMonoItalic);
}

/* Luxi Serif */
body.style_luxi_serif {
    font-family: $LuxiSerif, serif;
    @include font-styles($LuxiSerifBold, $LuxiSerifItalic, $LuxiMono, $LuxiMonoBold, $LuxiMonoItalic);
}

/* Computer Modern Sans */
body.style_cmodern_sans {
    font-family: $CModernSans, sans-serif;
    @include font-styles($CModernSansBold, $CModernSansItalic, $CModernMono, $CModernMonoBold, $CModernMonoItalic);
}

/* Computer Modern Serif */
body.style_cmodern_serif {
    font-family: $CModernSerif, serif;
    @include font-styles($CModernSerifBold, $CModernSerifItalic, $CModernMono, $CModernMonoBold, $CModernMonoItalic);
}

/* OpenDyslexic */
body.style_opendyslexic {
    font-family: $OpenDyslexic, sans-serif;
    @include font-styles($OpenDyslexicBold, $OpenDyslexicItalic, $NotoMono, $NotoMonoBold);
}

/* Comic Neue */
body.style_comic_neue {
    font-family: $ComicNeue, sans-serif;
    @include font-styles($ComicNeueBold, $ComicNeueItalic, $NotoMono, $NotoMonoBold);
}

/**
 * beluga
 */

/* latin-ext */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url($font-path + "misc/OpenSans-Regular.woff2");
}

/* latin */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    src: url($font-path + "misc/OpenSans-SemiBold.woff2");
}