0

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;
0

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

2
  • pls see my updated post, i have declared in typography.less – zus Dec 31 '20 at 9:35
  • Seem you include wrong name font-family__base. Instead that you should use `font-family__base: Laca' – mrtuvn Dec 31 '20 at 9:48
0

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;
9
  • How to solve this error justpaste.it/8spjo – zus Jan 7 at 10:05
  • I have created _typography.less under web/css/source and include into _extend.less under web/css/source. – zus Jan 7 at 10:09
  • FYI - I have created _variables.less and common.less under web/css/source/components for my global variables purpose, – zus Jan 7 at 10:16
  • Global variable steps by using magento.stackexchange.com/a/328886/57334 – zus Jan 7 at 10:17
  • Shall i move _variables.less to web/css/source? – zus Jan 7 at 10:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.