Allow Header to change font

Ask the Community Customization
1

I am using a Shopify theme and there is no way to change the font for the header of the RSS Feed widget to match the font used in the other sections on the home page. Would really appreciate this feature added or at least provide the custom code that I can cut and paste into the customize section of the widget.

1 Like
3

Hi there and welcome to the Community @Greg_Albright :wave:

This code should help:

[class*="WidgetTitle__Header-sc"] {
  font-family: Calibri;
}

Just add the needed font to the code and add it to the Custom CSS field on the Appearance tab of your widget’s settings.

Try it out and let me know how it worked :wink:

4

Hi Max,

Sorry, it didn’t work. I tried inserting the code with the font used in the Shopify theme (Montserrat Extra Bold) and it changed the header’s font to Times Roman.

Can you modify the code you gave to pick up the Headings Font from Shopify’s Theme Settings > Typography like you do for the RSS Feed widget’s Color Scheme > Font section, where you can choose “Default (Apply from website)?

Greg

1 Like
5

I’ve added this code to the widget, set Montserrat font and it seems to be working:

[class*="WidgetTitle__Header-sc"] {
  font-family: Montserrat, sans-serif;
  font-weight: 800;
}

Could you please double-check your website?

6

That worked better. It got the font correct.

Here’s my website:

Eco-friendly, Environmentally friendly, Sustainable, Reusable Products — usegreenproducts.com

You can see the font size for “Testimonials” is smaller than for “Articles”.

Is there some code I can add to make the type smaller for the widget header?

Thanks,

Greg

1 Like
7

Sure! You can change the font size in the Header section on the Appearance tab:

image
image366Ă—841 26.7 KB
image
image368Ă—535 11.5 KB


Let me know if you have any questions left :slightly_smiling_face:

8

It looks pretty close now. The Montserrat font in Shopify is Extra Bold, so it is a little heavier in weight on the section headings than the widget header, but that okay. There isn’t any CSS code value that I can find that will display “Extra Bold”.

Thanks!

Greg

1 Like
9

To make the font bolder, you can adjust the font-weight value in the CSS code I’ve shared to your liking:

image

Please let me know if it helped :slightly_smiling_face:

10

No worries. It looks close enough.

I am using the “900 px” setting you sent me. I tried all of the other options including “Bold” and “Bolder”, and there is no CS code option that translates into “Extra Bold” for the Monserrat native font.

I am unsure how Shopify was able to create it unless there is a native font “Monserrat Extra Bold” that they are loading, which your platform doesn’t have.

That is why I was asking originally if you could add the default (from the website) as an option, so that the widget would pick up the Monserrat Extra Bold from the Shopify platform to use for the widget heading.

Greg

1 Like
11

Got it, thanks!

Just to make things clear, would you like to apply your website’s font only to the widget title or all widget’s element? I’ll be happy to check it with the devs for you :slightly_smiling_face:

12

Just the website’s heading font to be applied to the widget title.

1 Like
13

Unfortunately, there is no option to apply the font from the website’s only to the heading without a custom code.

The title font weight wasn’t extra bold, as this setting was applied instead of the CSS code:

image
image370Ă—556 21.3 KB

Also, I’ve removed px part next to the font-weight value in the code, and it looks correct now:

image
image1703Ă—740 64.1 KB


Please check your website and let me know if you like what you see :wink:

14

Max,

It looks great! Thank you for figuring this out for me. I will add your findings to my notes.

Regards,

Greg

1 Like
15

No problem at all!

Have a great day :wink: