Blog, Website & Page Publishing

CAngelAU
Member

Adobe Fonts on Website

SOLVE

I know my way around basic CSS and HTML but am having trouble with using my Adobe fonts on my website. 

 

Adobe don't let you download fonts anymore to upload into the files on Hubspot, they only give you import links. They say to place them in the head code on the page, which I have done. 

I have also tried adding the import link into the child theme CSS file. 

 

<style>
@import url("https://use.typekit.net/esi7ved.css");
</style>

 

p{
font-family: agenda, sans-serif;
font-style: normal;
font-weight: 100;
}

 

Can anyone assist?

 

0 Upvotes
1 Accepted solution
Jnix284
Solution
Hall of Famer

Adobe Fonts on Website

SOLVE

Hi @CAngelAU I would recommend moving it back to the child.css instead of the individual page.

 

When you do, make sure you remove the <style> tags from the @import.

 

If you leave it in the head code, the closing </style> tag would have to be after your last line of code, which is likely the cause of the issue:

<style>
@import url("https://use.typekit.net/esi7ved.css");

p{
font-family: agenda, sans-serif;
font-style: normal;
font-weight: 100;
}
</style>

 

Also, you're only defining the paragraph style, what you likely need/want to do is redefine the root variables used in the theme.

 

You'll need to check the variables used for your theme specifically, here's an example replacing all font families for POWER Pro theme (this is from a site I'm working on currently):

 

:root {
    --ff-base: agenda, sans-serif !important;
    --ff-accent: agenda, sans-serif !important;
}

 

Some themes handle font family separate from font weight.

 

If you can provide a link to a sample page with an indication of the fonts on the page you want to change, I can provide you with the CSS you need.


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon

View solution in original post

1 Reply 1
Jnix284
Solution
Hall of Famer

Adobe Fonts on Website

SOLVE

Hi @CAngelAU I would recommend moving it back to the child.css instead of the individual page.

 

When you do, make sure you remove the <style> tags from the @import.

 

If you leave it in the head code, the closing </style> tag would have to be after your last line of code, which is likely the cause of the issue:

<style>
@import url("https://use.typekit.net/esi7ved.css");

p{
font-family: agenda, sans-serif;
font-style: normal;
font-weight: 100;
}
</style>

 

Also, you're only defining the paragraph style, what you likely need/want to do is redefine the root variables used in the theme.

 

You'll need to check the variables used for your theme specifically, here's an example replacing all font families for POWER Pro theme (this is from a site I'm working on currently):

 

:root {
    --ff-base: agenda, sans-serif !important;
    --ff-accent: agenda, sans-serif !important;
}

 

Some themes handle font family separate from font weight.

 

If you can provide a link to a sample page with an indication of the fonts on the page you want to change, I can provide you with the CSS you need.


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon