My theme is studio. I’m trying to have one font for the domain name at the top and one before the rest of the Store. This has been a problem for me since I am new to this. I don’t know how to work with liquid or coding. In the typography it has listed header which I thought would be my domain name at the top and body which I thought would be the rest of the Store, But it didn’t work out that way whatever I put into the header went throughout the store. Whatever solution has to be very simplified for me. I have a screenshot explaining this issue.
Topic summary
A Shopify user working with the Studio theme wants to apply different fonts to their store name (domain name at top) versus the rest of the site content. They’re new to coding and don’t understand Liquid.
The Problem:
- The theme’s typography settings show “header” and “body” options, but changes to “header” affect the entire store instead of just the store name
- Screenshots show the user’s confusion about which settings control which elements
Solutions Offered:
-
Third-party app approach: One user recommends the free “RT: Google Fonts, Custom Fonts” app, which allows font targeting through a visual selector interface
-
Code-based solution: Another user provides specific CSS code modifications for the base.css file that would make h1 elements use the heading font while h2-h5 use the body font
Current Status:
The original poster is willing to try the code solution but needs additional guidance on locating and accessing the base.css file for editing. The discussion remains open with the user awaiting step-by-step instructions.
1 Like
Shopify and assigning fonts is long overdue for a overhaul. It’s pretty frustating. I use RT: Google Fonts, Custom Fonts
It’s free and it allows you to target fonts by selecting them. If you watch the video guide it will help understand how it works.
Hope that helps.
Hi @MartyOregon
You will need to edit the code in the base.css file to do your request.
Please file this code in base.css file
h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: var(--font-heading-family);
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
color: rgb(var(--color-foreground));
line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
word-break: break-word;
}
Replace it with this code
h1 {
font-family: var(--font-heading-family);
}
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: var(--font-body-family);
}
h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
color: rgb(var(--color-foreground));
line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
word-break: break-word;
}
Thank you Dan, I could change that part of that coding I believe. Like I told you I am new at this can you show me where to get to the coding Ok maybe a screen shot?