Hi team, i am trying to change the heading text font style on banner image only (without changing the font style for the whole template). Would appreciate it if someone could guide. The font style i am looking at going for is ITC Tapioca Medium
Please store url without it i can’t help you!
If your site already have the ITC font than use below css code to change the font style-
.banner__heading.h0 {
font-family: 'ITC Tapioca Medium';
}
Hi @arqumat
This is Theodore from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Theodore | PageFly
<phong cách>
@saim007 Tried it but not working. The font is available in the theme
@PageFly-Theodor Unfortunately didnt work
Can you please share screenshot of where you add the font file and where you added the font in the css so i can give you proper code.
@saim007 the font is part of the Theme setting system font under typography option as you can see in the screenshot below
The code you provided was added to the theme settings custom css option. I did not edit code but added to custom css option. Please see screenshot below
I checked the screenshot and see in the Typography if you choose this font than it will applied on the whole website typography because it is the inbuilt font. If you want to use that font on specific texts then you have to upload the fonts in the Assets tab and put the below code in your css file.
@font-face {
font-family: 'Tapioca ITC';
src: url('TapiocaITC.eot');
src: url('TapiocaITC.eot?#iefix') format('embedded-opentype'),
url('TapiocaITC.woff2') format('woff2'),
url('TapiocaITC.woff') format('woff'),
url('TapiocaITC.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
.banner__heading.h0 {
font-family: 'Tapioca ITC';
}
See screenshot below-
Direct download link of the fonts is here - https://gofile.io/d/Ep7dGn
@saim007 I have a added the files to the assets tab and when i then input the code in custom css, i get an error message. Please see screenshot below
You have to just add the asset link before the font name it is little bit tricky part you can give me staff role access so i can fix for you quickly.
1 Like
@saim007 I have sent you PM
@arqumat You can check now the font is updated on the banner.
@saim007 awesome! thank you so much!
1 Like