Change Slideshow Heading Font

Highlighted
New Member
3 0 0

Hi there,

New Shopify user, I'm a bit stuck with the slideshow on my store's Brooklyn theme.  I want to change the font on the heading of my slideshow but can't find anything online showing me how to do it.  There doesn't seem to be an option when using the graphical editor either.  I'm happy to go into the code as I've managed to do so a few times but would need step-by-step instructions.

Any suggestions welcome!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
537 0 71

Hey there, Alice!

Savannah here from the Shopify Team. :) 

You can certainly do that by adding a line to your theme's CSS. Here's how:

  • Navigate to Online Store>Themes and select, "Edit Code" from the Actions menu on Brooklyn. 
  • In the Assets folder, select the theme.scss. 
  • Locate the .hero__title {  section by doing a command F search. By default, it's around line 2237. 
  • Add a line that says,
font-family: helvetica; 
  • Of course, you can change that to any web safe font you'd like, I'm just using Helvetica as an example . 
  • It should look like this . Hit save!

Let me know if that does the trick, or if you have any further questions!

Savannah | Social Care
support@shopify.com

0 Likes
Highlighted
New Member
1 0 0

I've tried to follow these instructions on the 'narrative' theme in my store but haven't succeeded. Is it the same step-by-step process?

0 Likes
New Member
2 0 0

Hi there,

 

Please would you mind telling me how I can change the font on my hero slide in the Debut theme? I can't seem to find the section in the code where I need to put in the new font.

 

Thanks

Pam

0 Likes
Highlighted
Shopify Partner
100 20 18

Hi @PamNel,

 

On Debut theme - You can change the font of hero slide from theme setting.  Please check this screenshot https://prnt.sc/pbaqi8

 

If you want to add new font to your theme. Then select the font from https://fonts.google.com 

 

For example: 

<link href="https://fonts.googleapis.com/css?family=Roboto:700&display=swap" rel="stylesheet">

 

copy this code into the <head> of your theme.liquid

 

h2.h1.mega-title.slideshow__title { font-family: 'Roboto', sans-serif; } to your theme css file

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes
Highlighted
New Member
2 0 0
Thanks for coming back to me.

What if I want the font on the slideshow to be a totally different font to
the headings of the rest of the text?

Thanks
0 Likes