Как загрузить шрифт в браузере
Обновлено: 07.07.2024
Если у вас на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку.
Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам <h1> . Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.
Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.
Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.
- Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
- Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.
В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.
| Формат | |||||||
| TTF | 9 | 12 | 4 | 10 | 3.1 | 3.5 | 2.2 |
| EOT | 5 | ||||||
| WOFF | 9 | 12 | 5 | 11.5 | 5.1 | 3.6 | 4.4 |
| SVG | 3.2 | 3 |
Самые поддерживаемые форматы — TTF и WOFF. За исключением IE до версии 9.0 все браузеры их прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).
Пример 1. Подключение TTF
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Шрифт</title> <style> @font-face < font-family: Pompadur; /* Гарнитура шрифта */ src: url(/example/font/pompadur.ttf); /* Путь к файлу со шрифтом */ >h1 < font-family: Pompadur, 'Comic Sans MS', cursive; ></style> </head> <body> <h1>Современный элемент политического процесса</h1> <p>По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.</p> </body> </html>
Вначале загружаем сам файл шрифта с помощью правила @font-face. Внутри него пишем название гарнитуры шрифта через font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.
Результат данного примера показан на рис. 1.
Рис. 1. Заголовок с загруженным шрифтом
Что делать, если вам позарез нужен свой шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.
Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда — файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных сайтов оказался один, показавший текст в IE правильно.
Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.
src: url(font/pompadur.ttf), url(font/pompadur.ttf);
src: local(pompadur), url(font/pompadur.ttf);
src: local('bla bla'), url(font/pompadur.ttf);
Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.
Пример 2. Подключение EOT
Google Web Fonts
Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).
Рис. 2. Выбор шрифтов в Google Web Fonts
Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.
Рис. 3. Загружаемые на страницу шрифты
Подключить выбранные шрифты можно одним из трёх путей, добавляемый код можно скопировать ниже по странице.
1. Через элемент <link> . Строка будет иметь примерно следующий вид.
2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.
3. Через JavaScript.
В принципе, все пути равноценны, так что выбирайте по своему предпочтению.
Преимущества применения данного сервиса такие.
- Шрифты свободны для использования, вам не нужно за них платить.
- Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
- Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.
Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.
Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.
Пользовательские веб-шрифты используются повсюду в мире, но многие сайты загружают их неправильно. Это вызывает много проблем при загрузке страницы, такие как проблемы с производительностью, медленное время загрузки, заблокированный рендеринг и обмен шрифтов во время навигации.
Я вижу, что многие разработчики игнорируют эти проблемы или, возможно, делают одни и те же ошибки снова и снова только потому, что «они всегда так делали», но как веб-разработчики мы должны быть в состоянии адаптироваться в постоянно меняющейся среде.
Пришло время прервать этот цикл и начать делать правильные вещи в 2020 году. При загрузке пользовательского веб-шрифта необходимо учитывать всего четыре шага:
- Используйте правильный формат шрифта
- Предварительная загрузка шрифтов
- Используйте правильное объявление font-face
- Избегайте невидимого текста во время загрузки шрифта.
Давайте разберем эти пункты по одному.
Используйте правильный формат шрифта
Существует множество форматов шрифтов, которые можно использовать в Интернете, но на самом деле необходимы только два формата, если вам не требуется поддержка Internet Explorer (IE) 8 или ниже: woff и woff2 . Это только два типа файлов, которые вы должны использовать, потому что они по умолчанию сжимаются в формате gzip (поэтому они очень малы), оптимизированы для Интернета и полностью поддерживаются IE 9+ и всеми другими вечнозелеными браузерами.
Предварительная загрузка шрифтов
При использовании пользовательских шрифтов вы должны указать браузеру предварительно загружать их, используя соответствующий rel="" тег и атрибуты:
Обратите внимание, что использование кроссоригина здесь important ; без этого атрибута предварительно загруженный шрифт игнорируется браузером, и происходит новая выборка. Это связано с тем, что ожидается, что шрифты будут выбираться браузером анонимно, а запрос предварительной загрузки делается анонимным только с помощью атрибута this.
В приведенном выше примере rel="preload" as="font" атрибуты попросят браузер начать загрузку необходимого ресурса как можно скорее. Они также сообщают браузеру, что это шрифт, поэтому он может соответствующим образом расставить приоритеты в своей очереди ресурсов. Использование подсказок предварительной загрузки окажет значительное влияние на производительность веб-шрифтов и начальную загрузку страницы. Браузеры, поддерживающие подсказки предварительной загрузки и предварительной выборки, начнут загружать веб-шрифты, как только они увидят подсказку в файле HTML и больше не будут ждать CSS.
Вместо этого вы можете использовать rel="prefetch" атрибут, чтобы указать браузеру подготовить загрузку ресурсов, которая может потребоваться позже во время загрузки страницы или действий пользователя, чтобы он назначил низкий приоритет этим ресурсам.
ПРЕДУПРЕЖДЕНИЕ.
Если вы используете CDN, такой как Google Fonts, убедитесь, что файлы шрифтов, которые вы загружаете, совпадают с файлами в CSS. Шрифты также могут регулярно обновляться, и если вы предварительно загружаете старую версию, используя CSS для более новой, вы можете в конечном итоге загрузить две версии одного и того же шрифта и тратить трафик своих пользователей. Попробуйте вместо этого использовать
Правильная декларация шрифта
Объявление семейства шрифтов очень просто, но мы должны позаботиться об определенных вещах, когда мы это делаем. Вот правильный пример объявления семейства пользовательских шрифтов:
Как видите, мы используем только оптимизированные шрифты ( woff и woff2 ) и говорим браузеру загружать только необходимый диапазон глифов (от U+000 до U+5FF ), но это свойство не мешает браузерам загружать весь шрифт. Следует также отметить еще две вещи: local() функцию и порядок объявления шрифта.
local() Функция позволяет пользователям использовать их локальную копию шрифта, если присутствует (например, думать о шрифтах Roboto, которые предварительно установлены на Android), а не загружая его.
Порядок объявления шрифта также важен, потому что браузер начнет извлекать ресурсы, следуя порядку объявления. Если он поддерживает формат woff2, он загрузит шрифт, или если он не распознает формат ресурса, он перейдет к следующему и так далее.
Если вы действительно хотите использовать eot и ttf шрифты не забудьте добавить их в конце src заявлений.
Ресурсы
Избегайте невидимого текста во время загрузки шрифта
В предыдущем @font-face примере вы заметите font-display объявление. Это swap значение сообщает браузеру, что текст, использующий этот шрифт, должен отображаться немедленно с использованием системного шрифта. Как только пользовательский шрифт готов, системный шрифт заменяется.
Если браузер не поддерживает, font-display он продолжает следовать стандартному поведению при загрузке шрифтов.
Поведение браузера по умолчанию, если шрифт не готов:
Edge использует системный шрифт, пока пользовательский шрифт не будет готов, а затем заменяет шрифты.
Chrome будет скрывать текст до 3 секунд. Если текст еще не готов, он будет использовать системный шрифт, пока пользовательский шрифт не будет готов.
Firefox будет скрывать текст до 3 секунд. Если текст еще не готов, он будет использовать системный шрифт, пока пользовательский шрифт не будет готов.
Safari скрывает текст, пока пользовательский шрифт не будет готов.
Тестирование
Следующие ссылки проверяют «стандартную версию» на соответствие оптимизированной:
Результаты
По умолчанию
Оптимизированное поведение
Вывод
Учитывая такие базовые оптимизации, вы улучшите общий UX вашего цифрового продукта. Мы должны учитывать ситуации, когда скорость соединения не оптимальна, или когда люди не успевают подождать несколько секунд, пока ваше приложение / сайт полностью загружены и доступны для навигации.
Такие улучшения, особенно для крупных проектов, являются обязательными для улучшения общего пользовательского опыта, и они действительно не требуют больших усилий.
Как правильно загружать посторонние шрифты? — спрашивают наши зрители Алексей и Марат. Спасибо за важный вопрос, ребята. Плохим подключением шрифтов можно очень сильно навредить загрузке сайта, вплоть до невозможности его прочесть. К счастью, есть надёжные варианты и даже новое свойство font-display. Давайте разберёмся!
Скажу сразу: лучший шрифт — тот, который вы не подключили. Прошло уже 20 лет с тех пор, как Microsoft подарила вебу корневой набор шрифтов, и они уже всем надоели: Arial, Courier, Georgia, Trebuchet, Verdana и другие. Но с тех пор появилось много других хороших встроенных семейств: Roboto на Android, San Francisco на macOS и iOS, Segoe UI на Windows. И при желании, можно насобирать приличных комбинаций для любого интерфейса.
Более того, набирает популярность мода использовать системный шрифт на каждой из платформ. Можно написать магическое заклинание font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto и так далее — и вы получите знакомый глазу шрифт. Так уже сделал Medium, WordPress, Booking, ВКонтакте и другие. Готовьтесь к крикам и угрозам от постоянных пользователей, но через пару недель они забудут, что было иначе.
Надеюсь, многие закрыли это видео и пошли использовать новые системные шрифты вместо мегабайтов внешних. Для тех кому очень нужно подгружать свои — продожим.
Для подключения шрифтов есть директива @font-face, где на сегодня нужно подключить две версии: WOFF и WOFF 2. Это такой специальный контейнер, который очень эффективно сжимает шрифт и поддерживается даже в IE9. WOFF 2 сжимает лучше всего, поэтому указывайте его первым. Никаких TTF, OTF, SVG, EOT — эти контейнеры слишком неэффективные и нужны в браузерах, которых уже нет в вашей статистике.
Там же можно указать локальные псевдонимы шрифта: в одном название, в другом его PostScript-версию — на случай если они уже установлены в системе. Например, вы можете не загружать Roboto на Android или Ubuntu на Ubuntu — они системные. Многие не знают, что в macOS уже давно встроен шрифт PT Sans, Serif и Mono. Браузер сначала попробует найти их локально и только потом, если не найдёт, пойдёт загружать. Такой способ использует Google Fonts, когда вы подключаете в голову документа стили с параметрами.
В отдельных директивах подключаются все нужные начертания: прямое, жирное, курсив, жирный курсив. Если в каждой из директив указывать одно и то же название, а комбинацией font-weight и font-style описать подключаемый шрифт, то использовать его будет проще. Если элемент унаследовал font-family от родителя, то сменить начертание можно будет с помощью font-weight и font-style. И не нужно будет для каждого задавать разные font-family.
Когда браузер видит директиву @font-face, он не бросается тут же всё загружать — в отличие от фоновых картинок. Он парсит весь остальной CSS и ждёт момента, когда текст нужно будет отрендерить этим шрифтом. И только тогда посылает запрос за файлами. Вы даже можете завернуть это в медиавыражение, мол, пока окно шире 320 пикселей — не нужно ничего загружать. Это очень полезная особенность, она нам ещё пригодится.
Если браузер сразу видит, что ему нужен шрифт — он начинает его загружать. И в этот момент происходит ужасное: большинство браузеров показывают сайт, но прячут текст, который ждёт шрифта, пока он не загрузится. Этот эффект называется FOIT или мелькание невидимого текста. К счастью Chrome, Firefox и Safari 10 перестают ждать после 3 секунд и показывают следующий шрифт по списку. Вот почему важно иметь подходящий запасной список. Chrome на медленных сетях вообще не ждёт, а Safari 9 и старые Android ждут как Хатико — до последнего.
Лучше всего в такой ситуации действуют IE и Edge, прикиньте? Они никогда не прячут текст и всегда показывают следующий системный шрифт, пока грузится внешний. Когда шрифт загрузился — текст перерисовывается. Это может приводить к неприятным скачкам, которые кидают страницу туда-сюда как плохие картинки без размеров. Этот эффект называется FOUT или мелькание текста без стилей. Но, знаете, лучше пусть текст прыгнет пока я его читаю, чем не прыгнет, пока я его не вижу — правда? Этот эффект считается наиболее удачным и его пытаются воспроизвести разными способами: от скриптов до новых CSS-свойств.
Лучший скрипт для имитации FOUT — это «Font Face Observer» Брэма Штайна — всего 3,5 килобайта. Он умеет загружать шрифты, следить за их появлением и делать что-то в результате. Можно использовать как шрифты из ресурсов сайта, так и сторонние из Google Fonts, Typekit и других. Вы прячете использование шрифта за класс в HTML, который выставляет скрипт при загрузке. Браузер видит это и перерисовывает текст. После удачной загрузки полезно ещё кидать флаг в sessionStorage и проверять его в самом начале — пока окно открыто, скрипт не нужен.
Вы можете вызвать загрузку всех четырёх начертаний и когда они загрузятся — браузер перерисует страницу красиво. Но это может занять приличное время, поэтому есть другой способ — FOFT, мелькание ложного текста. Можно загрузить только прямое начертание, сразу применить его и только потом начать загружать остальные. Пока они грузятся, браузер нарисует жирный и курсивный текст как умеет, а после загрузки поменяет этот ужас на правильные глифы. Перерисовки будет в итоге две: от системного до прямого и ложных начертаний, а потом ещё раз до красивых.
Если вас всё-таки прижали к стене и требуют избавиться от прыжков при загрузке — слишком уж непохож системный шрифт на фирменный — вариант есть. Можно повозиться и подогнать системный под нужный, подстроив размер, высоту строки и другие параметры. Моника Динкулеску даже сделала для этого специальный инструмент Font Style Matcher, который поможет сравнить варианты и подобрать очень похожий. Все ссылки в описании.
Вариантов и стратегий загрузки довольно много — есть даже специальный Font Loading API в браузерах, для полного контроля. Если вам нужно разобраться и найти идеальное решение — читайте статьи Брэма Штайна и Зака Лезермана, самых авторитетных авторов по загрузке шрифтов. Оценить успех ваших экспериментов поможет замедление или тротлинг сети во вкладке Network отладчика Chrome. Включите GPRS и узнайте много неутешительного о своём сайте.
Но это всё костыли! Почему бы всем браузерам просто не сделать как IE и Edge? — спросите вы. Потому, что можно ещё лучше. Новое свойство font-display уже год сидит за флагами в Chrome и Firefox и на днях появилось в стабильном Chrome 60. Оно позволяет контролировать как именно браузер рендерит шрифты при загрузке. Значение block прячет текст на три секунды и долго ждёт загрузки, swap делает похоже, но показывает системный шрифт сразу, fallback почти сразу показывает системный и недолго ждёт загрузку, optional — как fallback, но браузер уже сам решает стоит ли загружать шрифт.
Запомните главное: просто так подключить font-family и надеяться, что браузер сам всё разрулит, пока рано — поддержка font-display ещё слабая. Подберите хороший системный шрифт и подключите внешний через Font Face Observer — ваши пользователи скажут вам спасибо.
Был ли у вас момент влюбиться в какой-то совершенно случайный дизайн сайта? Это классные изображения, отличные макеты текста, выигрышная цветовая схема, но самое главное – выдающиеся шрифты, которые буквально заставляют вас украсть их для вашего собственного проекта.
Дизайнеры часто сталкиваются с проблемой выяснения того, какой шрифт использовался на определенном изображении или на веб-сайте. Просмотр всей коллекции шрифтов в надежде найти совпадение не гарантирует вам успеха, не говоря уже о том, что это занимает часы вашего драгоценного времени. А что если шрифта нет даже там?
Я имею в виду, что вы всегда можете обратиться за помощью к опытным веб-дизайнерам, найти соответствующий форум или найти другой потрясающий вариант из коллекции шрифтов TemplateMonster. Что касается форумов, будьте готовы ждать: может быть, день, может быть, несколько недель.
… а что если нет времени ждать?
Хорошая новость в том, что это проще, чем вы думаете. Вы можете искать шрифт по изображению, используя специальные веб-сайты. Вы можете даже загрузить расширение для браузера для большего удобства.
Сегодня я выбрал несколько бесплатных детекторов шрифтов, о которых вы как веб-дизайнер должны знать. Выбор инструмента определения шрифта – это только первый шаг к загрузке его на свой сайт.
Продолжайте читать, и я расскажу, как это делается!
Шаг 1 – Найти шрифты из изображений с помощью таких инструментов, как:
«What Font Is» – самый популярный сервис для определения шрифта по фотографии или скриншоту. Все, что вам нужно, это загрузить изображение (или указать его URL), и программа отобразит наиболее похожие варианты, доступные для покупки на MyFonts. По словам создателей What Font Is, требования к изображению:
- четко горизонтальный текст
- высота буквы не менее 100 пикселей
- буквы не касаются друг друга
- не более 50 символов
WhatTheFont – еще один известный ресурс для определения шрифтов в качестве своего предыдущего конкурента. На первый взгляд кажется, что шаги обслуживания похожи, но на самом деле это не так. С WhatTheFont все немного сложнее: конечный результат напрямую зависит от качества изображения вашего шрифта. Кстати, программа не оптимизирует картинку автоматически.
И хотя по сравнению с What Font Is этот ресурс имеет более слабую коллекцию шрифтов, у вас все еще выше вероятность успешного распознавания шрифтов.
Очевидно, Font Squirrel работает точно так же, как и предыдущие два сервиса: вы загружаете изображение, обрезаете шрифт, и программа обнаруживает возможные подходящие варианты шрифтов. Но есть нечто, что делает Font Squirrel уникальным ресурсом. В частности, возможность поворачивать изображения и определять шрифты, встроенные в нетрадиционную форму. Это очень полезный инструмент, когда изображения имеют шрифты, которые не расположены в обычном горизонтальном положении, и вы больше нигде не найдете эту функцию!
Кроме того, не забудьте просмотреть предлагаемые предложения Font Squirrel – некоторые из них действительно «горячие», поэтому не упустите их.
Matcherator является отличным инструментом распознавания шрифтов с точки зрения простоты использования. На сайте есть удобная функция перетаскивания. Это означает, что вы можете разместить изображение шрифта, просто перетащив его на сайт с помощью мыши. Программа обязательно найдет то, что вам нужно! С помощью этого инструмента вы можете распознать все виды шрифтов (с засечками и без) без затрат.
Помимо вышеупомянутых онлайн-сервисов, вы можете рассмотреть возможность установки одного из расширений браузера. Это поможет вам узнать шрифт не только по изображению, но и по надписи. Самое приятное то, что вам не нужно открывать новую вкладку каждый раз, когда вам нужно обнаружить шрифт. С активированным расширением процедура занимает всего несколько секунд.
FontFaceNinja на данный момент является бесспорным лидером. Расширение не только помогает вам найти заголовок шрифта на веб-сайте (не по изображению), но также дает вам возможность попробовать писать этим шрифтом. Более того, он позволяет вам скачать понравившийся шрифт!
В дополнение к красоте и удобству этого расширения, FontFaceNinja имеет своего рода волшебную кнопку (маску), которая скрывает всю рекламу на странице, что позволяет вам наслаждаться только шрифтами. Расширение полностью бесплатно и работает с Chrome и Safari.
Это еще одно полезное расширение, к сожалению, только для пользователей Chrome. Он работает аналогично предыдущему варианту, хотя Type Sample может похвастаться некоторыми классными уникальными функциями. Особого внимания заслуживает возможность «поиграть со шрифтами» в режиме реального времени. Когда вы щелкаете по выделенному текстовому блоку, вы можете изменить размер шрифта, посмотреть на диаграмму, ввести собственный текстовый пример и попробовать еще несколько хитростей, недоступных для других сервисов.
7. WhatFont
Расширение WhatFont, доступное как для Chrome, так и для Firefox, на первый взгляд не кажется сверхфункциональным сервисом. Но правда в том, что сервис предоставляет пользователям много информации о выбранном шрифте. WhatFont позволяет вам определять не только плитки шрифта, но и высоту линии, стиль, размер, семейство шрифтов, а также текущий цветовой код.
Наконец, вы можете просмотреть все буквы, стилизованные под этот шрифт, и даже загрузить их, если они были разработаны Google.
8. Typ.io
Typ.io – идеальный выбор для максималистов, отказывающихся выполнять дополнительные действия, или тех, кому просто безразличны стили шрифтов и цветовые коды. После установки расширения вы увидите кнопку с буквой «T» в нижнем углу браузера. Если вы нажмете эту кнопку, она отобразит названия всех шрифтов, указанных на странице, в отдельном столбце. Чтобы узнать, где находится шрифт, просто нажмите на его название.
Fount – отличный плагин для определения шрифтов на сайтах, используемых многими профессиональными веб-дизайнерами. Чтобы он работал, нужно добавить сайт в закладки и нажать на него. Курсор станет крестиком, поэтому при нажатии на шрифт вы увидите окно с его заголовком, размером в пикселях, весом и стилем. Чтобы выключить режим Fount – нажмите его еще раз. Расширение работает с такими браузерами, как Safari, Chrome, Firefox и IE8 +.
Шаг 2 – Предварительный просмотр вашего шрифта.
Теперь, когда вы, скорее всего, нашли тот потрясающий шрифт, который видели где-то еще, вам необходимо выяснить, будет ли этот шрифт соответствовать стилю вашего сайта. «Вы никогда не узнаете, если не попробуете» – возможно, вы уже подумали об этом, и вы были бы на 100% правы. Но загрузка каждого любимого шрифта на ваш сайт будет пустой тратой денег, верно?
Хорошей новостью является то, что если вы являетесь пользователем Chrome, вы можете получить предварительный просмотр любого шрифта. Расширение Google Font Previewer позволяет тестировать их на веб-сайте, не переходя в режим редактирования. Вы также можете пометить шрифты, которые вы предварительно просматриваете, и отметить их как избранные в вашем приложении.
Шаг 3 – Загрузите пользовательский шрифт на ваш сайт.
Итак, вы выбрали правильный шрифт, на который так долго охотились, и теперь пришло время внедрить его в свой собственный дизайн сайта. Наиболее распространенный подход к добавлению пользовательского шрифта на веб-сайт заключается в использовании правила CSS FontFace .
- Загрузите шрифт в соответствующем формате (.ttf или .otf)
- Создайте WebFont Kit для кросс-просмотра с помощью генератора Webfont
- Загрузите этот комплект на свой сайт, используя свой FTP или файловый менеджер
- Обновите ваш файл CSS
- Используйте собственный шрифт в своих декларациях CSS
Если у вас есть сайт на WordPress, с плагином для типографики все может стать еще проще – вам больше не нужно будет возиться с кодом. Или вы можете добавить эти шрифты в свою тему вручную, используя файл functions.php.
Bright Calligraphy PSD Font
Если вы ищете современный, гладкий шрифт, то это именно то, что вам нужно. В него входят потрясающие персонажи в неоновом стиле. Идеально подходит для дизайна логотипов, пакетов или других рекламных материалов. Вы получите набор из 81 PSD (4000×4000 px) и PNG файлов (2000×2000 px). Вы можете легко комбинировать отдельные буквы для создания нужного слова. Более того, эти буквы легко настраиваются – вы можете изменить их цвет. Он также поставляется со шрифтом Golden Bush (файлы OTF и TTF, которые вы можете легко установить и использовать). Он снабжен темной текстурой фона. В целом, это привлекательный набор букв в неоновом стиле.
Янтарный вкус
Вот хороший винтажный шрифт. Это прекрасно, если вы хотите что-то продвигать. Это здорово использовать при разработке логотипа, меню или флаера. Старинный шрифт также может сделать ваш дизайн роскошным, особенно если вы используете красивый рисунок. Он поставляется в виде файлов шрифтов OTF и TTF – их легко установить и использовать. Этот шрифт поставляется с файлом EPS. Это обеспечено с бесшовным фоном образца. В целом, этот шрифт поставляется со всем необходимым для создания чего-то впечатляющего. Обратите внимание, что этот файл содержит только латинские символы.
Курение гарнитура
Это еще один винтажный шрифт, который может сделать ваш дизайн потрясающим. Это легко настроить. Он имеет отдельные файлы для шрифта и эффект текстурированной громкости, так что вы можете легко изменить цвет. Поэтому у вас есть несколько вариантов настройки. Он поставляется в виде файлов OTF, TTF и WOFF. Поэтому вы можете легко установить его и использовать. Все персонажи используют формат EPS 10. Это здорово, когда ты хочешь получить винтажный вид, когда ты что-то проектируешь. Это может быть идеально, когда вы создаете логотип или изображение для вашего сайта. Вы также получите бонусный постер.
Шнурки
Если вам нужен хороший шрифт в стиле рукописного ввода, то это именно то, что вам нужно. Этот шрифт имеет две версии – с эффектом «шнурка» и без него. Эффект «шнурка» добавляет специальную текстуру, которая добавляет прозрачные участки. Это может сделать ваш дизайн более интересным. Чистая версия не имеет такого эффекта, но все равно выглядит потрясающе и чисто. Он поставляется с 8 штрихами, лигатурами и альтернативами, чтобы вы могли сделать свой дизайн более сложным и интересным. Он поставляется в виде файлов OTF и TTF, поэтому его легко установить и использовать. Он содержит только латинские символы.
Этикетка виски
Это идеальный вариант, когда вы ищете шрифт в классическом стиле. Это может быть здорово использовать при разработке упаковки, этикетки или логотипа. Это сделает ваш дизайн роскошным и роскошным. Этот шрифт поставляется в файлах OTF и WOFF, поэтому вы можете легко установить и использовать их. Он снабжен четырьмя файлами EPS 10, которые демонстрируют, как его можно использовать. Векторные файлы включают в себя декоративные рамки, ленты и гранж текстуры. Шрифт включает цифры и знаки препинания. Если вы ищете шрифт, который может выделить ваш дизайн – получите его прямо сейчас.
Агресс
Вот современный, агрессивный шрифт, который может сделать ваш дизайн привлекательным. Этот шрифт в стиле граффити идеально подходит, если вы хотите, чтобы ваш дизайн выглядел нестандартным и сложным. Это чистый и хорошо продуманный. Этот шрифт предоставляется в виде файлов OTF и TTF, которые можно легко установить и использовать. Он поставляется с бонусными абстрактными изображениями – шестью 6000×6000 PSD и JPG файлами. Это многоязычный шрифт, поэтому у вас нет никаких ограничений. Все персонажи выглядят динамично, поэтому они делают дизайн более интересным и сложным. Поэтому, если вы хотите создать что-то, на что люди обратят свое внимание – этот шрифт – то, что вам нужно.
Внутри коробки
Вы устали от всех этих стандартных шрифтов? Если да, то этот шрифт для вас. Он выглядит потрясающе и сделает ваш дизайн концептуальным и ярким. Этот шрифт имеет 2 стиля. Он включает в себя широкие символы, которые выглядят современно и концептуально. Есть также тонкие персонажи, которые выглядят очень элегантно и чисто. Это приходит как файлы OTF и TTF. Они просты в использовании. Кроме того, он снабжен файлами шаблонов. Шаблоны могут быть настроены для получения нужного вам вида. Включает только латинские буквы. Этот шрифт может быть отличным, чтобы сделать ваш дизайн несколько футуристическим.
Шрифт Pin Up
Если вы художник, который создает иллюстрации Pin Up, то этот шрифт именно то, что вам нужно. Он идеально соответствует всемирно известным иллюстрациям в стиле Pin-Up. Он включает в себя два стиля шрифта, поэтому вы можете выбрать тот, который вам нравится больше всего. Он поставляется в форматах OTF и WOFF, поэтому их легко установить. Он снабжен несколькими штрихами, которые вы можете использовать, чтобы сделать ваш дизайн более интересным и динамичным. Самое замечательное, что этот шрифт снабжен иллюстрацией девушки в стиле пин-ап! Имейте в виду, что он включает только буквы.
Мегаватт
Этот красивый современный каллиграфический шрифт заставит ваш дизайн выглядеть мощным. Это замечательно, если вам нужно разработать логотип, постер, привлекательное изображение и т.д. Он сочетает стиль рукописного ввода с некоторыми острыми углами. Эта комбинация делает этот шрифт таким мощным. Включает несколько лигатур. Он поставляется в виде файлов OTF и TTF. В качестве бонуса вы получите высококачественный 3D-рендеринг гитарного усилителя (разрешение этого PSD-файла составляет 6000×4000 пикселей. Это многоязычный шрифт (включает символы Западной Европы). В целом, если вы хотите, чтобы ваш дизайн качался, тогда этот шрифт вам нужен.
Augustine
Вот современный элегантный скрипт шрифта. Он очень чистый и гладкий, поэтому идеально подходит для элегантного дизайна. Этот шрифт отлично подходит для создания приглашений, визитных карточек, меню, листовок, плакатов и т.д. Он имеет различные функции, такие как стилистические наборы, стилистические альтернативы, контекстная альтернатива, лигатура и т.д. Он поставляется с косой чертой, поэтому вы можете добавлять специальные штрихи к вашему дизайну и сделать его сложным. Он предоставляется в виде файлов OTF и TTF – вы можете легко установить и использовать его. У него много глифов. Все символы имеют код PUA – вы можете получить к ним доступ без использования дополнительного программного обеспечения. Это многоязычный, поэтому у вас нет никаких ограничений. Это очень чисто, и это сделает ваш дизайн впечатляющим.
И в завершение…
Иногда лучший способ найти правильный шрифт – это искать красивые примеры и коллекции шрифтов в Интернете. Худшее для графических дизайнеров – видеть красивый шрифт и не знать, как он называется. Но теперь, когда у вас есть девять способов определения шрифтов, вы сможете узнать их названия всего за пару минут … или, может быть, даже быстрее!
PS Возможно, вы знаете некоторые другие хорошие инструменты обнаружения шрифтов, о которых я не упомянул. Дайте мне знать в разделе комментариев!
Читайте также: