Add Adobe fonts to my Prestige theme

Store Design
,

Topic summary

Goal: use Adobe Fonts in a Shopify Prestige theme.

Initial issue: pasting Adobe Web Project code into theme.liquid’s and adding font rules in theme.css did not apply the font.

Advice given: self-host fonts by uploading WOFF/WOFF2 (web font formats) to Files, then reference via @font-face and set font-family for body and heading selectors. Counterpoint: Adobe Fonts (Typekit) generally cannot be downloaded; they are added via a to load kit CSS.

Follow-up: suggestion to place the kit link in theme.liquid and then set font-family (e.g., “azo-sans-web”) in theme.css for body and heading classes. However, the code snippet was missing, and the specific line numbers provided do not match the Prestige theme for the requester.

Latest update: the kit link has been added successfully (Step 1). Applying the font sitewide (Step 2) remains unclear due to incorrect line references.

Action needed: read the actual font-family names from the loaded Typekit CSS and assign them to the body and heading selectors used by Prestige (target selectors, not line numbers).

Status: unresolved; further guidance on correct selectors and font-family names is required.

Summarized with AI on December 27. AI used: gpt-5.
1

We have tried adding the code from adobe web projects into the of theme.liquid and added the code for the font to theme.css but it is not working. Please help.

2

Hello @CostaEffie

firstly Download your font WOFF and WOFF2 format and upload it into files and then copy URL and paste the URL in src: URL();

Step-1 Step 2:- Go to Online Store----------->Theme-------------> Edit code------------> find a file “theme.css” ----------- >at the very top add this code (replace font name and font url)

@font-face {
  font-family: Enter-Font-name;
  src: url(Enter-your-font-url.woff);
}

Step 2:- Go to Online Store----------->Theme-------------> Edit code------------> find a file “theme.css” ----------- > find “body” in line number 18
add your font-family css
e.g:-
“body {
font-family: BananaGrotesk-Medium;
}”
also Line number 7589 fint this “.heading, .h1, .h2, .h3, .h4, .h5, .h6, .prose :where(h1, h2, h3, h4, h5, h6)” and replace your font-family name with default name
Please Use WOFF and WOFF2 font formats

Please let me know

Thanks

3

Hi there, thank you but there is no option to download Adobe fonts? I can only copy and paste the etc

4

Hello @CostaEffie

5

I do not understand your message my friend.

6

Then here is a code you can put in your “theme. liquid file”

Step-1 :- Go to Online Store----------->Theme-------------> Edit code------------> find a file “theme.liquid”
after head start —> or above the head close add this code

Step 2:- Go to Online Store----------->Theme-------------> Edit code------------> find a file “theme.css” ----------- > find “body” in line number 18
add your font-family css
e.g:-
“body {
font-family: azo-sans-web;
}”
also Line number 7589 fint this “.heading, .h1, .h2, .h3, .h4, .h5, .h6, .prose :where(h1, h2, h3, h4, h5, h6)” and replace your font-family name with default name

Please let me know

Thanks

1 Like
7

Thanks for the info, Step 1 is OK and I’ve added it.

Step 2 is confusing, line number 18 in theme.css is not body it’s just a } symbol

Line 7589 is also just a blank space?