Hey Sarah

I’m going to open a ticket for you so we can dig in. Lookout for an email from support.

Hi Johnny,

I am just following up on this as it still hasn’t been fixed and it has been marked as solved.

Previous to the 8th of December 2014, all of our pages were rendering external fonts perfectly.

Is there any way to fix this?

Regards

Hi Sarah - Johnny sent a couple of emails to you and it looks like he closed the ticket because we never heard back–I’ll get him to reach out again via his own email rather our ticketing system, which may have been getting filtered to your spam folder.

Hey Sarah

Just shot you another reply from my personal email. Hopefully it gets to you this time!

Just following up here incase anyone else seeing this runs into a similar problem.

The issue Sarah had was caused by permissions not being enabled cross domain from where her fonts were hosted. Take a look at the @font-face section in the support article below for more info.

http://support.unbounce.com/entries/4…

Hi,

I’m building a landing page for a client who requested a custom font. The url is signup.onedrop.today.

I found & read your guide last night that referenced installing custom fonts via @font-face, and followed the instructions to generate the required CSS. What I experienced was after entering the CSS into the stylesheet and previewing the page, a white strip of raw CSS at the top of my landing page.

After that, I tried entered the custom font via HTML only. This actually worked & as I could see when I previewed via my laptop and could also see it on my Android, so I thought I was good to go.

I emailed my client the link, only to receive an email back saying all he sees is a serif font.

I’ve included below both the HTML & CSS I’ve tried so far.

The HTML I’m using:

NAVIGATING DIABETES, TOGETHER.

The @font-face CSS I tried:

@font-face {

   font-family: ‘geometria_lightlight’;

   src: url(‘Geometria-Light-webfont.eot’);

   src: url(‘Geometria-Light-webfont.eot?#iefix’) format(‘embedded-opentype’),

        url(‘Geometria-Light-webfont.woff2’) format(‘woff2’),

        url(‘Geometria-Light-webfont.woff’) format(‘woff’),

        url(‘Geometria-Light-webfont.ttf’) format(‘truetype’),

        url(‘Geometria-Light-webfont.svg#geometria_lightlight’) format(‘svg’);

   font-weight: normal;

   font-style: normal;

}

Finally, I also noticed I wasn’t able to use custom fonts for the page’s “Submit” button. Is that possible vis CSS? And if so could you include an example of how I need to reference the code.

Your assistance is much appreciated.

-Nicole

Hi,

I’m building a landing page for a client who requested a custom font. The url is signup.onedrop.today.

I found & read your guide last night that referenced installing custom fonts via @font-face, and followed the instructions to generate the required CSS. What I experienced was after entering the CSS into the stylesheet and previewing the page, a white strip of raw CSS at the top of my landing page.

After that, I tried entered the custom font via HTML only. This actually worked & as I could see when I previewed via my laptop and could also see it on my Android, so I thought I was good to go.

I emailed my client the link, only to receive an email back saying all he sees is a serif font.

I’ve included below both the HTML & CSS I’ve tried so far.

The HTML I’m using:

NAVIGATING DIABETES, TOGETHER.

The @font-face CSS I tried:

@font-face {

   font-family: ‘geometria_lightlight’;

   src: url(‘Geometria-Light-webfont.eot’);

   src: url(‘Geometria-Light-webfont.eot?#iefix’) format(‘embedded-opentype’),

        url(‘Geometria-Light-webfont.woff2’) format(‘woff2’),

        url(‘Geometria-Light-webfont.woff’) format(‘woff’),

        url(‘Geometria-Light-webfont.ttf’) format(‘truetype’),

        url(‘Geometria-Light-webfont.svg#geometria_lightlight’) format(‘svg’);

   font-weight: normal;

   font-style: normal;

}

Finally, I also noticed I wasn’t able to use custom fonts for the page’s “Submit” button. Is that possible vis CSS? And if so could you include an example of how I need to reference the code.

Your assistance is much appreciated.

-Nicole

Hey Nicole

The font appears to load up just fine for me. What browser was your client using to view the page? It might help to get them to try different browsers as well.

As for targeting the submit button. You can just reference it’s id followed by the .label class. If your buttons ID is #lp-pom-button-14 then your id would be:

if your issues persist further shoot a email to support@unbounce.com and we can investigate things together

Hi

I have the same issue as Jose Caballer.

My customer has on his website a personalised font not available in unbounce. How can I use it for my landing page ? I tried to upload css file following instructions but I have the same issue as Jose Caballer above. thanks

Hey @Cristina_Hernando_Pa,

In 99% of the cases a font not loading properly is due to wrong/missing CORS configuration on the hosting server.

It would help if you can share you page here so we can take a look.

Best,

Hristian