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

Store Design
1

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

2

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.

3

Thank you for your reply.

I added this:

@font-face { font-family: 'CaslonCP-_1'; src: url('[https://cdn.shopify.com/s/files/1/0449/3266/1416/files/CaslonCP-_1.woff2?v=1708950995](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](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](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=1708948233](https://cdn.shopify.com/s/files/1/0449/3266/1416/files/ITC_Avant_Garde_Gothic_Book_Regular.woff2?v=1708948233)'); } 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'; }
4

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

5

whats your website url

6

www.curlygirlmethod.club

7

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

8

I’m not sure how to select them?