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

[Hello2222]

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

[DigiDecoded]

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.

[Hello2222]

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';
}

[Hello2222]

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

[DigiDecoded]

whats your website url

[Hello2222]

www.curlygirlmethod.club

[DigiDecoded]

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

[Hello2222]

I'm not sure how to select them?