Marfeel Docs

# Typography

Marfeel supports the most common browsers. All the font files used by Tenants must be of type *.woff in order to respect this.

# Headings

Use this URL pattern to load a custom font family (e.g. Google Fonts):

"fontFamily" : "/statics/f/ps/URL_TO_RESOURCE_WITHOUT_PROTOCOL.woff",

👆 For common Google fonts you can get the font URL from this file (opens new window).

The font in headings is applied in the custom SCSS files of the Tenant as $mainFont variable.

.customTitle {
    font-family: $mainFont;
}

# Body

Marfeel defaults the body font to system-ui. This way we boost performance because the browser doesn't have to download any font files.

The font in body is applied in the custom SCSS files of the Tenant as $secondaryFont.

If you need to add an extra font (not recommended for performance), you can add the fontFace mixin in the custom SCSS file:

$secondaryFontBoldSrc: local('Roboto Bold'), local('Roboto-Bold'), url('/statics/f/ps/fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc-.woff') format('woff');

@include fontFace('SecondaryFontBold', $secondaryFontBoldSrc, null, normal);

Here's an example: EconomiaDigital custom fonts (opens new window)

WARNING

To keep the fonts working well in iOS13, we've improved the fonts and are going to explain the new use of the font-weight.

# Font-size

The default value for font size is 16px for Mosaic pages and 18px for Details pages.

WARNING

Due to some issues in the Standalone Flowcards the REM format is no longer used to define font sizes. Use EM (recommended) or PX instead.

The following font size variables are available in the custom files:

$fontSize--default: $fontSizeBase;

// Meta
$fontSize--subtitle: $fontSize--default * .75;
$fontSize--meta: $fontSize--default * .6875;
$fontSize--excerpt: $fontSize--default * .8;

// Titles
$fontSize--title-s: $fontSize--default * 1.0625;
$fontSize--title-m: $fontSize--default * 1.375;
$fontSize--title-l: $fontSize--default * 1.5;

# Font-weight

By default, to change font-weight, use the font-weight property. This only affect when use system-ui into ui.json. You can use these variables:

  • $weightLight (which equals to 300)
  • $weightMedium (which equals to 500)
  • $weightBold (which equals to 700 or "bold")
.customTitle {
    font-weight: $weightBold;
}
.customContent {
    font-weight: 600;
}

If you use a custom font for $secondaryFont, you can't change the weight of the font with font-weight and you will have to use font-family.

.customTitle {
    font-family: $secondaryFont;
}

To change the weight of the custom font, you have to add the font with the fontFace and set a name (it can be the same as the values of the $secondaryFont variables):

  • $secondaryFontMedium -- SecondaryFontMedium
  • $secondaryFontBold -- SecondaryFontBold
  • $secondaryItalic -- SecondaryFontItalic
$secondaryFontBoldSrc: local('Roboto Bold'), local('Roboto-Bold'), url('/statics/f/ps/fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc-.woff') format('woff');
$secondaryFontMediumSrc: local('Roboto Medium'), local('Roboto-Medium'), local('HelveticaNeue-Medium'), local('sans-serif-medium'), url('/statics/f/ps/fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff'), local('sans-serif');

@include fontFace('SecondaryFontBold', $secondaryFontBoldSrc, null, normal);
@include fontFace('SecondaryFontMedium', $secondaryFontMediumSrc, null, normal);

.customTitle {
    font-family: $secondaryFontBold; // Show Roboto Bold font
}
.customText {
    font-family: $secondaryFontMedium; // Show Roboto Medium font
}

← Header →