4 ms·

CJK fonts can be megabytes. The rest of an otherwise lean site can be a few hundred kilobytes or less. E.g. my site's About page is tiny, but pulls in a CJK fo

CJK fonts can be megabytes. The rest of an otherwise lean site can be a few hundred kilobytes or less. E.g. my site's About page is tiny, but pulls in a CJK font (with delayed load) for one line of text. It would make no sense to self-host that: https://marcan.st/about/ https://marcan.st/about/

detaro 7y ago
A self-hosted font containing just those few characters would be tiny, and nicer to your visitors than forcing a mostly useless megabyte download on them. Makes a lot of sense.
dylan604 7y ago
does it really make sense to load a large font for a single line of text on the page regardless if it is self-hosted or not? that must be one important line of text.
- e12e 7y ago
  If you use a custom/download able font at all, it would make sense to use one copy (URL) - so every visitor only has to download it once - then use it from cache. This probably also the best reason to use a central CDN over your own - likely some other site already warmed up the client cache for you, with popular fonts (the ultimate in pre-warmed font cache, is of course the fonts the browser/os already have installed - unfortunately the lowest common denominator is a problem here, between Android, ios, os x, windows, Linux). I'm not sure if Google font service actually does facilitate cross-site caching though - there might be tailored URLs or account?
  - XelNika 7y ago
    The article already addresses that. Cross-site caching is blocked in Safari and will be blocked in Chrome in the future.
tjoff 7y ago
Jesus, why bother we a lean site with that mindset. If it truly is a must make it a small (self-hosted) png.
- e12e 7y ago
  Eh, then it's no longer text? Fwiw I don't really think a one-time large font download is much of a problem - considering that improved typography is a very good way to improve how a site looks. And unlike your png - the text will display without the custom font. Fall-back fonts are only really a problem with icon font sets.
  - tjoff 7y ago
    It will read just fine. But no, I would not recommend it. But much rather that than a multi-megabyte one-liner. One time. Per site. On slow and/or expensive mobile connection? The png will also display without the custom font...
    - e12e 7y ago
      Png has poor screen reader support, though it can be amended via an alt tag, I suppose. [ed: but breaks copy and paste, which might be bad for an about page listing address and contact information - personally I'd much prefer fallback font to a png]. It's a shame there are no "bandwidth" queries in css, like there are @media queries - the client should be able to say - just content and essential downloads, please.
      - tunetheweb 7y ago
        They’ve been proposed!: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-dat... You can already do this with JavaScript now: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation https://developer.mozilla.org/en-US/docs/Web/API/NetworkInfo... though as you can see from the bottom of that link, Browser support is limited at the moment (and experimental so may even be removed/changed!).
hsivonen 7y ago
K does not belong together with C and J in this case. If you are subsetting fonts to include the actually-used glyphs, the font file size for a typical Korean-language site will be considerably smaller than for a typical Chinese-language or Japanese-language site. That is, the active set of glyphs for Korean is much smaller even if the fonts you’d start the subsetting process from were about as large. Self-hosting a Japanese font for one line of text is completely doable. I self-host all fonts for my site, which has a handful of CJK characters (across 4 fonts: Korean, Japanese, Traditional Chinese, and Simplified Chinese).

detaro 7y ago

A self-hosted font containing just those few characters would be tiny, and nicer to your visitors than forcing a mostly useless megabyte download on them. Makes a lot of sense.

dylan604 7y ago

does it really make sense to load a large font for a single line of text on the page regardless if it is self-hosted or not? that must be one important line of text.

e12e 7y ago
If you use a custom/download able font at all, it would make sense to use one copy (URL) - so every visitor only has to download it once - then use it from cache. This probably also the best reason to use a central CDN over your own - likely some other site already warmed up the client cache for you, with popular fonts (the ultimate in pre-warmed font cache, is of course the fonts the browser/os already have installed - unfortunately the lowest common denominator is a problem here, between Android, ios, os x, windows, Linux). I'm not sure if Google font service actually does facilitate cross-site caching though - there might be tailored URLs or account?
- XelNika 7y ago
  The article already addresses that. Cross-site caching is blocked in Safari and will be blocked in Chrome in the future.

tjoff 7y ago

Jesus, why bother we a lean site with that mindset. If it truly is a must make it a small (self-hosted) png.

e12e 7y ago
Eh, then it's no longer text? Fwiw I don't really think a one-time large font download is much of a problem - considering that improved typography is a very good way to improve how a site looks. And unlike your png - the text will display without the custom font. Fall-back fonts are only really a problem with icon font sets.
- tjoff 7y ago
  It will read just fine. But no, I would not recommend it. But much rather that than a multi-megabyte one-liner. One time. Per site. On slow and/or expensive mobile connection? The png will also display without the custom font...
  - e12e 7y ago
    Png has poor screen reader support, though it can be amended via an alt tag, I suppose. [ed: but breaks copy and paste, which might be bad for an about page listing address and contact information - personally I'd much prefer fallback font to a png]. It's a shame there are no "bandwidth" queries in css, like there are @media queries - the client should be able to say - just content and essential downloads, please.
    - tunetheweb 7y ago
      They’ve been proposed!: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-dat... You can already do this with JavaScript now: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation https://developer.mozilla.org/en-US/docs/Web/API/NetworkInfo... though as you can see from the bottom of that link, Browser support is limited at the moment (and experimental so may even be removed/changed!).

hsivonen 7y ago

K does not belong together with C and J in this case. If you are subsetting fonts to include the actually-used glyphs, the font file size for a typical Korean-language site will be considerably smaller than for a typical Chinese-language or Japanese-language site. That is, the active set of glyphs for Korean is much smaller even if the fonts you’d start the subsetting process from were about as large. Self-hosting a Japanese font for one line of text is completely doable. I self-host all fonts for my site, which has a handful of CJK characters (across 4 fonts: Korean, Japanese, Traditional Chinese, and Simplified Chinese).