I can't change the font in my theme.

sofiakarkus · ‎09-02-2024

Hi everyone, I'm struggling to change the font in my store. I feel it looks too robust, and I'd like to use Chivo Narrow or Domaine, but I can't seem to change it under Typography. No matter which font I choose, nothing seems to change. Also, when I try to make some text bold, it appears bold in the editor but not in my theme. Does anyone have a solution for this?

Sweans · ‎09-02-2024

Hi @sofiakarkus ,

Add Custom Fonts:

If Chivo Narrow or Domaine isn’t available in your theme’s default options, you may need to add them manually using custom code.

Here’s how you can do it:

First, ensure that the fonts are available through a web font service like Google Fonts (for Chivo Narrow) or Adobe Fonts (for Domaine).

*Add the following code to your theme’s theme.liquid file under the <head> section:

<!-- For Chivo Narrow -->
<link href="https://fonts.googleapis.com/css2?family=Chivo+Narrow:wght@400;700&display=swap" rel="stylesheet">

<!-- For Domaine (Assuming it's available via Adobe Fonts) -->
<link rel="stylesheet" href="https://use.typekit.net/your-adobe-font-kit-id.css">

*Next, apply the font to your theme’s CSS. Go to Online Store > Themes > Actions > Edit code, then add the following to your styles.css file:

body {
  font-family: 'Chivo Narrow', sans-serif;
}

/* or for Domaine */
body {
  font-family: 'Domaine', serif;
}

*Bold Text Issue:

If bold text isn’t appearing as bold on your live site, there might be custom CSS that’s overriding it.

You can force the bold styling by adding this to your CSS:

strong, b {
  font-weight: bold !important;
}

If none of the above works, inspect your site’s CSS using the browser’s developer tools (right-click on the element and select "Inspect").

Look for any custom CSS that might be overriding the Shopify editor settings.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

View solution in original post

topnewyork · ‎09-02-2024

Hi @sofiakarkus , kindly check out the below videos.

And

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

Sweans · ‎09-02-2024

Hi @sofiakarkus ,

Add Custom Fonts:

If Chivo Narrow or Domaine isn’t available in your theme’s default options, you may need to add them manually using custom code.

Here’s how you can do it:

First, ensure that the fonts are available through a web font service like Google Fonts (for Chivo Narrow) or Adobe Fonts (for Domaine).

*Add the following code to your theme’s theme.liquid file under the <head> section:

<!-- For Chivo Narrow -->
<link href="https://fonts.googleapis.com/css2?family=Chivo+Narrow:wght@400;700&display=swap" rel="stylesheet">

<!-- For Domaine (Assuming it's available via Adobe Fonts) -->
<link rel="stylesheet" href="https://use.typekit.net/your-adobe-font-kit-id.css">

*Next, apply the font to your theme’s CSS. Go to Online Store > Themes > Actions > Edit code, then add the following to your styles.css file:

body {
  font-family: 'Chivo Narrow', sans-serif;
}

/* or for Domaine */
body {
  font-family: 'Domaine', serif;
}

*Bold Text Issue:

If bold text isn’t appearing as bold on your live site, there might be custom CSS that’s overriding it.

You can force the bold styling by adding this to your CSS:

strong, b {
  font-weight: bold !important;
}

If none of the above works, inspect your site’s CSS using the browser’s developer tools (right-click on the element and select "Inspect").

Look for any custom CSS that might be overriding the Shopify editor settings.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

- Was my reply helpful? Please Like and Accept the Solution or let me know by Buying me coffee!☕
- Want to modify or custom changes on store Hire me.
- Feel free to contact me at info@sweans.com regarding any help.
- To know more about me check out www.sweans.com

sofiakarkus · ‎09-02-2024

Thank you so much! it worked! 🙂

I can't change the font in my theme.

I can't change the font in my theme.

Community Blog Articles