Using fonts from assets
lukecharle opened this issue · 1 comments
lukecharle commented
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
montalvomiguelo commented
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>