Origami Frontend Components & Services

Readme: o-fonts

Use o-fonts to include Origami provided fonts, or register supported custom fonts.

Fonts Available

Any of the below fonts may be included with o-fonts using SASS. But the fonts included by default vary per brand.

Weight FinancierDisplayWeb MetricWeb
thin
light i ✓ i
regular ✓ i ✓ i
medium i
semibold i
bold ✓ i
black

Fonts Included By Default

Font faces included by default, if using the Origami Build Service or including default fonts with SASS, depends on your products chosen brand:

Brand Fonts included by default (all weights and styles)
master FinancierDisplayWeb, MetricWeb
internal MetricWeb
whitelabel (none)

Sass

Include Default Fonts

To include default fonts for your brand, call oFonts.

@import 'o-fonts/main';
@include oFonts();

If you want to include an Origami font which is not included by default for your brand, specifically load the font separately.

Load a specific web font provided by Origami

@import 'o-fonts/main';

// @font-face declarations for all Financier Display weights
@include oFontsInclude(FinancierDisplayWeb, light);
@include oFontsInclude(FinancierDisplayWeb, regular);
@include oFontsInclude(FinancierDisplayWeb, bold);

// @font-face declarations for Metric regular / italic
@include oFontsInclude(MetricWeb, $weight: regular, $style: italic);

Use a custom font family

To register a custom font and supported variants, use the mixin oFontsDefineCustomFont.

In this example we register a custom font "MyFont" with sans fallback MyFont, sans. We configure this font to allow two variants (a normal style of either bold or regular weight). In the mixin content we include the @font-face declaration to load these fonts from our own source.

@include oFontsDefineCustomFont('MyFont, sans', (
    (weight: regular, style: normal),
    (weight: bold, style: normal)
)) {
    @font-face {
        src: url('MyFont-Thin.woff');
        font-family: MyFont;
        font-weight: 100;
        font-style: normal;
    }
    @font-face{
        src: url('MyFont-Bold.woff');
        font-family: MyFont;
        font-weight: 700;
        font-style: normal;
    }
};

Get a font family for a font name

To get a font-family with web safe fallbacks for a font, use the oFontsGetFontFamilyWithFallbacks function.

$family: oFontsGetFontFamilyWithFallbacks(FinancierDisplayWeb); // FinancierDisplayWeb, sans-serif

Get a font name from a font family

To get a font without fallbacks, use oFontsGetFontFamilyWithoutFallbacks:

$font: oFontsGetFontFamilyWithoutFallbacks('FinancierDisplayWeb, sans-serif'); // FinancierDisplayWeb

Check a font of weight or style exists

To check if a font supports a weight/style use oFontsVariantExists.

$allowed: oFontsVariantExists('MetricWeb', 'bold', 'normal'); // true
$allowed: oFontsVariantExists('MetricWeb', 'black', 'italic'); // false

Contributing

Add a new font or font variant

Note: font files are contained in a separate, private repository (o-fonts-assets).

  1. Open src/scss/_variables.scss and add the font family name (if it's an entirely new family) and the variant styles to the $o-fonts-families map:
$o-fonts-families: (
    MetricWeb: (
        font-family: 'MetricWeb, sans-serif',
        variants: (
            (weight: lighter, style: normal),
            (weight: normal,  style: normal),
            (weight: bold,    style: normal)
        )
    ),
    // …
);
  1. Second, if adding an entirely new font, indicate brand support by adding the font name to $_o-fonts-default-families. This will determine when the font is included by default.

  2. Finally, update the demos (see origami.json).


Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-fonts

If using the Build Service, add o-fonts@^3.2.1 to your link tag.

If running a Manual Build, run bower install --save "o-fonts@^3.2.1".

Help & Support

o-fonts is maintained directly by the Origami team. If you have any questions about o-fonts or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com