Font not changing

Store Design
, ,
1

I am using beatrice-pearl-shopify-theme-2-0 this shopify theme and even if I change the font from customisation section or edit code section, the fonts are not changing. please help me with the issue

2

Hi @highfun You can follow these steps and hopefully it will solve your issue.

  1. Upload your font files: Upload your custom font files (e.g., .woff, .woff2) to your Shopify theme. You can do this by navigating to the “Online Store” section of your Shopify admin panel, selecting “Themes,” and then clicking on “Actions” > “Edit code” for your current theme. In the theme editor, you can upload your font files to the “Assets” folder.

  2. Add font-face rule in CSS: Once your font files are uploaded, you need to define a @font-face rule in your CSS to specify the font-family and the paths to your font files. You can add this rule to your theme’s CSS file. Here’s an example:

@font-face {
    font-family: 'CustomFont';
    src: url('{{ 'customfont.woff2' | asset_url }}') format('woff2'), /* Modern Browsers */
         url('{{ 'customfont.woff' | asset_url }}') format('woff'); /* Older Browsers */
    font-weight: normal;
    font-style: normal;
}

Replace ‘CustomFont’ with the desired name for your custom font and ‘customfont.woff2’ and ‘customfont.woff’ with the file names of your font files.

  1. Apply the font in your Shopify theme templates: Once you’ve added the font to your CSS, you can apply it to specific elements in your Shopify theme templates by adding custom CSS classes or modifying existing styles.
body {
    font-family: 'CustomFont', sans-serif;
}

Replace ‘CustomFont’ with the name you used in the @font-face rule.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

3

Hi @highfun ,

That’s because some custom codes have been added to override your Font Customization and always apply the same fonts for headings and body. You can either use the code that Sahil wrote here or remove the existing custom code so your settings will work perfectly. This second solution will help your theme code and it will be easier since you do not have to upload new fonts.

If you don’t know where to find the custom code and remove it, just send me a DM and I’ll look in your theme for you.

4

How do I tell which font is the custom one? I’m using a theme that I bought off a website and looking into the code, I can’t tell.