montalvomiguelo/hydrogen-theme

Using fonts from assets

lukecharle opened this issue · 1 comments

Me again..so I've added the cleanup plugin to avoid any files getting removed from the assets folder, all good.

Just wondering what the best/correct way to reference them now as this doesn't seem to work? Not sure if I'm not linking to them correctly? Is there a correct way to reference them to them when in the assets folder as its trying to access the frontend folder

Screenshot 2023-06-27 at 13 59 07 Screenshot 2023-06-27 at 13 54 01

Hi @lukecharle :)

The font could be loaded from a liquid file e.g. theme.liquid using @font-face + the asset_url filter. Then it could be assigned to a CSS variable that you can use in your tailwind config file.

<style>
@font-face {
  font-family: 'My Cool Font';
  font-display: 'swap';
  src: url("{{ 'my-cool-font.woff2' | asset_url }}") format('woff2'),
       url("{{ 'my-cool-font.woff' | asset_url }}") format('woff');
}

:root {
  --font-body-family: 'My Cool Font', sans-serif;
}
</style>