Problem changing the font in a landing page

SOLVE
Occasional Contributor

Hi,

I have been trying to change the font of a landing page. I have uploaded the fonts in Marketing- Files and Templates- Files. Then i added them in the css:

Capture.PNG

and i called the font in the body and in the other elements:

body {
font-family: 'Adrianna-Regular' !important;
}

When i inspect the font in the browser the code is there but the font doesn't render correctly. I see a serif font instead. What should i do?

Here it is the landing page:

http://info.wearepentagon.com/rwb-newsletter-registration

 

Thanks

CSS
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Occasional Contributor

Sure!

So instead of adding the css of the font in the stylesheet document i added it in the head HTML of the specific landing page. You can find it when you go to "Settings" - "Advanced Options" - "Additional code snipperts" in the landing page. I also changed the code of importing the font to this:

<style>
@font-face {
font-family: Adrianna-Regular;
src: url(https://cdn2.hubspot.net/hubfs/4009341/Adrianna-Regular.ttf);
}
@font-face {
font-family: Adrianna-Bold;
src: url(https://cdn2.hubspot.net/hubfs/4009341/Adrianna-Bold.ttf);
}

Here it is a screenshot:

Capture.PNG

4 Replies 4
Highlighted
Advisor | Partner

Hey @Pentagon 

 

So I checked out your page and I am seeing the Adrianna bold render correctly.

Your issue could be a caching problem, try viewing in a private browser.

 

I would also suggest adding in at least a single fallback of 'Sans-Serif' for the font-face font. More on that here

Reply
0 Upvotes
Highlighted
Occasional Contributor

Hey,

Thanks for your reply. I managed to fix it this morning. 

Thanks for the link, i will add the sans serif to the css as well.

Highlighted
Advisor | Partner

Awesome news!

 

For the record, would you mind documenting the fix. This way when someone finds the post via search they have an answer.

Reply
0 Upvotes
Highlighted
Occasional Contributor

Sure!

So instead of adding the css of the font in the stylesheet document i added it in the head HTML of the specific landing page. You can find it when you go to "Settings" - "Advanced Options" - "Additional code snipperts" in the landing page. I also changed the code of importing the font to this:

<style>
@font-face {
font-family: Adrianna-Regular;
src: url(https://cdn2.hubspot.net/hubfs/4009341/Adrianna-Regular.ttf);
}
@font-face {
font-family: Adrianna-Bold;
src: url(https://cdn2.hubspot.net/hubfs/4009341/Adrianna-Bold.ttf);
}

Here it is a screenshot:

Capture.PNG