Foundations

Font Families

scss:Ready

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:

Mixins details

import-font-famimies() 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 nameVariantWeightStyle
LeroyMerlinSans-Web-LightLight300normal
LeroyMerlinSans-Web-RegularRegular400normal
LeroyMerlinSans-Web-SemiBoldSemi-bold600normal
LeroyMerlinSans-Web-LightItalicLight300italic
LeroyMerlinSans-Web-ItalicRegular400italic
LeroyMerlinSans-Web-SemiBoldItalicSemi-bold600italic

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.

.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.