locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.
https://locomotivemtl-boilerplate.vercel.app/
MIT License
458 stars 71 forks source link

Update fontface system with scss lists, function and mixin #111

Closed lucasvallenet closed 2 years ago

lucasvallenet commented 2 years ago

Update @font-face import to reduce code and simplify font management.

Use :

/assets/styles/settings/_config.scss

$font-families: (
    "primary": ("Webfont Primary", "Helvetica Neue", Arial, sans-serif),
    "secondary": ("Webfont Secondary", Georgia, serif),
);

$fontfaces: (
    "Webfont Primary" "webfont-primary_regular" 400 normal,
    "Webfont Primary" "webfont-primary_regular-italic" 400 italic,
    "Webfont Secondary" "webfont-secondary" 700 normal,
);

/assets/styles/**/*.scss

.c-heading.-primary {
    font-family: ff("primary");
}

.c-heading.-secondary {
    font-family: ff("secondary");
}