Can I adjust the slider header font in the Athens theme?

Store Design
, ,
1

Is it possible to change just the header/subheading font family tittle for the slider to ITC Avant Garde Gothic? I change it in the theme options but it changes all of the headings - i mainly just want to change the headings for the sliders if that’s possible.

Shop: Artgex.myshopify.com pass - Superpowers123

heading123.jpg
heading123.jpg817×372 40.7 KB

2

Hello @David123123

It’s GemPages support team and glad to support you today.

Please check out my suggestion below:

  1. Go to Online Store → Theme → Edit code

  2. Open file theme.liquid then add this code to above the tag

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

3

Thanks for the response! It didn’t seem to work - turned the family into a random serif font :disappointed_face:

4

Hello @David123123

It’s GemPages support team and glad to support you today.

Font show incorrect because your theme have not file font ITC Avant Garde Gothic please add this font to theme https://shopify.dev/themes/architecture/settings/fonts

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

5

Hi @David123123 ,

This is Victor from PageFly - Shopify Page Builder App

I have checked your page source but didn’t find the font name: ITC Avant Garde Gothic

I’m so sorry to say this but if you want to use this font, you have to download it or import it to Shopify first

Please check this guide from Shopify to add font: Fonts

This guide already have the ITC Avant Garde Gothic font for you to select from it

Hope this can help you solve the issue.

Best regards,

Victor | PageFly

6

I’m a bit confused on this - the ITC Avant Garde Gothic has the handle - what is that used for/as? On the theme I’m able to choose it but its not set? I’m not familiar with this.

7

@David123123

Please add the following code to your assets/section-slideshow.css bottom of the file.

body.template-index .slideshow-content-wrap .slideshow-heading,
  body.template-index .slideshow-content-wrap .slideshow-text{
    font-family: 'ITC Avant Garde Gothic' !important;
  }

Thanks!

8

I’m a bit lost, I want to use ITC avant Garde Gothic (it says its a shopify available font). On the documentation guide, I see a thing called “handles.” How do I use that for the font objects, etc. It’s a bit confusing for me I apologize.

9

Hello @David123123

It’s GemPages support team and glad to support you today.

Font handle to use on file settings_schema.json you need to know code to use this way

GemPages_8-1670467218205.png
GemPages_8-1670467218205.png831×593 22 KB

please read more on https://www.shopify.com/partners/blog/font-picker

So I recommend 3 options:

1/ Use third party hosted fonts

GemPages_1-1670466575809.png
GemPages_1-1670466575809.png991×310 21.7 KB

2/ Upload file to Assets

GemPages_2-1670466667894.png
GemPages_2-1670466667894.png975×398 39.6 KB

GemPages_5-1670466860951.png
GemPages_5-1670466860951.png1047×337 11.3 KB

3/ Upload file to Files section of the Shopify admin

GemPages_4-1670466788547.png
GemPages_4-1670466788547.png987×385 38.7 KB

GemPages_7-1670466972457.png
GemPages_7-1670466972457.png910×383 9.84 KB

GemPages_6-1670466931288.png
GemPages_6-1670466931288.png1114×331 7.9 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

10

Hi @David123123 ,

It is not working because you haven’t added the font to your theme yet.
Please follow the link I sent above, Shopify has a guide to adding font to the theme.
I tried to help you with a step-by-step but it is required to upload the font to your local device.

Hope you can understand and this can help you solve the issue!

Best regards,

Victor | PageFly

11

All of these helped! Thanks everyone!!!

12

I am glad that my solution is helpful to you :grin: .