Local font hosting

[Noah_S]

In an effort to host everything locally on my server, I just downloaded the fonts I use to my computer and uploaded them on the server. Fonts can be downloaded here.

[Dan Q]

If you're after selfhosting fonts from Google Web Fonts, I find that the Google Webfonts Helper (a free and open source web tool, not affiliated with Google) is better than Google's own Google Fonts.

It's got all the same fonts, but makes it much easier to get the font files you need in the best possible format.

Google Fonts will, by default, give you .ttf files which are fine for using in your favourite word processor but aren't optimised for the Web: they're relatively big files compared to more-modern formats like WOFF and WOFF2. But the Google Webfonts Helper gives you WOFF2 (or both WOFF+WOFF2 if you care about compatibility with very old browsers) right off the bat, plus the right CSS to use.

Looking at your site for example, @Noah_S: I see that you're using Noto Sans Old Hungarian as a .ttf file, which is 113Kb... but the .woff2 version would be only 16Kb: a seventh of the size. Julee, the "handwriting" font you're using would be a third of the size if you switched from the .ttf to the .woff2 version. And so on: there's savings to be made!

[poesu]

Google Webfonts Helper

Thanks, Dan! And I was downloading the .woff2 files by manually visiting every link in the CSS Google gives… Now, this seems like a true hassle-free way to self-host my fonts. Defo going to link it on my Resource page

[Melooon]

.ttf files which are fine for using in your favourite word processor but aren't optimised for the Web: they're relatively big files compared to more-modern formats like WOFF and WOFF2

Is there a good utility for converting TTF to WOFF without messing them up? I have a LOT of ttf fonts on my sites already

[ribose]

good utility for converting TTF to WOFF

i like and recommend transfonter! i've used it to convert most of the fonts on my site. i also used it to subset a giant font file that covered waaay more unicode characters than i would ever need to use, and now it loads much faster.

[iSmile]

I recommend Bunny Fonts as an alternative to Google Fonts: https://fonts.bunny.net/

[mretn_]

some WSIWYG editors like Dw are capable of packing foreign fonts into the site folder and automatically defining them in CSS

[Dan Q]

some WSIWYG editors like Dw are capable of packing foreign fonts into the site folder and automatically defining them in CSS

Hosting your own fonts - just a few lines of CSS:

True, but don't be put off if you don't use a WYSIWYG editor. The CSS isn't too hard for adding fonts! Typically, all you have to do is something like this - just two selectors and three directives:

Code

@font-face {
  /* This can be anything you like! Doesn't HAVE to be the correct name for the font. */
  font-family: "Font Name";

  /* You can specify multiple font files to maximise support, but WOFF2 works almost everywhere now.
   * TTF and OTF files also work pretty much everywhere, but they tend to be slightly larger files/
   * download slower: consider using a converter tool to turn them into WOFF2s!
   * WOFF (1) is more of a legacy format: it even works on Internet Explorer. 
   * DO NOT USE SVG fonts; they don't work well. */
  src: url("/path/to/my/fonts/font-file.woff2") format("woff2");
}

body {
  /* Be sure to specify a standard fallback font, e.g. optionally common system fonts, finishing with
   * one of 'sans-serif', 'serif', 'monospace' etc. */
  font-family: "Font Name", sans-serif;
}

Hosting your own fonts - optional extras:

Of course there's more you can do but it's definitely optional. Some things I'd like to highlight are:

1. Especially if your CSS is in a separate file, preload your font files for best performance.
2. The font-display: directive can go in the @font-face block and give a clue to the browser about how important the font is to reading the content. So at one extreme you can say "font-display: swap;" to say "use any font you like to get the page loaded fast while you're downloading the font; swap it later whenever you like", or at the other you can say "font-display: block;" to say "wait before you draw this text; give the font file some time to download first so it always looks the way I intended".
3. font-feature-settings: lets you do fancy things like tweaking ligature support or how numbers are rendered or whether number-slash-number gets rendered as a fraction, which can be useful contextually with some fonts. E.g. fonts like Merriweather and Raleway have very distinctive "old-style numbers": the digits 0-9 are quite a bit shorter than the letters. That's often fine in a paragraph, but in a spreadsheet or numeric entry field or somewhere else that uses just numbers it looks a bit wonky, so you might use "font-variant-numeric: lining-nums;" to "fix" them. There's lots of other options but which ones are available depends on your font. This website explains/demonstrates better than I do.

Or here's another idea:

If you just want a gorgeous and consistent font stack without using webfonts, the Modern Font Stacks project is worth a look: they've audited which fonts are available across different operating systems, found the most-similar ones and grouped them into families, and then given you the code to use to set a "family" of them as fallbacks to one another. Not everybody will see exactly the same fonts on your website, but everybody will get broadly the same look! Worth checking out!