Чо там у шрифтов

Дмитрий Вислов


Чо там у шрифтов?


Дмитрий Вислов

Google Fonts

Форматы файлов

1/3

Актуально на сегодня

					@font-face {
						font-family: MyFont
						src: local(MyFont),
						     url(file.woff2) format("woff2"),
						     url(file.woff)  format("woff");
					}
				
					@font-face {
						src: url(file-bold.woff2) format("woff2");
						font-weight: bold;
					}
				
					@font-face {
						src: url(file-italic.woff2) format("woff2");
						font-style: italic;
					}
				

На заметку

Шрифт скачивается ТОЛЬКО ТОГДА,
когда используется в CSS-селекторе,
заматченном на DOM-элемент

Основная проблема

FOUT & FOIT

Do not use
web fonts

GZIP (TTF + EOT)

Cache

HTTP2
Server Push

base64

Шрифт == набор глифов

Глиф — векторная форма каждой буквы или символа

Размер файла зависит от:

					@font-face {
						src: url(latin.woff2) format("woff2")
						unicode-range: U+000-5FF; /* Latin glyphs */
					}
				
					@font-face {
						src: url(japan.woff2) format("woff2")
						unicode-range: U+3000-9FFF, U+ff??; /* Japan glyphs */
					}
				

Хинтинг

Кернинг

Local Storage

				if (localStorage.fonts) {
					insertFontStylesheet()
				} else {
					downloadFonts();
					putFontsToLocalStorage();
					insertFontStylesheet();
				}
			

FontFaceObserver

				var fontOneLoad = new FontFaceObserver('MyFont', {});
					
				fontOneLoad.check().then(function () {
					document.documentElement.className += " fontOneLoaded";
				}
			

FontFaceObserver

				body {font-family: sans-serif;}
					
 				.fontOneLoad body {
    			font-family: 'MyFont', cursive;
 				}
			

Font Fallback

				body {
					font: 18px/28px 'Open Sans',Arial,sans-serif;
				}
			

fontfamily.io

FFFFALLBACK

Web Font Loader

Будущее

Плохо

Tools

homebrew-webfonttools

postcss-font-magician

Чо там у шрифтов?

Дмитрий Вислов