M2 - How to include my custom font in custom theme?

Question

How to apply adobe laca font, https://fonts.adobe.com/fonts/laca

enter image description here

How to apply?

I am created custom theme inherit from blank theme.

Custom font declaration :

app\design\frontend\Myrwd\mytheme\web\css\source\ _typography.less

& when (@media-common = true) {
 .lib-font-face(
 @family-name: @font-family__base,
 @font-path: '@{baseDir}fonts/Laca-Regular',
 @font-weight: 400,
 @font-style: normal,
 @font-display: swap
 );
 }
 @font-family__base: 'laca, sans-serif' !important;

Answer 1

Upload fonts to theme is not enough you must import in less file in your theme

• zus: pls see my updated post, i have declared in typography.less
• mrtuvn: Seem you include wrong name font-family__base. Instead that you should use `font-family__base: Laca'

Answer 2

Here the below example of Roboto font you can follow the same with your custom theme for custom font:-

First add fonts in app\design\frontend\Myrwd\mytheme\web\fonts\roboto folder like below

enter image description here

app\design\frontend\Myrwd\mytheme\web\css\source\ _typography.less

@font-face {
 font-family: @font-family-name__base;
 src: url('@{baseDir}fonts/roboto/Roboto-Medium.woff2') format('woff2'),
 url('@{baseDir}fonts/roboto/Roboto-Medium.woff') format('woff');
 font-weight: 500;
 font-style: normal;
}
@font-face {
 font-family: @font-family-name__base;
 src: url('@{baseDir}fonts/roboto/Roboto-Bold.woff2') format('woff2'),
 url('@{baseDir}fonts/roboto/Roboto-Bold.woff') format('woff');
 font-weight: bold;
 font-style: normal;
}
@font-face {
 font-family: @font-family-name__base;
 src: url('@{baseDir}fonts/roboto/Roboto-Italic.woff2') format('woff2'),
 url('@{baseDir}fonts/roboto/Roboto-Italic.woff') format('woff');
 font-weight: normal;
 font-style: italic;
}
@font-face {
 font-family: @font-family-name__base;
 src: url('@{baseDir}fonts/roboto/Roboto-Light.woff2') format('woff2'),
 url('@{baseDir}fonts/roboto/Roboto-Light.woff') format('woff');
 font-weight: 300;
 font-style: normal;
}
@font-face {
 font-family: @font-family-name__base;
 src: url('@{baseDir}fonts/roboto/Roboto-Regular.woff2') format('woff2'),
 url('@{baseDir}fonts/roboto/Roboto-Regular.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: @font-family-name__base;
 src: url('@{baseDir}fonts/roboto/Roboto-LightItalic.woff2') format('woff2'),
 url('@{baseDir}fonts/roboto/Roboto-LightItalic.woff') format('woff');
 font-weight: 300;
 font-style: italic;
}
@font-face {
 font-family: @font-family-name__base;
 src: url('@{baseDir}fonts/roboto/Roboto-Black.woff2') format('woff2'),
 url('@{baseDir}fonts/roboto/Roboto-Black.woff') format('woff');
 font-weight: 900;
 font-style: normal;
}
@font-face {
 font-family: @font-family-name__base;
 src: url("@{baseDir}fonts/roboto/Roboto-Thin.woff") format("woff"),
 url("@{baseDir}fonts/roboto/Roboto-Thin.woff2") format("woff2");
 font-weight: 100;
 font-style: normal;
}

Add below variable in app\design\frontend\Myrwd\mytheme\web\css\source\_variables.less file.

@font-family-name__base: 'Roboto';
@font-family__base: @font-family-name__base, @font-family__sans-serif;

• zus: How to solve this error justpaste.it/8spjo
• zus: I have created _typography.less under web/css/source and include into _extend.less under web/css/source.
• zus: FYI - I have created _variables.less and common.less under web/css/source/components for my global variables purpose,
• zus: Global variable steps by using magento.stackexchange.com/a/328886/57334
• zus: Shall i move _variables.less to web/css/source?