How to embed font file into .css

support
1

I have a .woff2 file in static/fonts directory which is loaded from .css file (I think):

@font-face {
  font-family: ‘icomoon’;
  src: url(‘/fonts/icomoon.woff2?de1f0b’) format(‘woff2’);
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Can I instead embed that .woff2 file inside .css file so they are downloaded in a single request? I mean not manually, can I automate it via hugo?

Note: That .css file is also minified by hugo
Note: The reason I wanna do this is total size of .css and .woff2 is around 2KB, so I would prefer them to be downloaded in a single request

2

No, you cannot, either manually or any other way.

3

you could use a combination of resources.Get, base64Encode and ExecuteAsTemplate.

quick hack using site.Store without any error handling

  • place your font in assets/fonts/icomoon.woff

  • place your css in asses/css/main.css

    @font-face {
 font-family: 'icomoon';
 /* will be expanded by ExecuteAsTemplate */
 src:  url(data:application/x-font-woff;charset=utf-8;base64, {{- site.Store.Get "icomoon" -}});
 font-weight: normal;
 font-style: normal;
 font-display: block;
}
/* example for utilize the font which in my case has an icon at this position */
h2:before {
  font-family: "icomoon";
  content: "\e902";
}

  • use this in your head template

    {{ with resources.Get "fonts/icomoon.woff" }}
   {{ base64Encode .Content | site.Store.Set "icomoon" }}
{{ end }}
{{- with resources.Get "css/main.css" | resources.ExecuteAsTemplate "css/main.css" $ -}}
   <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{- end }}

instead of a site.Store, might be possible to use a partial or template code in the css file… dunno if that works with executeAsTemplate …

1 Like
4

base64 encoding increases file size, so it seems like this is going in the wrong direction.

3 Likes
5

yes, you are right

around 30% size increase (for these small file) for a questionable benefit

there are some resources of pro and cons, compression, side effects regarding caching in browsers, servers, … on that.

I would not go with that in general. Maybe within a special use case, system, environment … it could make sense…

1 Like
6

Well, I figured it’s not a good idea… but at least I know you could do that amount of crazy things with hugo now :grinning_face:

1 Like
7

Why do you care about 2kb optimization? Bro, 2kb, are you serious? I bet there are a lot of things you can optimize on site level.

1 Like
8

I think they care about two requests instead of one.

9

It turns out I can just load that font file delayed, so it won’t block inital render. At that point, I don’t care about an extra request. I’ll take smaller size and convenience.
Also you might wanna take a look at that, if you think KBs doesn’t matter: https://youtu.be/ciNXbR5wvhU
TL;DR on data over network, every byte matters

10

mmh that is - if I get that right - the opposite of the main reason fo embedding.

Avoiding the font flash issue by forcing it to be there on initial render.

11

In my use case, I’m using icons from that font file which is displayed on the footer. (Worst case scenario, you’ll see a square instead of icons for a short while)

I was trying to put it in a css file so I can load that css file delayed.
Or maybe that reason came a little later, I don’t really remember. I was building/optimizing my site for over 10 hours that day…

Also I’m not too comfortable with web dev, I did a few small things here and there, but I’m mainly working on games, so excuse my confusion. For example I learnt concept of critical css after creating this post…

TL;DR my stance on this changed twice after creating this post

1 Like
12

Use classical preload

<link rel="preload" href="/fonts/icomoon.woff2?de1f0b" as="font" type="font/woff2" fetchpriority="high">

<style>
@font-face {font-family: ‘icomoon’;src: local('icomoon'), url(‘/fonts/icomoon.woff2?de1f0b’) format(‘woff2’);font-weight: normal;font-style: normal;font-display: block;}
<style>
13

Yep, that’s what I’m currently doing

14

I’m using icons from that font file

Best practice is not to use icon fonts for a bunch of reasons, including the problem of icons not being shown properly on initial page load that you’ve encountered.

If you used SVG icons you could embed them right into the HTML.

15

Well, I understand the incentive, but I think icon fonts is simply more benefical for me at the moment. Outside of footer, I’m using 2 icons on a page and that’s it. I prefer if user downloaded them together.
Also again, I could’ve block the initial render to not show square icons, but they are on the footer anyways, you’ll almost never see that squares unless you can’t even do a google search in 20 secs :d

16

You can still have the user download SVG icons together, just put them in an SVG sprite sheet. That’s better than an icon font because you can make the sheet include only the icons you need. They all download via one request.

And like I mentioned, you could even have the icons download with 0 extra requests by inlining them on the page.

(Technically you can derive a subset font with just selected symbols from the main font, but that’s harder and I don’t expect you’re doing it.)

1 Like