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

Question

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

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

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

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;