Externally hosted fonts are not being rendered anymore

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

Hey Sarah

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

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

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