Adding a custom font

I consulted your page first and adding a custom font did not work this way: Use custom CSS | Switch Themes Help
Firstly, there is no such thing as :root in Shapes code. Second there is no themes.scss.liquid. I went o base bundles and also tried to override in custom.scss. None of this worked.

I have emailed Switch themes a few times and no one is getting back to me.

If anyone can help that would be great!

Thank you!

Hello!

Looks like your emails came through just at the end of the week - apologies that you had to wait a bit longer than expected but I have just replied to your ticket.

In regards to custom fonts with Shapes theme, the :root line is on the second line of css-variables.liquid:

I did just check the support article and we do incorrectly reference themes.scss.liquid - that file does not exist in Shapes (I have updated the article so this is no longer referenced). If you do want to add Custom CSS, the guide you linked to is up to date - please let us know if there’s any issues you have with the Custom CSS guide and we can look into it.

Thanks!

Well as I said, I tried CSS Variables and your instructions did not work. You can look in the latest copy of the Shapes site in the theme library and look at the code.

Alona

Thanks, we have updated the guide again as the CSS variables for fonts are located in layouts/theme.liquid - sorry again for inconvenience there.

I also checked your theme and you need to make sure you are referencing the font files using Shopify’s asset filter url. I’ve fixed that in your theme and followed up in the support ticket you have with us. This also wasn’t totally clear in the support article so have added a highlight there too.

William,

Is the asset_url the Shopify cdn url?

Alona

Hi Alona

That’s correct - the asset_url will ensure that Shopify will load the fonts from your assets folder using the Shopify CDN.

How do I target only h2 with the font? I don’t want replace h1, h3…etc Only h2. Also, it’s working now, but I didn’t do anything. Did you replace the asset_url with cdn url?

Thank you for doing that if you did. But, can you tell me how to target only the h2.

Alona

Hi Alona

Yep that was me who did that in your store.

Are you able to reply to my email to your ticket? I’ll take it from there to help you with the H2 tags.

Thanks, William

Thanks William. Appreciate you getting back to me. I will await your response about targeting specific classes and where to do that. This is what I want:

Avenir Bold

  1. Testimonials (Names and titles of people)
Jason Cone, Communications Director, Doctors Without Borders (Médecins Sans Frontières)
  1. Blog Headlines:

  2. Product Titles

a. Product Page:

3 Years Women’s Delicious Joggers

b. Collection List: 3 Years Women’s Delicious Joggers

  1. Headers in Comparison chart: FAR FROM TIMID

  2. Navigation: Main menu items only

Newgate

  1. Slider headers

BRAND LEGENDS START HERE.

  1. Section Headers

WHY WORK WITH US

Hi Alona,

As we are working on your store via the ticket submitted to our support desk, we’ll update you on this request there as well.

You can check-in via the support ticket for updates on these font changes.

Cheers,

Hi. Great. I don’t see a response to where in the site you made the above font changes so I can be empowered to make future changes.

Right now, for example, I want to reduce the size of the main navigation only without changing the size of the body text. It’s strange they are both connected in the theme settings.
Alona

Hi Alona,

It seems you may have missed our message via the support portal.

We did outline that the code was added to your custom.css file, and we included the screenshot below:

As it relates to section styling being connected via theme settings, it’s important to note that Shopify has guidelines on the number of settings a theme can include, so a theme can’t include settings to tweak each element individually, as this would be quite overwhelming for most merchants. However, you will find that our theme is quite customizable, and does include a large array of customization options, rivaling all other themes within the Shopify ecosystem.

That being said, you can add the code below to your custom.css file to adjust the size of your menu navigation text:

header.site-header nav *{
  font-size:0.8rem !important;
}

Also, it’s important to note that if you are unfamiliar with making code customizations, it is always recommended to enlist the assistance of a developer.

I hope you have an awesome day :slight_smile: