Origami Frontend Components & Services

SassDoc: o-fonts

oFonts

Output all default font-face declarations for the current brand.

Examples

Example #1

all fonts for the current brand (master, internal, whitelabel).

@include oFonts();

Example #2

only regular and semibold MetricWeb font faces.

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

Example #3

only regular and bold FinancierDisplayWeb font faces.

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

Example #4

only regular font faces for MetricWeb and FinancierDisplayWeb.

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

Links

oFontsVariantExists(...)

Check if a font variant exists for a family.

parameter type default description
family one of $_o-fonts-families
weight (optional) regular The font weight.
style (optional) normal The font style.

Returns

Bool

Links

oFontsGetFontFamilyWithFallbacks(family)

Get a font-family stack with the appropriate fallbacks

parameter type default description
family

Returns

String - font-stack

Example

font-family: oFontsGetFontFamilyWithFallbacks(FinancierDisplayWeb);

Links

oFontsGetFontFamilyWithoutFallbacks(family)

Removes a fonts fallbacks.

parameter type default description
family Font family potentially with fallbacks.

Returns

String - Font family without fallbacks.

Example

$family: oFontsGetFontFamilyWithoutFallbacks('FinancierDisplayWeb, sans'); //FinancierDisplayWeb

Links

oFontsWeight(keyword)

Machine-readable CSS font-weight.

parameter type default description
keyword Human-readable keyword e.g. 'semibold', 'regular', 'bold'.

Returns

Number - CSS font-weight

Example

font-weight: oFontsWeight(lighter);

Links

oFontsDefineCustomFont(font-family, variants)

Output custom Font-face declarations and register the family and variants with o-fonts.

parameter type default description
font-family The custom font family with fallback e.g. 'ComicSans, sans'
variants The variants (weight and style combinations) which are allowed in a nested map e.g. ((weight: bold, style: normal), (weight: regular, style: normal))

Content Block

If the font family is not a system font, output the font-face for the custom font in the mixin content.

Example

example shows registering a custom font "MyFont" with "sans" fallback. The font allows regular or bold variants.

@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;
	}
};

Links

o-fonts-is-silent

Silent mode

Links

o-fonts-path

Path to default font files.

Links

o-fonts-display

The default font-display property of included font faces. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

Links

oFonts

Output all default font-face declarations for the current brand.

Examples

Example #1

all fonts for the current brand (master, internal, whitelabel).

@include oFonts();

Example #2

only regular and semibold MetricWeb font faces.

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

Example #3

only regular and bold FinancierDisplayWeb font faces.

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

Example #4

only regular font faces for MetricWeb and FinancierDisplayWeb.

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

Links

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