Adobe Fonts (Formerly Typekit)

New Member
5 0 0

Hello! I am trying to add an Adobe Font (Filson Pro) to my client's site (using Debut) and am having a lot of difficulty.

I am only able to find tutorials for Typekit, and now that it is Adobe Fonts, I'm not sure if I am doing it correctly as the fonts will not change. From my understanding, I add the web project code to the head of the HTML and then change the CSS. However, nothing I do is making any change to the site and so I'm sure I'm doing it incorrectly. 

If anyone has experience with this please help me out with where to place the code, or, if I can no longer add an Adobe Font, that would be good to know as I can't seem to find a straight answer.

0 Likes
New Member
5 0 0

UPDATE

This problem has almost been solved by me messing around with code all day but I am still stumped about one thing... I am able to get most text on the website set in the Adobe Font, but the headers in the navigation and the titles for some pages are not showing up in the font. 

I was able to override all text with 

* {
    font-family: filson-pro, sans-serif;
    font-style: normal;
}

at the bottom of my CSS but would like to find where in the code I can change the text of the menu headers and footers etc so I can have a little more control over the weights.

0 Likes
Shopify Staff
Shopify Staff
341 26 52

Hey, rachelket,

My name is Tira and I am a Shopify Guru ready to help.

It sounds like you’ve already done some research and tried to add Filson Pro to your client’s store.

Adding new fonts to the theme is outside our scope of support as noted in our Design Policy here. I did want to forward this document from Out of the Sandbox on Using TypeKit fonts with your theme here. It is a really detailed step-by-step guide on adding the font to your theme using some javascript as well as CSS.

Another option would be to contact a Shopify Expert for help with changing the font of your header and footer. Shopify Experts can assist with coding customizations.

I am also curious as to what suggestions the community will provide!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
5 0 0

Thank you Tira! I was actually able to figure it out after a lot of experimenting!

0 Likes
Shopify Partner
1 0 0

Hey Rachel, Care to shed some light as to how you did that? Code? :)

0 Likes
New Member
2 0 1

Hi Rachel, could you please tell here how did you manage to get Adobe Font working on your theme? Where exactly did you add the code and what that was. It would be really appreciated.  

 

I look forward to your answer. 

 

Br,

Piotr

0 Likes
Shopify Partner
10 0 2

Hey hey,

 

This is how I got Adobe fonts (aka Adobe TypeKit) fonts to work in a custom theme:

 

In the <head> section of layout/theme.liquid, add the embed code provided by Adobe (I added 'type', but I don't believe it is required):

 

<head>
...
<link type="text/css" rel="stylesheet" href="https://use.typekit.net/ndu1gov.css">
...
</head>

Then, in a stylesheet, just slap in the @font-face CSS exactly as provided by Adobe and reference in the relevant selector (.neon, in my case):

 

@font-face {
font-family: neon-stream, sans-serif;
font-weight: 400;
font-style: normal;
}

.neon {
 font-family: neon-stream;
 color: #FB4264;
 text-shadow: 0vw 0vw 3vw #F40A35;
}

Cheers,

Andrew

0 Likes
New Member
2 0 0

I am also having this issue. I'd like to add an Adobe Font to a client site. I'm using the theme Atlantic. I've posted the Adobe Font code into the header of theme.liquid, and I've also pasted the CSS code:

 

@font-face {
font-family: prestige-elite-std, monospace;
font-weight: 400;
font-style: normal;
}

 

into theme.scss.liquid . But now I don't know how to actually implement the font. I've tried a few things but so far all I've managed to do is break the site. I also tried Andrew's method to no avail. Any help would be appreciated! 

0 Likes
Shopify Partner
10 0 2

Hi e-puls...

 

Maybe you sure did this already, but now that you have added the @font-face rule, you need to reference the font-family in the CSS font-family property of the class you are trying to use the font in. For example:

 

@font-face {
font-family: prestige-elite-std, monospace;
font-weight: 400;
font-style: normal;
}

 

.your-class{

font-family: prestige-elite-std;

}

 

good luck!

0 Likes
New Member
2 0 0

Andrew, so far I have not been successful. In your first post, you wrote "Then, in a stylesheet, just slap in the @font-face CSS exactly as provided by Adobe and reference in the relevant selector (.neon, in my case):" Did put that code into theme.scss.liquid? Or did you create a stylesheet? 

 

Also, I'm having a hard time figuring out what the selector should be. Your example didn't make much sense to me, because its the name of your font? The font I'm trying to connect is one I want to use for everything on the website: navigation, all of the headers, all the body text. Would you be able to help me figure out how to identity what class(es) to reference? 

 

I am so frustrated with this...normal html and css I have no issues with editing, but this liquid theme code is a whole different beast.

0 Likes