Jump to content


SVG and font in Chrome

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



This is more a question about SVG, Illustrator and Chrome but I think there is a SVG expert in this room.

There is few options to embed font in SVG with Ai (check my codepen), SVG is now with a lot of <glyph> tags but it's not render in Chrome (just in quickview on mac).

So, how to embed font to use with GSAP and get best animation ;  vectorize a big paragraph ? or just put in @font-face style is ok ? what's your workflow ?



See the Pen VaeJVX by benoitwimart (@benoitwimart) on CodePen

Link to comment
Share on other sites

Hi benoit :)


I think the easiest way is just using @font-face.You're probably loading that font for other parts of your project anyway so all the fonts of the SVG can match everything. If you make all the text into paths, you'll end up with a much bigger SVG. Leaving it as text will also give you the ability to make quick text changes without going back to your original AI file.


Here's a fork of your pen with a simple toggle to change the font in your SVG:

See the Pen aNNbVm by PointC (@PointC) on CodePen


Hopefully that helps a bit.


Happy tweening.


  • Like 2
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.