How can I update CSS to use additional custom fonts in theme editor?

Hello2222
Shopify Partner
8 0 0

Hi,

I have uploaded 4 fonts to assets.

 

I have allocated the heading font and body font in typography fine.

 

How would i update css to be able to use the next two ?

 

Amalfi coast font in Hexcode #F44A87 to be used when i click italic in the shopify theme editor.

KIONA font to be shown when i click Bold in the shopify theme editor

 

 

 

hk
Replies 7 (7)

DigiDecoded
Shopify Partner
158 19 18

hey @Hello2222 ,

First, generate font face of your fonts from this website https://transfonter.org/
and then add that CSS file to the assets and then upload the fonts files and replace the file destination.

 

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp | Website
Hello2222
Shopify Partner
8 0 0

Thank you for your reply.

 

I added this: 


<style>
@font-face {
font-family: 'CaslonCP-_1';
src: url('https://cdn.shopify.com/s/files/1/0449/3266/1416/files/CaslonCP-_1.woff2?v=1708950995');
}
@font-face {
font-family: 'Kiona-Bold';
src: url('https://cdn.shopify.com/s/files/1/0449/3266/1416/files/Kiona-Bold.woff2?v=1708951011');
}
@font-face {
font-family: 'amalfi-coast-_1';
src: url('https://cdn.shopify.com/s/files/1/0449/3266/1416/files/amalfi-coast-_1.woff2?v=1708951043');
}
@font-face {
font-family: 'ITC_Avant_Garde_Gothic_Book_Regular';
src: url('https://cdn.shopify.com/s/files/1/0449/3266/1416/files/ITC_Avant_Garde_Gothic_Book_Regular.woff2?v=1...');
}
h1{
font-family: 'CaslonCP-_1';
}
}
h2{
font-family: 'Kiona-Bold';
}
}
h3{
font-family: 'amalfi-coast-_1‹';!important;
}
p {
font-family: 'ITC_Avant_Garde_Gothic_Book_Regular';
}

hk
Hello2222
Shopify Partner
8 0 0

However when i select h2, h3 in the theme editor the font doesnt appear 

 

hk
DigiDecoded
Shopify Partner
158 19 18

whats your website url

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp | Website
Hello2222
Shopify Partner
8 0 0
DigiDecoded
Shopify Partner
158 19 18

did you select them? i guess the custom font would be auto select using css

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp | Website
Hello2222
Shopify Partner
8 0 0

I'm not sure how to select them?  

 

hk