Any hiccups using Google fonts inside banners?

Advertising
1

Every single banner ad I’ve produced has used images of type, PNG or SVG, rather than live HTML type itself. I know, crazy! No one’s wanted to use a standard font in their designs—until now.

Using a Google font inside of Hype is easy peasy, no questions there. But since my first foray with inserting Roboto will be a run of about 800(!) banners, I’d prefer not to have any surprises halfway thru.

Playing around, I've noticed there's a split second lag before the text appears. Are there any other quirks I should know about?

2

Most likely because they are using auto or swap instead of block see

3

I'm not seeing any fallback font, just blank space for a half second before the Roboto lines show up. I prefer blank space over FOUT, so that's cool.

When I change the type to fade in quickly instead, everything's smooth.

4

Yeah, that sound like block … that option allows up to 3 seconds of blank space. You could hide the entire ad and display it using
document.fonts.ready.then(function () { /*... all fonts loaded...*/ }); although IE 11 doesn't support the API

Here is a snippet that hides the Hype document until fonts are loaded or if 3 seconds pass (fallback). To try it out, put it in your Head HTML in a script-tag:

 function HypeDocumentLoad(hypeDocument, element, event) {
    var fontTimout;
    var fontReadyCallback = function(){
        clearTimeout(fontTimout);
        element.style.visibility = 'visible';
    }
    element.style.visibility = 'hidden';
    document.fonts.ready.then(fontReadyCallback);			
    fontTimout = setTimeout(fontReadyCallback, 3000);
}

if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":HypeDocumentLoad});
4 Likes
5

It be cool if we had font to transparent .png in future versions of Hype with ability to break font characters to images in individual layers.

3 Likes
6

One thing that will reduce this delay is adding:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

To the <head> of your documents, which will warm up the connection before it is made.

(Also see @CheeseDeluxe's suggestions)

1 Like
7

By default, Hype puts the Google css links prior to anything I can add to the head. Is the workaround to remove those Google links as Hype assets and instead manually put them in the head after this preconnect link? Actually, I just tried that and it doesn't work.

8

The order doesn't matter so much here, since as soon as the browser sees the preconnect instruction, it will do it -- this will happen before the css file is downloaded. (So you can just add preconnect to the head and you should see a small speedup)

9

Ah okay. No perceptible difference, before and after, on my machine in that case. Great tip tho!

10

My tip to using Google fonts, or maybe any custom fonts, is to include the following within the head tag, to ensure everything looks as consistent as possible across browsers.

<style>
	html {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
	}
	
	@-moz-document url-prefix() {
		body { font-weight: lighter !important; }
	}
</style>
4 Likes
12

good one.

13

Hello Daryl, did this campaign go well with your native Google Fonts on the HTML banners? I'm also looking into using Google Fonts for a Google campaign in Hype just wanted to make sure everything will come out fine and bug free...
Thanks!

14

Campaign went off without a hitch. Here's one of the files, in case you want to see exactly how things were structured.

POC-EN-360_300x250.zip (117.6 KB)

3 Likes
15

Omg, thank you for your help!! :))