Font Families

Import

In order to use the font provided in Mozaic in your code, you have to start by importing the _all-settings.scss file in the following way:


@import 'settings-tools/all-settings';
// import font families
@include import-font-families();

Good to know

As you can see the code above includes a call to the import-font-families() mixin.

We strongly recommend that you always call this mixin in your code when using the components and tools provided by Mozaic.

Importing the _all-settings.scss file allows you to manage the font in your code using one of the following mixins:

import-font-families()
set-font-family()
set-font-weight()
set-font-face()
set-font-scale() (see the dedicated documentation here)

Mixins details

import-font-families() mixin

The import-font-families() mixin generates the set of @font-face rules allowing you to import all variations of the LeroyMerlinSans font into your .scss file.

This mixin includes all LeroyMerlin fonts, namely:

File name	Variant	Weight	Style
`LeroyMerlinSans-Web-Light`	Light	300	normal
`LeroyMerlinSans-Web-Regular`	Regular	400	normal
`LeroyMerlinSans-Web-SemiBold`	Semi-bold	600	normal
`LeroyMerlinSans-Web-LightItalic`	Light	300	italic
`LeroyMerlinSans-Web-Italic`	Regular	400	italic
`LeroyMerlinSans-Web-SemiBoldItalic`	Semi-bold	600	italic

font-faces are imported only with woff and woff2 format

Arguments

The import-font-families() mixin can be called by passing to it the $italic argument which is a boolean value:

$italic: true (default): to include @font-face statements for italic fonts
$italic: false: to exclude @font-face statements for italic fonts


@include import-font-families($italic: true);
// or also
@include import-font-families(false);

set-font-family() mixin

The set-font-family() mixin allows you to include a font-family statement in your code.


// Using:
.your-selector {
  @include set-font-family();
}
// you will get the following code in your css:
.your-selector {
  font-family: 'LeroyMerlin', sans-serif;
}

set-font-weight() mixin

The set-font-weight() mixin allows you to set the font weight you want to use in your selector.

Arguments

The set-font-weight() mixin can be called by passing the $weight argument which accepts the following values:

light: allows you to generate the font-weight: 300; declaration in your css code
regular (default): allows you to generate the font-weight: 400; declaration in your css code
semi-bold': allows you to generate the font-weight: 600; declaration in your css code


// in your .scss file
.your-selector {
  @include set-font-weight('semi-bold');
}
// the generated code output in the css file
.your-selector {
  font-weight: 600;
}

set-font-face() mixin

The set-font-face() mixin allows you to apply the font-family, font-weight and font-style properties to your code at once.

Arguments

The set-font-face() mixin can be called by passing the $weight and $italic arguments to it.

$weight: accepts the values 'light', 'regular' (default) and 'semi-bold'.
$italic: accepts the values null (default) and any other values permitted in the specification of the font-style property


.element {
  &__title {
    // semi-bold
    @include set-font-face('semi-bold');
  }
  &__paragraph {
    // semi-bold italic
    @include set-font-face('semi-bold', 'italic');
  }
}

Font files

You can find all the font files into the [registry path]/statics/fonts/ directory.

Overriding default path

You can override the path using $local-config: () map and define a new path depending on your project files.


$local-config: (
  font-path: '/custom-path',
);

Declare the local-config map in a file imported before _all-settings.scss, like user.config.scss created in your project.