0

I have a Rails web app and I'm trying to optimise my font asset size but I don't really understand how the font is rendered.

I have a font.css file that looks like this:

@font-face {
  font-family: 'FontName';
  font-style: normal;
  font-weight: 300;
  src: url(data:font/truetype; charset=utf-8; base64, very long string)
}

And then it is imported in my application.html.erb.

My current file has 993KB and I would like to reduce it somehow.

Tom Bom
  • 1,589
  • 4
  • 15
  • 38
  • 1
    You are adding the bytecode of the font converted to base64, you can reduce the css file size A LOT by using a proper url pointing to a file on your server instead (note the font will be downloaded anyway, but not inside that file). I'm not sure what font you are using, but google webfonts provides a lot of fonts and some handy url params to optimize them, if your font is on google webfonts you can improve it getting only the chars you need for example. – arieljuod Nov 27 '18 at 02:16
  • 1
    As mentioned above, don't bundle static assets. If they're actually static, like fonts or images, host them on your server and point to those hosted files directly. Base64 embedding only makes things harder (you need to rebuild entire bundles, you can't just update "one file", and so you're going to cache-invalidating massive payloads for your users, too, instead of just individual files). One note about hosting fonts: just because you have the font doesn't mean you're allowed to use it on the web, so 1) check if the font you're using allows this, and if not 2) google web fonts are fine. – Mike 'Pomax' Kamermans Nov 27 '18 at 17:06
  • Thanks a lot for your comments. If I understood well, I need to put the `.otf` file inside my app (or on S3) and in the `.css` file I point `scr: url('/asset/fonts/myfont.otf')`. – Tom Bom Nov 28 '18 at 02:53
  • [Don't use `otf`](https://stackoverflow.com/a/37091681/740553). Convert your fonts to web format because compression is important. WOFF2 unless you need to support dead browsers, in which case WOFF. There are no browsers anymore that "do web fonts, but don't do web format". – Mike 'Pomax' Kamermans Nov 29 '18 at 19:43

0 Answers0