Kaushal Modi is a user on mastodon.technology. You can follow them or interact with them if you have an account anywhere in the fediverse. If you don't, you can sign up here.

What does everyone think about web fonts vs system fonts?

Inspired by articles like "Web fonts: when you need them, when you don’t" (hackernoon.com/web-fonts-when-) I've tended to use system fonts on most of the pages I've built.

But lately I've been wondering if I should embrace web fonts—in part because my own #Arch install doesn't have many of the fonts in my system font stack

What do y'all tend to do?

@codesections I use web fonts *but* serve them from my site. (I am too OCD about how the fonts look on my site.)

Also I don't serve 100% of the web font character set; I **subset** all the fonts.

So while I load 10 different fonts, they are "only" about 130KB (small price to pay to make things look as I want) of my 191KB home page. But still as I have properly hand-crafted my site, it loads in under a second[1].

[1]: webpagetest.org/result/180807_


Very interesting! I think I'll stick with my ~4kb site[0], but it's nice to see another prospective.

(Also, comparing our sites, I sense a bit of a vim/emacs divide)

[0]: webpagetest.org/result/180807_


> I think I'll stick with my ~4kb site

Yes, that's why my "only" was double quoted in my earlier reply too :D

I might never reach that 4kb point, but I have few things to optimize that would shave off few milliseconds:

- Remove jQuery dependency (difficult: because I don't know JavaScript, but I like the dynamic TOC scrolling)
- Remove FontAwesome (easy: might replace the FA icons with svg or just text)

Kaushal Modi @kaushalmodi


> .. I sense a bit of a vim/emacs divide

Heh, a "bit"? :).

Jokes aside, I respect folks who know how to use their lives editors, be it vim and emacs (I say so because I know folks who use vim, but always live in insert mode, and copy/paste using mouse and Gvim menu bar).

Your website is a great example of minimalism, while not throwing away all the goodies (good presentation, nice minimal CSS, etc.)