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();

You may also include specific fonts granularly using an options $opts map. The map has a key for each font metric or financier-display, which accepts a list of weight and styles to include.

For example to include font faces for MetricWeb in normal and semibold weights, and regular FinancierDisplayWeb:

@include oFonts($opts: (
    'metric': (
        ('weight': 'regular', 'style': 'normal'),
        ('weight': 'semibold', 'style': 'normal')
    ),
    'financier-display': (
        ('weight': 'regular', 'style': 'normal')
    )
));

Font Loading

By default font-display is set to swap. In supporting browsers a system font is shown until fonts are loaded. To update your font loading method set $o-fonts-display at the top of your Sass, before including any other component.

// Customise font loading.
$o-fonts-display: 'optional';
@import 'o-fonts/main';


@include oFonts();

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 private $_o-fonts-families map.

  2. Second, if adding an entirely new font, add a new option to the oFonts mixin. To include the new font by default for only some brands assign a variable of default variants conditionally (see $_o-fonts-default-financier-display-variants).

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

Migration

State Major Version Last Minor Release Migration guide
✨ active 4 N/A migrate to v4
⚠ maintained 3 3.3 migrate to v3
╳ deprecated 2 2.3 -
╳ deprecated 1 1.5 -

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@^4.0.0-beta.1 to your link tag.

If running a Manual Build, run bower install --save "o-fonts@^4.0.0-beta.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