Шрифт San Francisco

Для верстки очередного проекта отрисованного дизайнером понадобился шрифт San Francisco, разработанный компанией Apple для своих устройств. К макетам дизайнер приложил лишь TTF-версию шрифта. Погуглив, я не нашел webfont-версию шрифта San Francisco с кириллицей пригодную для верстки, поэтому пришлось сделать её самому. Делов там на 20 минут, но специально для тех кому лень и тех, кто хочет скачать шрифт San Francisco готовый к подключению на страницу, даю ссылку на скачивание готового набора в конце статьи.

Для начала я нашел годную версию шрифта с кириллицей в формате OTF и скачал её здесь.

Теперь OTF шрифт надо сконвертировать в WOFF формат, который понимают на сегодняшний день уже все современные броузеры. Для этого я воспользовался программой sfnt2woff, скачать её можно здесь. Работать с sfnt2woff очень просто, для того чтобы сконвертировать шрифт нужно набрать следующую команду:

sfnt2woff SFUIDisplay-Black.otf

В результате получаем файл SFUIDisplay-Black.woff. Конвертируем последовательно все начертания шрифта.

Далее создадим css файл для подключения кириллического шрифта San Francisco в html-шаблон:

/* Ultra Light */
@font-face {
  font-family: "San Francisco";
  font-weight: 100;
  src: url("sanfrancisco-ultralight.woff") format('woff');
}

/* Thin */
@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("sanfrancisco-thin.woff") format('woff');
}

/* Light */
@font-face {
  font-family: "San Francisco";
  font-weight: 300;
  src: url("sanfrancisco-light.woff") format('woff');
}

/* Regular */
@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("sanfrancisco-regular.woff") format('woff');
}

/* Medium */
@font-face {
  font-family: "San Francisco";
  font-weight: 500;
  src: url("sanfrancisco-medium.woff") format('woff');
}

/* Semi Bold */
@font-face {
  font-family: "San Francisco";
  font-weight: 600;
  src: url("sanfrancisco-semibold.woff") format('woff');
}

/* Bold */
@font-face {
  font-family: "San Francisco";
  font-weight: 700;
  src: url("sanfrancisco-bold.woff") format('woff');
}

/* Black */
@font-face {
  font-family: "San Francisco";
  font-weight: 800;
  src: url("sanfrancisco-heavy.woff") format('woff');
}

/* Heavy */
@font-face {
  font-family: "San Francisco";
  font-weight: 900;
  src: url("sanfrancisco-black.woff") format('woff');
}

Результат моего труда:

Тестирование шрифта San Francisco

Ссылка для скачивания шрифта San Francisco

Комментарии