CMS Development

Pentagon
Member

Problem changing the font in a landing page

SOLVE

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

0 Upvotes
1 Accepted solution
Pentagon
Solution
Member

Problem changing the font in a landing page

SOLVE

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

View solution in original post

4 Replies 4
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Problem changing the font in a landing page

SOLVE

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Pentagon
Member

Problem changing the font in a landing page

SOLVE

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.

Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Problem changing the font in a landing page

SOLVE

Awesome news!

 

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Pentagon
Solution
Member

Problem changing the font in a landing page

SOLVE

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