ekzo
ekzo copied to clipboard
Font maps
Store fonts in map and loop through it to output shorthand helper-classes and font-faces for each
$fonts: (
'Open Sans': (
file: ... (optional);
version: ... (optional);
...
),
...
) !default;
Approximate structure:
// ---------------------------------------
// Font famylies
// ---------------------------------------
$fonts: (
'Open Sans': ( // first font always base
version: 234234432, // global version
bold: ( // weight
normal ( // style
file: openSans-bold, // or force proper naming?
svg-id: svgId,
font-face: true,
),
italic (
file: openSans-bold-italic,
version: 234234432,
svg-id: svgId,
font-face: true,
),
),
),
'Fontello': (
version: 234234432,
class: icon, // override class name
icons: ( // icons? apply weight and style : normal by default
file: fontello,
svg-id: fontellosvgId,
),
),
'Old variant': (
500: (
file: openSans-semibold,
version: 234234432,
styles: (normal, italic),
svg-id: svgId,
font-face: true,
),
normal: (
file: openSans-normal,
version: 234234432,
styles: normal,
svg-id: svgId,
font-face: true,
),
),
) !default;
Probably it's better to use separate $ekzo-icon-fonts map for icon fonts
Fonts also should have fallback map for fallback to predefined fonts.
Remember, that some local fonts should be quoted, while other — shouldn't
Some useful urls:
- https://github.com/guardian/guss-webfonts/blob/master/demo/demo.scss#L3
- https://github.com/guardian/guss-webfonts/blob/master/src/_webfonts.config.scss#L76
- https://github.com/guardian/guss-webfonts/blob/master/src/_webfonts.helpers.scss#L15
- https://github.com/guardian/guss-webfonts/blob/master/src/_webfonts.mixins.scss