Add a custom font to a Debutify Theme

Highlighted
New Member
3 0 0

Hi Shopify Experts,

 

I'm building my first Shopify website and I would like to know how could I add a font to my Debutify theme. I see a "tutorial" (https://debutify.crisp.help/en/article/how-to-add-custom-font-in-debutify-sq8e79/) but I'm not a code guy and I don't wanna mess up all the code. 

 

Following this tutorial, I should go to Assets > theme.scss.liquid, scroll to the bottom and paste this code:

@font-face {
font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
url("NAME-OF-FONT-FILE.woff") format("woff");
}

My code had 8109 lines and I pasted it like the screenshot. Would that be correct? 

Captura de pantalla 2020-09-09 a las 21.39.55.png

Then it says to add this code:

Your CSS selector here { font-family: "NAME OF FONT" !important; }

As an example:

body { font-family: "NAME OF FONT" !important; }

What's the CSS and why does it say "body"? I want the font all over my website (header, body, text, etc). What should I use as code then? Would it go inside the bracket as the second screenshot?

Captura de pantalla 2020-09-09 a las 21.45.09.png

 

Thanks and regards,

 

Toni

0 Likes
Highlighted
Shopify Partner
1435 194 488

body applies to all content sections of the website. HTML's basic structure is:

 

<!DOCTYPE html>
<html>
  <head>
    <title>Your Page Title</title>
   <!-- style sheets and some JS files are linked in the head -->
  </head>
  <body>
    <!-- all other content goes in the body, even a header would be represented with a header tag inside the body, not 
     the head -- >
     <header></header>
  </body>
</html>

 

So by targeting the body you're targeting all of the fonts.

You would put it outside the font face, the font face just kind of creates it for you to use:

@font-face {
  font-family: 'Plys Jakarata Display';
  src: url("path-to-your-font.woff") ;
}

body {
  font-family: 'Plus Jakarata Display'!important;
}

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
3 0 0

Dear Ninthony,

 

Thanks a lot for your reply. I need to add 4 variations of the same font (regular, medium, light and bold). Would this code be correct?

@font-face {
  font-family: "Plus Jakarta Display";
  src: url("plusjakartadisplay-bold-webfont.woff2") format("woff2"),
       url("plusjakartadisplay-bold-webfont.woff") format("woff");
  url("plusjakartadisplay-regular-webfont.woff2") format("woff2"),
       url("plusjakartadisplay-regular-webfont.woff") format("woff");
  url("plusjakartadisplay-mediumitalic-webfont.woff2") format("woff2"),
       url("plusjakartadisplay-mediumitalic-webfont.woff") format("woff");
  url("plusjakartadisplay-light-webfont.woff2") format("woff2"),
       url("plusjakartadisplay-light-webfont.woff") format("woff");
  }

body { 
  font-family: "Plus Jakarta Display" !important; 
}

 

Thanks a lot for your help and regards,

 

Toni

0 Likes
Highlighted
New Member
3 0 0

Anyone know the answer?

0 Likes
Highlighted
Shopify Partner
1435 194 488

Hey @tonir11 -- if you want I can help you out. There's a link here that shows how you can add multiple styles to your font face:

https://stackoverflow.com/questions/28279989/multiple-font-weights-one-font-face-query

So if you want to give that a go, feel free. If you want help you can DM me and I can request access to your store. Just make sure all your fonts are uploaded to your Assets though so I have something to work with.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes