How can I change the font in specific sections of my website using Custom CSS?

[cssquestions]

Hi everyone,

I am trying to change the font in specific sections of my website using the Custom CSS section (see below).

For example, my code would look like the following:

h2 {

font-family: Playfair Display;

}

However, the resulting font seems to just be a serif font - it however works if I change to another type of font, like Century Gothic.

I am not sure what is causing this issue - it seems like certain fonts are not being recognized and therefore it reverts to a standard font like serif.

Has anyone encountered this problem or figured out what is causing this issue?

Thanks!

[getmeup]

If you’re trying to change the font in specific sections of your Shopify website using the Custom CSS section, you can follow these steps:

1. Identify the specific section you want to change: Use your browser’s developer tools or Shopify’s theme editor to identify the section of the website where you want to change the font.

2. Write the CSS code: Once you’ve identified the section, write the appropriate CSS code to change the font. For example, if you want to change the font for all H1 headings in a section to Arial, you would write:

cssCopy code
h1 { font-family: Arial, sans-serif; }

1. Test the changes: Save the changes to the Custom CSS section and preview your website to see if the font has changed in the desired section.

It’s important to note that making changes to your website’s CSS can have unintended consequences if you’re not familiar with what you’re doing. Make sure to backup your website and proceed with caution when making changes to your website’s code. If you’re not comfortable making these changes yourself, consider hiring a web developer or designer to help you.

Public Notice Ad in Newspaper

[cssquestions]

Thanks, I have tried that. The issue is that the code does not work for specific fonts. It seems that I am targeting the correct heading as the font will change if I change it to Arial, but will not work if I choose a different font.

[GemPages]

Hello @cssquestions
I would like to give you the recommendation to support you so kindly follow steps below:

Step 1: From your Shopify Admin, navigate Content section and select “File”.
Step 2: Upload your Font File by selecting “Upload file”.
Step 3: The opened window will allow you to select the font file to add. After having successfully uploaded the file, select the “Link” icon to copy the file link.
Step 4: After that, look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.
Step 5: Add the following codes at the bottom of the file.

<style>
@font-face {
  font-family: "FontName";
  src: url("Linkofthefontfile");
}
h2{
font-family: "FontName" !important;
}
</style>

Replace the below elements of the code with actual data.

• Font name: the name of the font.
• Linkofthefontfile: the link of the Font File that was previously uploaded. It is copied after you select the Link icon.
  Hit “Save” when finished.
  So you can use FontName that you added.

I hope the above is useful to you.
Best regards,
GemPages Support Team

[BendersBakery]

What would be the change for changing the font on the following sections:

div.product-option

caption-with-letter-spacing

span.price.price–end

h2.totals__total

p.totals_total-value

[cptstoa]

Hello, I have a hard time updating my font on my tab section, which is an add-on app, not sure it is actually possible ? I already applied my own font rule to the rest of the website.

[jimmy819]

The CSS itself isn’t really the problem. If a font like Century Gothic works but Playfair Display falls back to a generic serif font, it usually means the browser doesn’t have that font available and your theme isn’t loading it.

A few things I’d check:

• Make sure the font is actually being loaded (either from your theme assets or from a web font provider). Simply writing font-family: "Playfair Display"; won’t download the font.
• Open Developer Tools → Network and filter by Font. If you don’t see the font file being requested (or you see a 404), that’s the root cause.
• In Developer Tools → Computed Styles, check which font-family is ultimately being applied. If another rule is overriding yours, you’ll see exactly where it’s comes from.
• If you’re using Shopify’s section-level Custom CSS, remember it’s only responsible for applying styles to that section—it doesn’t automatically import external fonts. The font still has to be available to the page first.

I’d also recommend specifying a fallback stack, for example:

h2 {
  font-family: "Playfair Display", Georgia, serif;
}

If the custom font still doesn’t appear after confirming it’s loading correctly, then the next thing to investigate is CSS specificity rather than the font-family declaration itself. In my experience, most font issues come down to either the font never being loaded or another selector overriding the rule, not the CSS syntax.