Can I change the header and footer fonts with a custom font on Prestige theme?

BMos
New Member
24 0 0

Hi there,

 

Does anyone know if I can change the Header and footer fonts with a custom font? I have managed to make the changes to the rest of the site so I would like to align all areas if possible. 

 

I am using the Prestige theme. 

 

thanks,

Replies 12 (12)

Anshul_arora
Navigator
309 76 54

Hello @BMos 

Hope you are doing well.

The following steps you can use to add custom font in your shopify store as well as change existing font of header and footer section-:

1. First download the custom font file (file must be in - .ttf, .woff, .woff2, .eog, .svg)

2. Go to the Themes section in Shopify dashboard.

3. Then click Action -> Edit Code -> Click Assets.

4. Next, add a new asset and upload your custom font file.

5. Next, open the theme.scss.liquid file or .css.liquid file and paste the below mentioned code.

@font-face {
font-family: 'Name of Your Custom Font';
src: url('{{ 'your-font-file.woff2' | asset_url }}') format('woff2'),
url('{{ 'your-font-file.woff' | asset_url }}') format('woff');
/* Add additional file formats if available, e.g., .ttf , .woff, .svg*/
}

6. Now, find the CSS selector related to the header and footer elements.

7. Once you find the section, add or change the existing code with

.site-header {
font-family: 'Name of Your Custom Font', sans-serif;
}

.site-footer {
font-family: 'Name of Your Custom Font', sans-serif;
}


8. Save the changes and preview.

I hope this helps.

Let me know if you need any help.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
BMos
New Member
24 0 0

Hi @Anshul_arora 

 

thank you for the above. It is the CSS selector that I am having the issues with, where would I find this?

Anshul_arora
Navigator
309 76 54

Hello @BMos 

Ok, I understand that you have an issue with the CSS selector.

The CSS selectors depend on the elements you want to change the fonts to. For example, if you want to change the navigations fonts then you can use :

.header__primary-nav ul li a {
font-family: 'Name of Your Custom Font', sans-serif;
}

You have to check the file paths, if paths are not correct, fonts will not work. It's a bit complicated process.

If you are facing issues in recognizing the correct selector, then you can share your website link.

I will check and let you know the appropriate way to resolve the issue.

 

I hope the information helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
BMos
New Member
24 0 0

Hi @Anshul_arora 

 

the link is:

www.mosthelabel.com

I would like to change the navigation & drop down as well as the footer.

 

thanks

Anshul_arora
Navigator
309 76 54

Hello @BMos 

There is currently no class selector added in your CSS for the header menu and footer menu, as i checked.

The font family is coming from the body selector by default.

So you will need to add a new selector and define the font family in it.

For your header menu, the selector can be:

.Header__MainNav

You can define the font family in it and the same will be apply to your menu. Do not forget to check the steps i sent for adding a font file and mention font face.

For footer menus, use this selector :   .Footer-block__content

So lets say you want to use the font : 'Montserrat' for footer, so you can just add this in your theme.scss.liquid file:

.Footer-block__content {
font-family: 'Montserrat';
}

Just replace the font family with the one you want to apply.

Hope it helps.

Thank you

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
BMos
New Member
24 0 0

Hi @Anshul_arora 

this is great, it is working as expected on Desktop however it is not working on mobile. Does mobile need a different code? I placed the above code at the bottom of our theme.css file as we do not have the file mentioned above (theme.scss.liquid). Do you know how I can also change the sizes, the footer copy is now quite small. 

thanks so much for all of your help.

Anshul_arora
Navigator
309 76 54

Hello @BMos 

For mobile view, you will need to use the mobile responsive media queries.

Something like this:

@media only screen and (max-width: 600px) {
.Footer-block__content {
font-family: 'Montserrat';
}
}

Using this you can apply the font on the mobile also. You just need to add the class and the CSS property inside the media query like i shared above.

To change the font size, please use font size property of CSS.

example :

.Footer__Inner .Linklist .Linklist__Item .Link {
font-size: 16px!important;
}

Please add to update you footer menu font size.

Thanks

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
BMos
New Member
24 0 0

Thanks @Anshul_arora 

My footer is now working correctly.

My Drop down menu (header nav) and the product description area is still not working on mobile. I put the below code in the theme.css but unfortunately no change

 

@media only screen and (max-width: 600px) {
.Header__MainNav__content {
font-family: 'Brandon';
}
}

 

Anshul_arora
Navigator
309 76 54

Hello @BMos 

.MegaMenu__Item .Link {
font-family: 'Brandon';
}

.Parent--Nav__Title {
font-family: 'Brandon';
}

These should be the identifier for the header menu font family update. Same you can use for mobile view, just use the media query which i shared before.

For product description text font :

.ProductMeta__Description, .ProductMeta__Text {
font-family: 'Brandon';
}

Please make sure to have the font correctly added in your CSS file.

Thanks

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
BMos
New Member
24 0 0

thanks @Anshul_arora 

unfortunately this did not work.

Anshul_arora
Navigator
309 76 54

Hello @BMos ,

Thank you for your reply. Sorry it didn't work for you

I can assist you in implementing correct code as per your needs, but for this I need access to your store code. So, I can analysis the main issue and can better help you

Can I invite access to your store ? I can then login and look at the issue

Kindly let me know and i will send the request

[ Do note, I am travelling next 2 days and will be back on Monday ]

I look forward to your response.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
ambientcandle19
Excursionist
47 0 4

would base.css work for this on the craft theme