If you've followed DevDocs then you'll have _typography.less
where you've defined your font by using .lib-font-face mixin
. Now to use that font you can override @font-family-name__base variable by either declaring it in _themes.less file or in _variables.less files in your custom theme.
so you'll end up with something like
@font-family-name__base:'myfontname';
@font-family__base: @font-family-name__base, @font-family__sans-serif;
To add multiple fonts, firstly you'll add fonts by using .lib-font-face mixin
inside _typography.less
file multiple times as required:
.lib-font-face(
@family-name:'my-primary-font',
@font-path: '@{baseDir}fonts/path_to_file',
@font-weight: font_weight,
@font-style: font_style
);
.lib-font-face(
@family-name:'my-secondary-font',
@font-path: '@{baseDir}fonts/path_to_file',
@font-weight: font_weight,
@font-style: font_style
);
you can use these fonts by introducing new variables where required:
@font-family-name__base:'my-primary-font';
@font-family__base: @font-family-name__base, @font-family__sans-serif;
@font-family-name__secondary-font:'mysecondaryfontname';
@font-family__secondary: @font-family-name__secondary-font, @font-family__secondary-fallback-font;
Now @font-family__base
and @font-family__secondary
variables can be used where required in your css (less).
Note you only need to provide the path where all required font files are located without providing any extension, mixin will load all files for you.
Best Answer
These files are generated through LESS.
This is not completely correct. The
styles-m.css
contains CSS rules for both mobile and desktop and thus is generally bigger than thestyles-l.css
which contains rules for desktop. However, the goal is still this same, this way, mobile devices do not need to download CSS rules for desktop devices.Regarding the question of how styles can be "placed" in either of those files, this is done via the Magento UI library media queries which help Magento create these two files from your LESS rules.
To give you an example, a media block like the following one would be placed in
styles-m
as both desktop and mobile devices have rules within this block "in common":A media query block like this would be for devices which have a min resolution of "screen_xs", which are mobile devices with a screen resolution of 480px and bigger, meaning it would still be placed in
styles-m
but would not necessarily affect all mobile devices:Changing the
(@extremum = 'min')
to(@extremum = 'max')
would change the rule to its opposite and thus only affect devices with a width smaller than 480px.And a block like this would only concern desktop devices and thus be placed in
styles-l
, as everything 'above'screen__m
is considered a desktop device (by default):You can read more about these break points in the Magento developer guide.