Navigation überspringen

Seiteninhalt:

Include your own fonts with CSS

Convert your fonts and provide at least WOFF and WOFF2 formats on your web space.

There is a variety of free tools available online. Just upload your TTF and get a bunch of files in different formats back.

Should you require more fallbacks, consider adding alternatives like EOT for Internet Explorer, OTF (Apple?). Some browsers even seem to accept straight up TTF (citation needed).

@font-face {
	font-family: vga;   /* Give the font a name for your CSS file */
	src:
		url('fonts/vga_9x14.woff2') format('woff2'),   /* List the preferred formats first */
		url('fonts/vga_9x14.woff' ) format('woff'),
		url('fonts/vga_9x14.oft'  ) format('otf'),
		url('fonts/vga_9x14.eot'  ) format('eot'),
		url('fonts/coll.otc#foo'  ) format(???),     /* load font foo from collection coll.otc   */
		url('fonts/coll.woff2#foo') format(???),     /* load font foo from collection coll.woff2 */
		url('fonts.svg#simple'    ) format(???),     /* load SVG font with id 'simple'           */
		/* Sometimes, CSS dislikes trailing commas, but with src like here, it works!? */
		url('fonts/vga_9x14.ttf'  ) format('ttf'),
	;
	font-weight: normal;
	font-style: normal;
	font-display: swap;   /* No idea, where this came from. Research it yourself. */
}

div { font-family: vga; }

Get a sticker pack!

Cloud or local hosting?

If you want to load your fonts from the cloud, you might have to take CORS and CSP into consideration. Unless your web site has a gigantic amount of traffic, I'd suggest you host all files on your web space, including font files.

Allow all self hosted stuff in .htaccess

Header add Content-Security-Policy-Report-Only "\
\
connect-src 'self'; \
default-src 'self'; \
frame-ancestors 'self'; \
frame-src 'none'; \
media-src 'self'; \
object-src 'none'; \
script-src 'self' 'unsafe-inline'; \
style-src 'self' 'unsafe-inline'; \
\
"