ekzo icon indicating copy to clipboard operation
ekzo copied to clipboard

Font maps

Open ArmorDarks opened this issue 11 years ago • 4 comments

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;

ArmorDarks avatar Oct 08 '14 16:10 ArmorDarks

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;

ArmorDarks avatar Oct 08 '14 16:10 ArmorDarks

Probably it's better to use separate $ekzo-icon-fonts map for icon fonts

ArmorDarks avatar Oct 10 '14 16:10 ArmorDarks

Fonts also should have fallback map for fallback to predefined fonts.

Remember, that some local fonts should be quoted, while other — shouldn't

ArmorDarks avatar Oct 10 '14 16:10 ArmorDarks

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

ArmorDarks avatar Jun 13 '16 10:06 ArmorDarks