Jump to content
Search Community

Web fonts and general file size

Jonny test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello all, 

 

I'm sure we're all making the transition to HTML5, and finding a lot out a long the way - and getting mixed messages a lot!

I'm interested to hear people's opinions on using web fonts in html5 banners, as well as general approach to file size. 

 

There seems to be very little to no advice on this, and i've had to liaise with ad server platforms on how to use web fonts - does it count as initial load, do we store locally or via CDN etc?

 

What are other people's opinions?

 

Currently I locally store all web fonts needed (ttf, woff, eot and svg).

I only count the zipped file size of the largest type file format for each type weight, and add that to the html, css, js and images.

- i link to GSAP via CDN.

 

I try to aim to have the whole ad within 200k.

Largest font size comes in to about 60-80k in total for two weights, that leaves 120-140k for everything else.

 

I could use SVGs, but this makes it impossible to use splitText plugin for example.

 

How are other people approaching these fresh challenges?

 

 

J.  :)

Link to comment
Share on other sites

Yup great questions! But always really depends on the ad serving platform you are using, as they all have their own rules.

 

Web Fonts

Ad building platforms like Celtra/BannerFlow allow you to upload fonts to their severs to be allowed to linked into your creative, but for other using Google Fonts is okay too. 

 

I generally use a png of the copy, rather than adding more fonts to the creative, for most cases this is fine and you don't need the full character set a font file gives, or unless you are using SplitText. So it really depends on the needs of the creative.

 

Licensing is also a big issue here, as fonts are generally billed out as page views per site, so your better options are Google Fonts, or a TypeKit licence that covers use for banners. Using TypeKit however has restrictions, on sites its allowed to be shown, which can be set up in the kit settings.

 

Also with SVGs, whilst they are generally accepted in most browsers for a while now, I would always make sure the ads are not going to be served below IE9!

 

File weights

I know DC's rule of thumb is the initial load (HTML file) should be 40k, and then everything that is loaded into that should be no more than (60kb), but sometimes clients/media agents/publishers may allow more. I'm currently working to a 150kb total load, with a 40kb initial load.

 

Page blocking

Its always good practice to limit page blocking and speed up page loads. So I tend to load up enough CSS/JS at the top of the page for the banners initial frame to load/or a loading wheel, before loading in heavier library JS and CSS items, before executing the animation from the bottom of the page.

 

You could also load up some items as Bas64 encoded images if they're small and could quite easily fit into the HTML.

 

Image Optimisation

Use tinyPNG and ImageOptimizer on everything. 

 

Minification

Minification of CSS and JS items is a great way to save a few kb here and there, most platforms are unable to accept .min files however, but that doesn't mean the contents of the file can't be minified. (but always keep a copy of the original if you need to go back to it!)

  • Like 2
Link to comment
Share on other sites

  • 5 months later...

The main reason I am so enthusiastic about using Flash CC Canvas/Animate CC is because I can use any font I have access to. Breaking apart text, creates a vector graphic of your copy.

 

I have created a banner campaign with 4 vector lockups or logos pasted from Illustrator, no bitmaps, text created in an AS3 document and broken apart before converting to Canvas, and authored at 2X the size for retina, and had my unzipped *.js file be 15K. I actually have zipped files that are only 30K.

 

The compact shapes function of easel.js is responsible for such low K weghts

Link to comment
Share on other sites

Sadly till no kerning support in DOM or Canvas I can't use webfonts. Especially in case of numbers, many times the distance between the 0 and 1 is huge compared to other distances. I can't fix these gaps when my client asks me to bring closer certain characters. Depends on the quality of the font ofc. But! optimized .png is always perfect.

Link to comment
Share on other sites

I met with Monotype before the holidays last year and they are working on a display solution for web-fonts. They are aware of both cost and file size issues with the current web font subscription model and the unique needs of display with millions/billions of impressions. The system will only reference the needed characters and not the entire font family. For instance "Get this widget now" would only weigh the amount of those 16 characters. It supposed to work with both roll-your-own HTML5 and Adobe Animate type authoring environments. We'll see. 

  • Like 1
Link to comment
Share on other sites

 

 

Sadly till no kerning support in DOM or Canvas

 

Actually Oliver, with Animate CC AKA Flash you create your text in an AS3 document, duplicate your text layer so you don't have to start over with copy changes, then break apart your text, then copy and paste your layer or keyframe into a Canvas doc, or convert your AS3 doc to Canvas.

 

You have all the control you had in Flash.

 

Once you have broken apart your copy you can select individual characters or lines and move them.

 

Also in the MAX presentation on banners, 5-8 server requests was mentioned as a limit.

  • Like 1
Link to comment
Share on other sites

Actually Oliver, with Animate CC AKA Flash you create your text in an AS3 document, duplicate your text layer so you don't have to start over with copy changes, then break apart your text, then copy and paste your layer or keyframe into a Canvas doc, or convert your AS3 doc to Canvas.

 

You have all the control you had in Flash.

 

Once you have broken apart your copy you can select individual characters or lines and move them.

 

Also in the MAX presentation on banners, 5-8 server requests was mentioned as a limit.

In the new Animate CC, you don't even have to break apart text anymore!  You can use regular static text, and it converts to outlines automatically in the published file.

 

https://helpx.adobe.com/animate/using/whats-new.html

 

Static text in HTML5 Canvas documents

new_inline.pngNew in Animate CC 2015.1 | February 2016

Animate CC now supports static text for HTML5 Canvas. All the static text is converted to outlines while publishing and all the dynamic text will remain without any changes.  

  • Like 4
Link to comment
Share on other sites

@joe_midi

 

I am building a display ad in Celtra and I need to upload our fonts into it, instead of using pngs for responsive purposes. Do you know how is it done? I'm quite new in Celtra and I haven't found many useful webinars on their websites.

 

thanks a mil

 

For Celtra, you have to email your contact at Celtra, and they upload the font for you to use to your account. You should also ensure that the client has the usage rights for this purpose. 

Link to comment
Share on other sites

Ohem I noticed that, but I was still breaking apart because I didn't know it was auto converting.

 

 

New in Animate CC 2015.1 | February 2016

Animate CC now supports static text for HTML5 Canvas. All the static text is converted to outlines while publishing and all the dynamic text will remain without any changes. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...