SassDoc: o-fonts

oFonts(opts)

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

Examples

Example #1

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

@include oFonts();

Example #2

a limited set of recommended fonts for the current brand (core, internal, whitelabel).

@include oFonts($opts: ('recommended': true));

Example #3

a limited set of recommended fonts for the current brand, plus an extra FinancierDisplayWeb font.

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

Example #4

only regular and semibold MetricWeb font faces.

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

Example #5

only regular and bold FinancierDisplayWeb font faces.

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

Example #6

only regular font faces for MetricWeb and FinancierDisplayWeb.

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

Example #7

only black weighted font faces for MetricWeb, FinancierDisplayWeb, and FinancierTextWeb.

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

Links

• "oFonts" mixin on Github

oFontsVariantExists(...)

Check if a font variant exists for a family.

Returns

Links

• "oFontsVariantExists" function on Github

oFontsVariantIncluded(...)

Check if a font variant has been included in your project with the oFonts mixin.

Returns

Links

• "oFontsVariantIncluded" function on Github

oFontsGetFontFamilyWithFallbacks(family)

Get a font-family stack with the appropriate fallbacks

Returns

Example

font-family: oFontsGetFontFamilyWithFallbacks(FinancierDisplayWeb);

Links

• "oFontsGetFontFamilyWithFallbacks" function on Github

oFontsGetFontFamilyWithoutFallbacks(family)

Removes a fonts fallbacks.

Returns

Example

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

Links

• "oFontsGetFontFamilyWithoutFallbacks" function on Github

oFontsWeight(keyword)

Machine-readable CSS font-weight.

Returns

Example

font-weight: oFontsWeight(lighter);

Links

• "oFontsWeight" function on Github

oFontsDefineCustomFont(font-family, variants)

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

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.woff2') format('woff2'), url('MyFont-Thin.woff') format('woff');
		font-family: MyFont;
		font-weight: 100;
		font-style: normal;
	}

	@font-face{
		src: url('MyFont-Bold.woff2') format('woff2'), url('MyFont-Bold.woff') format('woff');
		font-family: MyFont;
		font-weight: 700;
		font-style: normal;
	}
};

Links

• "oFontsDefineCustomFont" mixin on Github

oFontsVariantsIncluded(opts)

Register which fonts have been output by already for your project. This mixin is useful if a project calls the oFonts mixin is in a different entry point.

Examples

Example #1

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

@include oFontsVariantsIncluded();

Example #2

a limited set of recommended fonts for the current brand (core, internal, whitelabel).

@include oFontsVariantsIncluded($opts: ('recommended': true));

Example #3

a limited set of recommended fonts for the current brand, plus an extra FinancierDisplayWeb font.

@include oFontsVariantsIncluded($opts: (
	'recommended': true,
	'financier-display': (
		(weight: regular, style: normal)
	)
));

Example #4

only regular and semibold MetricWeb font faces.

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

Example #5

only regular and bold FinancierDisplayWeb font faces.

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

Example #6

only regular font faces for MetricWeb and FinancierDisplayWeb.

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

Links

• "oFontsVariantsIncluded" mixin on Github

o-fonts-is-silent

Silent mode

Links

• "o-fonts-is-silent" variable on Github

o-fonts-path

Origami Build Service path to font files.

Links

• "o-fonts-path" variable on Github

o-fonts-build-service-path

Origami Build Service path to font files.

Links

• "o-fonts-build-service-path" variable on Github

o-fonts-self-host-path

Alternative path to self hosted font files, hosted on a service which does not conform to the Origami Build Service api. For example this is used by Financial-Times/ft-app to support offline fonts.

Links

• "o-fonts-self-host-path" variable on Github

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

• "o-fonts-display" variable on Github