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.