How can I add a custom font to my Debutify theme?

Store Design
1

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
Captura de pantalla 2020-09-09 a las 21.39.55.png673×120 22.5 KB

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
Captura de pantalla 2020-09-09 a las 21.45.09.png687×132 27 KB

Thanks and regards,

Toni

2

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


  
    
   
  
  
    

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:

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

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

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

4

Anyone know the answer?

5

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.