0

I have a custom font in my theme already added through the "web/css/source/_typography.less".

& when (@media-common = true) {
.lib-font-face(
    @family-name: @font-family-name__base,
    @font-path: '@{baseDir}fonts/poppins/light/Poppins-Light',
    @font-weight: 300,
    @font-style: normal
);

I am wondering how I can add a "preload" instruction? The problem is because due less the files will be preprocessed and generated. so I can not add a hardocded path in the "head" section of my site. The path will change each time I change the css / less files on the site i.e. the "version1612984603" will change when I flush cache or recompile the less files.

Example dynamic generated link by magento for that font file

https://example.com/static/version1612984603/frontend/<vendor>/<theme>/de_DE/fonts/poppins/light/Poppins-Light.woff2

Example preload instruction

  <head>
    <link rel="preload" as="font" href="/static/version1612984603/frontend/<vendor>/<theme>/de_DE/fonts/poppins/light/Poppins-Light.woff">
  </head>

So how can I do this?

Remark: I have seen that the <font>feature (see custom fonts) has been added in magento 2.3.x but I can not update my installation from 2.2 to 2.3 due the incompatibiity of some extensions.

Your Answer

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

Browse other questions tagged or ask your own question.