Refresh Theme - Times New Roman as font after adding+removing custom font

[MichaelFawx]

Hi!

I have earlier added custom fonts to my page, adding this code in the base.css:

@font-face {

font-family: 'PTSans';
src: url('https://cdn.shopify.com/s/files/1/0747/7909/9435/files/PTSans-Regular.woff2?v=1726870285') format('woff2');

and this code in the theme.liquid:

@font-face {

font-family: 'Raleway';
src: url('https://cdn.shopify.com/s/files/1/0747/7909/9435/files/Raleway-SemiBold.woff2?v=1726869972') format('woff2');

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}

When I no loger wanted these two custom fonts I removed them but now all fonts are Times New Roman and I don't know what is causing this or what to do!

Can anyone check my code and see if they see any obvious mistakes? Store URL: https://petopiapets.net

[Made4uo-Ribe · Accepted solution]

Hi @MichaelFawx 

You need to edit your base.css and put back the default code. 

1. From your Admin page, go to Online Store > Themes
2. Select the theme you want to edit, click the three dots to edit code
3. Under the Asset folder, open your base.css file, find the code " font-family: 'Raleway' !important;" It is on line 263
4. Replace the line of code with the code below and then SAVE. You can use the theme editor to change the font

  font-family: var(--font-heading-family);

See image for more information

Please press 'Like' and mark it as 'Solution' if you find it helpful.

[MichaelFawx]

That's great, thanks! 😄

[MichaelFawx]

However, I now see that all fonts are headings. I also copied the code you provided to body and p

Here is the current code:

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.reviews_title,
.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;
}

body, p, .p {
  font-family: var(--font-heading-family);