Free Preparation Discussions
MENU
Adobe Exam AD0-E720 Topic 3 Question 9 Discussion
Topic #: 3
An Adobe Commerce developer has been asked to implement a custom font specifically for emails. The Adobe Commerce developer has already added their font into the file system.
Keeping best practice in mind, which two files would need to be implemented to show the custom font in the email?
To implement a custom font specifically for emails, the developer needs to do the following steps:
Add the custom font file to the web/fonts directory of the custom theme.
Use the @import font function with the url of the custom font from the theme in the /Vendor/Theme/web/css/source/_extend.less file. This will import the custom font and make it available for use in other LESS files. For example:
@import font('custom-font', '@{baseDir}fonts/custom-font.ttf', 'truetype');
Add in the styles to target the elements that require being changed in the /Vendor/Theme/web/css/source/_email.less file. This file is used to define the styles for email templates. The developer can use the .lib-font-face() mixin to apply the custom font to specific selectors. For example:
.lib-font-face( @family-name: @custom-font, @font-path: '@{baseDir}fonts/custom-font', @font-weight: normal, @font-style: normal );
h1 { .lib-font-face( @family-name: @custom-font, @font-path: '@{baseDir}fonts/custom-font', @font-weight: normal, @font-style: normal ); }
The /vendor/Theme/web/css/source/_typography.less file is not suitable for implementing a custom font for emails, as it is used for defining global typography styles for web pages. The <head></head> tag is not used for adding fonts in email templates, as it is not supported by most email clients. Reference: [Custom fonts], [Email templates overview]
Currently there are no comments in this discussion, be the first to comment!