2

I try to add some custom fonts to my theme, so I created file app/design/frontend/vendor/theme/web/_typography.less and added the code inside of it:

.lib-font-face (
  @family-name:'OpenSans Condensed Light',
  @font-path: '@{baseDir}fonts/OpenSans-CondLight.ttf',
  @font-weight: 300,
  @font-style: normal
)

When I use grunt to compile less files, I get a parse error:

ParseError: Unrecognised input in pub/static/frontend/[vendor]/[theme]/[lang]/css/source/_typography.less on line 1, column 16:
>> 1 .lib-font-face (
>> 2   @family-name:'OpenSans Condensed Light',

What am I doing wrong here?

4
  • 4
    I forgot to use ; at the end of the sentence - when I added ; - it worked.
    – Anitr
    Sep 22, 2016 at 6:34
  • 3
    You haven't forget ;. It is missing in "documentation" =)
    – puchu
    Mar 2, 2017 at 12:26
  • I am using .lib-font-face( @family-name:'custom-icon', @font-path: '@{baseDir}fonts/custom-icon', @font-weight: normal, @font-style: normal ) and it is throwing similar exception. How do I correct it wrt your answer? Mar 30, 2018 at 7:54
  • Add ; in the end. For example: .lib-font-face ( );
    – Anitr
    Apr 3, 2018 at 7:28

1 Answer 1

0

Please use below format:

@font-face {
    font-family: 'SourceSans-Regular';
    src: url('@{baseDir}fonts/SourceSansPro-Regular.eot');
    src: url('@{baseDir}fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('@{baseDir}fonts/SourceSansPro-Regular.woff') format('woff'),
        url('../fonts@{baseDir}fonts/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
1
  • 1
    I tried that and it doesn't work. The browser tries to load the font, but the font is not placed in /pub/static anywhere
    – Scott
    Feb 15, 2019 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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