Adding Custom Fonts to Debut Theme

New Member
5 0 0

Hello,

 

I am using the Debut Theme and would like to add 3 custom fonts to my site. I am not sure if the fonts I want to add are available on Shopify Font Picker. How can I find out? The fonts are Latienne Pro, Poiret One and Antipasto. I would love some help on how to add these to my site. Also, is there a way of customizing which font goes where? For example, I want the font on the navigation bar and buttons to be Antipasto, and Latienne Pro for the product titles and description.

 

Thank you!

Federika

0 Likes
Shopify Partner
106 9 17

Hi there, 

 

You can certainly add custom fonts to your theme, including Adobe Typekit fonts, Google Fonts, and your own custom fonts as well. 

 

Latienne Pro is available on Typekit which is Adobe fonts. 

Poiret One is part of Google fonts so adding it should be straightforward.

Antipasto font is definitely custom so you would have to have a license and add all font type for it TTF, OTF, etc. 

 

Definitely doable, but requires some custom development. 

 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
New Member
5 0 0

Thank you Oscar! Could you show me how to add the Adobe and Google fonts to my theme? Also, how can I specify which font is used in which part of the site? I might choose a similar font to Antipasto that is on these platforms to make it easier! 

Thank you so much.

0 Likes
Shopify Partner
106 9 17

To add Adobe Fonts you need to have an account, just go here and create one: https://fonts.adobe.com/fonts 

 

Once you have an account go to https://fonts.adobe.com/typekit and create a web project, then select the fonts you want to use and add them to the project, once you have your fonts, you'll get a script that needs to be inserted in the theme.liquid file before the closing </head> tag the script looks like this:

 

<link rel="stylesheet" href="https://use.typekit.net/epr7ivw.css">

Once you add that script you'll be able to include your font-family in your theme's CSS file. Ex.

h1, h2, h3, h4, h5, h6 {
font-family: 'your-awesome-font', sans-serif;
}

Hope this helps. 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes