How do I use custom font inside a component?

A-Chivas · 2025-03-24T17:24:57.225+00:00

Need to use a custom font inside a component

A-Chivas

3 months ago

Need to use a custom font inside a component
salma

3 months ago

You can use a style tag inside the component to import the font face.
But unsure why you wouldn’t just import the font with all your other fonts?
Lucas G

3 months ago

Theme settings only has Google fonts so anything else needs to be imported separately
@salma
But unsure why you wouldn’t just import the font with all your other fonts?
A-Chivas

3 months ago

because I need the component for external use, I need to export it as a web component and use it.
@A-Chivas
because I need the component for external use, I need to export it as a web component and use it.
Lucas G

3 months ago

This wouldn’t affect things
You can still use the theme font when exporting as web component
@Lucas G
You can still use the theme font when exporting as web component
A-Chivas

3 months ago

How do I add a custom theme font mate?
Lucas G

3 months ago

Same as anywhere else
You host the font somewhere then add it to header
And add the typeface CSS as Salma mentioned
@Lucas G
You host the font somewhere then add it to header
A-Chivas

3 months ago

but the component doesnt have a header mate
Lucas G

3 months ago

You can load it with a custom action
A-Chivas

3 months ago

mate it doesnt load when I export it as a web component into shopify
@A-Chivas
mate it doesnt load when I export it as a web component into shopify
Chris Laupama

3 months ago

Can you show us how you’re currently implementing the custom font?

A video walkthrough would be great.
A-Chivas

3 months ago

the issue was that the font wasnt loading in shopify, just added the code there and started workin

How do I use custom font inside a component?

A-Chivas

salma

Lucas G

A-Chivas

Lucas G

A-Chivas

Lucas G

A-Chivas

Lucas G

A-Chivas

Chris Laupama

A-Chivas