Description
This issue is automatically created based on existing pull request: #29210: Static font name for loading fonts
Description (*)
The variable @font-family-name__base shouldn't be used when loading the Open Sans font because it's not really something that should change, since the source will still point to the Open Sans font. Using the variable here (can) cause issues when you change the base font (e.g. in a child theme).
Example 1:
If your custom theme extends from the Blank Theme and you change the base font with:
@font-family-name__base: 'Trenda';
This will be the compiled CSS:
Which is already wrong, but doesn't directly lead to problems since 'Trenda' is a custom font and you'll probably do something like this in your theme:
.lib-font-face(
@family-name: 'Trenda',
@font-path: '@{baseDir}fonts/trenda/Trenda-Regular',
@font-weight: @font-weight__regular,
@font-style: normal,
@font-display: swap
);
In which case this @font-face block will be included in the compiled CSS later, and your browser will only 'use' this one. However, if you only load the font in regular font-weight here, and you want to show text in bold, the browser will show that text in Open Sans (bold).
Example 2:
If your custom theme extends from the Blank Theme and you want to switch to a 'websafe' font, for example Times New Roman:
@font-family-name__base: 'Times New Roman';
Text won't be displayed in the real Times New Roman but in Open Sans because that is loaded under the name 'Times New Roman'.
Related Pull Requests
Fixed Issues (if relevant)
Manual testing scenarios (*)
- Change
@font-family-name__baseto'Times New Roman'(either temporary in Blank Theme or in a theme that extends from Blank) - Text should be shown in 'Times New Roman' (serif), not in Open Sans (sans-serif).
- Check the compiled CSS and see if the open sans is properly loaded (name and src of @font-face block should still be of Open Sans)
Questions or comments
Contribution checklist (*)
- Pull request has a meaningful description of its purpose
- All commits are accompanied by meaningful commit messages
- All new or changed code is covered with unit/integration tests (if applicable)
- All automated tests passed successfully (all builds are green)