How to Include Fonts in Banners that have no Google Font equivalent

[Fatima Osman]

Hi,

 

I was wondering what the best way is to include type in banners that have no Google font equivalent without using SVG. I tried opening a storyboard in Illustrator that was originally created in Photoshop. I used the Export Assets feature and saved them out as SVGs. The file sizes were so big though, probably due to all of the combined anchor points in the font characters.

 

Is there a way to embed the font characters that are needed, similar to how Animate does it, so that the file size doesn't grow so much?

 

I'm exploring the best ways to create banners and was wondering if there was a way to do it independent of Adobe Animate.

 

Thank you

[GreenSock]

Hi @Fatima Osman. We really try to keep these forums focused on GSAP-specific questions, not general questions like about Google fonts. Of course anyone is welcome to answer. I just wanted to set expectations properly. 

 

Good luck!

[Fatima Osman]

 OK thanks for letting me know. Sorry about that. I might delete my post when I get a chance.

[GreenSock]

It's no problem to leave here - maybe someone will chime in and help. That's certainly welcome. 

[geedix]

Hi Fatima, when I built banners, we normally embedded type as compressed PNG images. The trade-offs -- SEO, accessibility, responsiveness -- are more acceptable in ad banners, since they run in i-frames of fixed dimensions.
Long blocks of legal text were sometimes done with system fonts, or as limited palette PNGs. 
good luck!

[Fatima Osman]

Hi Geedix, thanks for your response. We've been using png's but some of the Creative people have been pointing out how the vector versions of fonts and other images look a lot sharper/crisper.

 

I've been doing some tests. It seems like they're not as sharp necessarily on PC's however the vector versions of fonts and images look much better on Macs. I can use Animate and the static text fonts gets embedded in the files but that ties me to using Animate. I have to figure out the details of using Animate with GSAP because I've been using the Timeline so far. I was great at doing this in Flash and Flashbuilder with ActionScript. I was also great at hand coding banners in HTML, CSS and JS but I'm out of the loop somewhat these days and have been using the timeline in Animate. I've gotten too much work and have just been churning out banners.

 

I think I have time now to research and figure out best practices and hopefully streamline some of my processes. 

 

I'm looking into how to test my banners on different browsers and machines the way emails can be QA'ed in different clients on Email on Acid and Litmus so I can compare the vector versions to the png versions of the fonts in banners.

 

A lot to figure out. Any pointers would be appreciated but not necessary.

 

I think I need to ask front end developers who build sites what they use for testing their sites and how they embed proprietary fonts.

[geedix]

Hi Fatima, 

To get your PNGs to look sharp on high-density displays, you need to embed them at higher resolution. So, for a 300x250 png or jpg, make it 600x500, and position it to 300x250 in your html. For flat type, the file size should be okay as a png, but for photos, add more compression, and it will still look better than it would have at 1:1 dimensions. 

 

[Fatima Osman]

Hi Geedix, 

That's a great idea about embedding the fonts at higher resolutions. Thank you for that suggestion!

 

I don't understand your last sentence, 
"For flat type, the file size should be okay as a png, but for photos, add more compression, and it will still look better than it would have at 1:1 dimensions. "

 

Could you explain a little further?

 

Thanks so much!

Fatima

[geedix]

My last sentence was about keeping file sizes low.  As long as you just have a few words of text, a PNG format text image should be pretty small, even if you've used it at 2x dimensions. For other kinds of images, just experiment with using large dimensions (600x500 in a 300x250 banner), but add more compression, and you can get a sharper look at a similar file size. Make sense? 

[Fatima Osman]

Yes I understand now . Thanks for explaining and the suggestions.

[Web Dizajner]

On 3/13/2024 at 10:20 PM, geedix said:

My last sentence was about keeping file sizes low.  As long as you just have a few words of text, a PNG format text image should be pretty small, even if you've used it at 2x dimensions. For other kinds of images, just experiment with using large dimensions (600x500 in a 300x250 banner), but add more compression, and you can get a sharper look at a similar file size. Make sense? 

It is better to use SVG for texts and logos. Compress SVGs fast and easy with https://compress-online.com/compress-svg and at the end ZIP will also additional compress SVGs. Attached are TinyPNG 600x1200 5.41KB and CompressSVG 300x600 2.42KB.

Sample_Text_CompressSVG.svg