In defense of webfonts (opens in new tab)

(robinrendle.com)

4 pointssdabdoub9y ago1 comments

1 comments

I recently discovered that the 'src' attribute of the @fontface directive supports the inline 'data:' syntax (like you can do with images etc.).

So you can basically do this:

  @fontface {
    ...
    src: url("data:font/opentype;base64,<base64-encoded-otf/ttf-file>");
  }

Although this expands the payload size slightly, it does remove the need for another round trip to a server (so renders potentially faster), and also gives you full control over your embedded fonts.

j / k navigate · click thread line to collapse

1 comments

Jaruzel9y ago

I recently discovered that the 'src' attribute of the @fontface directive supports the inline 'data:' syntax (like you can do with images etc.).

So you can basically do this:

  @fontface {
    ...
    src: url("data:font/opentype;base64,<base64-encoded-otf/ttf-file>");
  }

Although this expands the payload size slightly, it does remove the need for another round trip to a server (so renders potentially faster), and also gives you full control over your embedded fonts.

j / k navigate · click thread line to collapse