Externally hosted fonts are not being rendered anymore


#1

As of the 8th December, externally hosted fonts are not being rendered anymore on all devices and browsers except for safari on Apple devices.

I think it must have something to do with the update on the 8th that dealt with the apple fonts.

Please assist


#2

Hey Sarah

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


#3

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


#4

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.


#5

Hey Sarah

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


#6

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


#7

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


#8

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:


#lp-pom-button-14 .label {
    font-family: 'geometria_lightlight';
}

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


#9

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…