При создании сайта необходимо иметь все необходимые инструменты, чтобы произвести впечатление на посетителей. В их число входят и современные шрифтов. Но в вашей теме может не оказаться нужного вам набора. Или вы можете быть недовольны теми, которые разработчик вам предоставил по умолчанию.
В связи с этим возможность установить пользовательские шрифты очень важна. Сегодня мы обсудим различные варианты красивых современных шрифтов. Но сначала давайте разберемся с техническими аспектами.
- Что действительно делает шрифт современным?
- Как загрузить скачанные шрифты в WordPress
- 56 современных шрифтов, которые стоит использовать
- 1. Intro
- 2. Komoda
- 3. Stoked
- 4. Classy Marisa
- 5. Canter
- 6. Lucky
- 7. Zafir
- 8. Coves
- 9. Azonix
- 10. Arkhip
- 11. Prime
- 12. Glober
- 13. MADE Gentle
- 14. Nordic
- 15. Maddac
- 16. Croc
- 17. Aqua
- 18. Manifesto
- 19. Orkney
- 20. Elppa
- 21. Corn
- 22. Koliko
- 23. Quirk
- 24. Le French
- 25. Munich
- 26. Northwest
- 27. Modeka
- 28. Disclaimer
- 29. 5th Avenue
- 30. Quakiez
- 31. Modern Outdoor
- 32. Hyperbola
- 33. Boxing
- 34. Sonder
- 35. Lombok
- 36. Distrito
- 37. Ailerons
- 38. Ethna
- 39. Noelle
- 40. Sequel
- 41. Higher
- 42. Nano
- 43. Jollin
- 44. Phenomena
- 45. Calibre
- 46. Sundays
- 47. Cornerstone
- 48. One Day
- 49. Kollektif
- 50. Nostalgia
- 51. Elixia
- 52. Salmon
- 53. Thinoo
- 54. Summer Loving
- 55. Silverfake
- 56. Vienna
- Итоги
Что действительно делает шрифт современным?
Современные шрифты вовсе не новы. Изначально этот стиль был разработан в XVIII веке. Несмотря на это, их дизайн остается актуальным и в современном мире. Фактически, вы видите их буквально повсюду.
Как же выглядят современные шрифты?
Современные шрифты — четкие, гладкие, смелые, профессиональные и стильные. Они также часто бывают без засечек (но не всегда) и иногда попадают в категорию курсивных шрифтов. Их дизайн сразу бросается в глаза, и они часто используются в заголовках и логотипах. Они могут быть ярко выраженными корпоративными, но не агрессивными. Скорее, они смелые и требуют внимания.
Вот пример сайта-портфолио с использованием современного шрифта. Обратите внимание, насколько он сжат по горизонтали.
Конечно, это общие сведения. Современная типографика постоянно развивается, и вы можете найти более стильные примеры. Но, надеюсь, это даст вам общее представление о том, что такое современный шрифт (и почему вы можете захотеть его использовать).
Как загрузить скачанные шрифты в WordPress
Пользовательские шрифты, загруженные из Интернета, требуют дополнительной работы, поскольку вы не можете просто импортировать их, как это можно сделать с помощью онлайн-сервиса Google Fonts. Вместо этого вам придется либо вручную загрузить шрифты, либо воспользоваться плагином.
Но прежде чем загружать шрифты, нужно убедиться, что они пригодны для использования в сети. О чем тут речь? Не все шрифты безопасны и совместимы со всеми браузерами.
Но в этом нет ничего сложного. Просто воспользуйтесь бесплатным инструментом Webfont Generator, чтобы преобразовать любой пользовательский шрифт, найденный в Интернете, в формат, читаемый и используемый всеми веб-браузерами.
Выполнив этот шаг, вы сможете оптимизировать скорость работы шрифтов. Однако это еще не все. Вы также должны следовать нескольким советам, чтобы убедиться, что ваши пользовательские шрифты не потребляют ресурсы и не замедляют загрузку сайта без особой необходимости:
- Проверьте производительность. Используя GTmetrix, проследите за количеством HTTP-запросов. Если их много, это может означать, что ваш сайт использует гораздо больше шрифтов, чем вы предполагаете. Я имею в виду шрифты, автоматически установленные вместе с плагинами и WordPress темами (а не те, которые вы намереваетесь добавить вручную).
- Проверьте свою аналитику. Здесь вы можете увидеть, какие форматы шрифтовых контейнеров наиболее часто используются на вашем сайте. Наиболее распространенные варианты — EOT, TTF, WOFF и WOFF2. Это поможет вам определить, каким из них отдать предпочтение.
- Убедитесь, что шрифты кэшируются локально. Не похоже, что вы обновляете шрифты каждый день. Это значит, что шрифты можно безопасно кэшировать в браузерах постоянных посетителей. Это временем сократит количество HTTP-запросов к сайту и ускорит его загрузку.
Загрузка шрифтов вручную требует некоторых технических навыков, но для большинства владельцев сайтов это не является чем-то слишком сложным.
- Скачайте себе на компьютер выбранный вами современный шрифт (примеры приведены ниже).
- Сохраните резервную копию вашего сайта (включая все содержимое и базу данных) и/или используйте дочернюю тему для последующих изменений.
- Загрузите файлы шрифтов в формате .zip в папку wp-content/themes/ваше название темы/fonts. Если папки «fonts» нет, создайте ее и загрузите туда свой файл шрифтов в формате .zip. Для этого используйте любой FTP-клиент по вашему выбору.
- В приборной панели WordPress перейдите в раздел Внешний вид —> Редактор темы и откройте файл style.css.
- Вам нужно будет добавить в этот файл фрагмент пользовательского кода. Добавьте соответствующее семейство шрифтов и URL в фрагмент кода, а затем нажмите кнопку «Обновить файл».
@font-face {
font-family: НАЗВАНИЕ ВАШЕГО ШРИФТА;
src: url((http://sitename.com/wp-content/themes/themename/fonts/font-name.ttf);
font-weight: normal;
}
Приведенный выше код добавляет шрифт на ваш сайт. Далее вам нужно указать WordPress, где должен использоваться загруженный шрифт. Для этого снова откройте файл style.css и используйте следующий фрагмент кода:
.SITE ELEMENT {
font-family: "FONT NAME", Helvetica, sans-serif;
}
В этом фрагменте вам нужно определить, к какому элементу сайта вы хотите применить шрифт, и указать название шрифта перед обновлением файла.
Если вы хотите пропустить этапы загрузки шрифта вручную, вы можете использовать специальный плагин для добавления шрифтов в WordPress. Отличный вариант — Use Any Font. Как следует из названия, с его помощью можно залить на сайт любой пользовательский шрифт и назначить его элементам CSS.
56 современных шрифтов, которые стоит использовать
Теперь, когда вы знаете, как оптимизировать и загружать пользовательские шрифты, предлагаю вам список современных шрифтов для сайтов на WordPress, из которых вы можете выбрать понравившийся вариант.
1. Intro
Intro — это стандартный современный шрифт с жирными линиями и начертанием, который можно использовать для заголовков и названий. Это семейство включает 72 шрифта с 8 различными весами — от тонкого до толстого, что дает широкие возможности.
2. Komoda
Еще один вариант — Komoda. Этот шрифт является конденсированным и очень интересным на вид. Он набран заглавными буквами без засечек и имеет блочное отображение, где средняя линия каждой буквы высоко поднята. А его лигатура ярко выраженная. Идеальный выбор для логотипов.
3. Stoked
Stoked — шрифт, который предлагает уникальный вид для заголовков и логотипов. Он интересен, но при этом остается разборчивым. Его отличительной особенностью является наличие двойных линий на каждой букве, а также разрывы между строками, которые придают ему некий трафаретный вид.
4. Classy Marisa
Существует также Classy Marisa. Этот современный шрифт, элегантный и плавный, предлагает более тонкий и изящный вариант для ваших логотипов и заголовков. В нем есть интересные лигатуры, альтернативные глифы и орнаменты, которые придают дополнительный характер любому тексту, которым вы хотите поделиться.
5. Canter
Canter — еще один отличный выбор. Это шрифт без засечек с уплотненным интервалом, в котором все буквы прописные. Он выпускается в шести вариантах, включая 3D-вариант и вариант с заметной падающей тенью.
6. Lucky
Lucky — современный стильный шрифт, заслуживающий внимания. Это еще один вариант без засечек, который может хорошо подойти для логотипа или названия сайта. Он имеет ярко выраженное редакционное качество, которое легко можно быть использовать в интернет-журналах и других онлайн-изданиях.
7. Zafir
Zafir — современный шрифт, заслуживающий внимания. Он отличается минималистичным начертанием и заглавными буквами. Это шрифт с засечками, изогнутыми линиями и в целом интересным внешним видом, который может хорошо подойти для творческих логотипов и тайтлов.
8. Coves
Coves имеет два начертания — светлое и полужирное. Представляет собой элегантный и обтекаемый вариант шрифта для ваших модных проектов. Используйте его как для обычного текста, так и для заголовков. Он действительно многоцелевой.
9. Azonix
Azonix — современный творческий шрифт, на этот раз с футуристическим уклоном. Он без засечек, что подчеркивает геометрию начертания. Набран всеми заглавными буквами и выглядит так, будто его можно использовать во вступительных титрах научно-фантастического фильма.
10. Arkhip
Arkhip — еще один бесплатный шрифт, объединивший в себе современный дизайн и напоминания об ушедших эпохах. В нем использованы элементы русской типографики, чтобы получилось нечто современное и по-настоящему новое.
11. Prime
Еще один шрифт, который стоит рассмотреть, называется Prime. Это современный тип шрифта с засечками, который отличается жирными линиями и футуристическим видом. Имеет геометрические углы и идеально подходит для сайтов, посвященных технологиям.
12. Glober
Glober — семейство современных шрифтов, которое включает в себя 18 начертаний с равномерным распределением: 9 прямых и 9 курсивных. Это шрифт с засечками, который легко читается и применяется в различных ситуациях, включая заголовки и основной текст.
13. MADE Gentle
MADE Gentle — современный нежный шрифт. Отличается мягким засечкам. Его создатели вдохновлялись шрифтом Cooper Black. Это смелый, но округлый ретро-шрифт, напоминающий старые обложки книг и вывески прошлого.
14. Nordic
Nordic — это одновременно современный и классический шрифт, предлагающий два начертания и три толщины на выбор. Дизайн был вдохновлен норвежскими рунами и идеально подходит для использования в названиях, заголовках и логотипах.
15. Maddac
Maddac — стильный вариант для вашего сайта. Это смелый, блочный шрифт без засечек. Его отличает современный дизайн и уникальное исполнение. Каждая буква имеет небольшой угол или наклон в одном из аспектов дизайна, что придает тексту немного свежего стиля.
16. Croc
Посмотрите на Croc — правда крутой шрифт? Это жирный вариант с засечками и культовым стилем, который вызывает ностальгию, оставаясь при этом современным.
17. Aqua
Aqua — шрифт в стиле модерн, неподвластный времени. Он смелый, но простой, с украшениями и лигатурами, которые выделяют его среди других вариантов.
18. Manifesto
Сделайте смелое заявление с помощью Manifesto. Этот шрифт был вдохновлен итальянским рационалистическим движением и имеет явно редакционный характер. Используйте его для заголовков, логотипов и названий. Идеально подойдет для печатных и онлайн-дизайнов. В этом смысле он действительно универсален.
19. Orkney
Orkney — прекрасный профессиональный шрифт. Имеет геометрический дизайн и может использоваться для самых разных целей: для заголовков или логотипов, для стандартного текста, для печати или на цифровых носителях. Возможности безграничны.
20. Elppa
Elppa имеет футуристический вид, завораживающий и многогранный. Шрифт минималистичен и в то же время создает ощущение космической эпохи. Используйте его для печати и веб-дизайна. Он подойдет для логотипов и заголовков (возможно, не для основного текста), но определенно пригодится для графики и пр.
21. Corn
Corn — интересный шрифт с закругленными углами в фермерском стиле. Он состоит из 14 различных видов начертаний, которые вы можете сразу же начать использовать для заголовков и логотипов. Некоторые разновидности при желании можно использовать и для основного текста. С его помощью можно сделать дизайн сайта по-настоящему современным.
22. Koliko
Koliko — очень веселый шрифт, который мгновенно привлекает внимание и подходит для самых разных целей. Он представлен в трех видах, каждый из которых дает идеальное сочетание формы и функциональности.
23. Quirk
Quirk — довольно причудливый шрифт. Название для него выбрано удачно. Это полностью прописной шрифт, включающий забавные лигатуры и штабелируемые элементы.
24. Le French
Le French — изысканный шрифт, особенно если вы хотите воспроизвести атмосферу старинного французского кафе. Отличный выбор для меню и сайтов, связанных с едой. Используйте его также для заголовков, рубрик, логотипов и основного текста.
25. Munich
Munich — прекрасный вариант шрифта с засечками, который отлично подойдет для логотипа или заголовков на WordPress сайте. Он высокий и внушительный, но при этом не выглядит угрожающе.
26. Northwest
Northwest — современный шрифт с налетом ретро. Он напоминает логотипы туристического снаряжения и заголовки журналов о природе. Благодаря квадратным засечкам и декоративным элементам этот шрифт хорошо подойдет для любых сайтов по теме отдыха на природе.
27. Modeka
Modeka — квадратный, современный и, честно говоря, просто крутой. Этот современный шрифт можно использовать по-разному. Благодаря дополнительным углам на каждой букве, он предлагает уникальный стиль, который может подойти для вашего следующего технического проекта.
28. Disclaimer
Disclaimer — узкий и жирный шрифт универсального плата. Он суперконденсированный, с высокими и внушительными буквами. Отлично подойдет для заголовка или названия сайта.
29. 5th Avenue
5th Avenue определенно необычный, с классическим воздушным оформлением. Хорошо подходит для официальных логотипов и брендинга. Это смелый шрифт с засечками, который выделяется благодаря большому количеству альтернативных букв, добавляющих любому тексту стиль и интерес.
30. Quakiez
Quakiez — один современный вариант с засечками в нашем списке. Он был разработан с учетом роскоши, но при этом сохраняет элементы минимализма. Шрифт представлен в двух стилях и может использоваться для логотипов, заголовков, рубрик и многого другого на вашем сайте.
31. Modern Outdoor
Вы можете выбрать шрифт Modern Outdoor, который сразу же навевает мысли о кемпинге и отдыхе на природе. Идеально подходит для заголовков, логотипов и плакатов. Он требует внимания, а начертание заглавными буквами еще больше подчеркивает его внешний вид.
32. Hyperbola
Hyperbola — округлый и футуристический. На самом деле, он выглядит космическим (в хорошем смысле этого слова). Данный шрифт имеет округлые контуры, сохраняя при этом общую квадратную форму.
33. Boxing
Boxing — квадратный и чистый, идеально подходящий для современных заголовков, названий и логотипов. Он полностью прописной, высокий и интересный на вид. Кроме того, данный шрифт очень функционален и может быть использован множеством различных способов.
34. Sonder
Sonder — еще один многогранный шрифт. В нем есть наклонный вариант и вариант без засечек. Имеет несколько вариантов весов, а также обычный и грубый стиль начертания. В грубом стиле между буквами есть пробелы, что придает шрифту деревенский естественный вид.
35. Lombok
Lombok — тонкий и очень элегантный шрифт. Без засечек, с геометрическими элементами, благодаря которым он выделяется и кажется совершенно уникальным. Это идеальный выбор для заголовков, логотипов и названий.
36. Distrito
Distrito — полностью прописной шрифт, отличающийся особой современной стилистикой. Каждая буква слегка наклонена, что придает ему уникальный вид, который хорошо подходит для логотипов и заголовков. Его создали под влиянием модульного дизайна Columbian.
37. Ailerons
Ailerons выглядит как шрифт, который можно увидеть на инопланетных вывесках. И эта эстетика ему очень идет. Без засечек и заглавных букв. Производит впечатление независимо от того, в каком месте сайта вы его разместите, хотя лучше всего подходит для заголовков и рубрик.
38. Ethna
Ethna имеет классический, но современный облик. Это универсальное семейство шрифтов с засечками, вдохновленное гуманистическим дизайном. В нем хорошо сочетаются винтажные и современные элементы, образуя нечто совершенно новое и современное.
39. Noelle
Noelle — геометрический шрифт с засечками, который сразу производит положительное впечатление. Выполнен в минималистичном стиле и хорошо подходит для заголовков в любой отрасли. В нем есть несколько винтажных элементов, но он по-прежнему выглядит свежо. Используйте его в Интернете или в печатных изданиях. Кроме того, в качестве бонуса к нему прилагается шрифт скорописи.
40. Sequel
Sequel — округлый шрифт, идеально подходящий для логотипов и заголовков. В комплект входит множество лигатур, которые придают стиль и интерес всему, что вы создадите с их помощью. Дизайн здесь смелый, но не навязчивый.
41. Higher
Higher — изысканный шрифт, который характеризует классический вид. Этот шрифт, набранный заглавными буквами (англ. all caps), очень сжатый и требовательный. Он сразу придает особый стиль всему, с чем вы его используете.
42. Nano
Nano — футуристический шрифт без засечек. Является полностью строчным, что делает его уникальным вариантом в этом списке. Сами буквы выполнены современно и узнаваемо, что делает его отличным выбором для логотипов и других брендированных материалов. Однако его лучше использовать для коротких фраз, так как длинные предложения могут стать немного неразборчивыми.
43. Jollin
Jollin — современный шрифт с вьющимися контурами на некоторых буквах и в целом с неровными краями. С засечками, доступен в обычной и курсивной версиях и включает в себя множество альтернативных букв, так что в зависимости от настроения вы можете сделать свой текст более простым или наоборот — вычурным.
44. Phenomena
Phenomena — узкий блочный шрифт с закругленными контурами. Он привлекает внимание и может использоваться для заголовков, логотипов или шапок сайтов. В комплект входят 7 различных стилей — от тонкого до жирного. Поэтому его можно смело брать в том числе для стандартного текста.
45. Calibre
Calibre — суперуплотненный шрифт, который может возвысить ваш контент, если вы ему это позволите. Полностью прописной вариант, который также включает в себя цифры, глифы и западные символы.
46. Sundays
Sundays — шрифт с засечками, который определенно принадлежит современной эпохе, но в то же время в нем чувствуется классика, которая не вызывает сомнений. Он более тонкий и изогнутый, чем классические аналоги, и по стилю подходит для заголовков и названий журналов, логотипов сайтов, шапок и многого другого.
47. Cornerstone
Cornerstone — еще один блочный шрифт с модульным дизайном, который можно смело использовать в различных сферах — от логотипов до заголовков.
48. One Day
One Day — тонкий шрифт с интересными разделенными линиями, которые делают его уникальным. Это еще один полностью прописной вариант с легким и тонким стилем. Он включает в себя цифры и глифы и кажется геометрическим, но при этом не слишком громоздким.
49. Kollektif
Kollektif —современный классический шрифт, который можно использовать самыми разными способами. Обладает геометрическим дизайном и выпускается в двух начертаниях. Оптимизирован как для офлайн-печати, так и для использования в Интернете.
50. Nostalgia
Nostalgia — шрифт, в котором помимо современных акцентов достаточно ретро нюансов, чтобы казалось, что он был создан несколько десятилетий назад. Включает в себя 3 разновидности начертания, а также альтернативные глифы, лигатуры и даже цветы. Отлично подойдет для логотипов сайтов, заголовков online-СМИ, плакатов или праздничных приглашений.
51. Elixia
Elixia имеет неземной вид, который бы подошел для жилища алхимика. Это геометрический шрифт с дополнительными углами линий на каждой букве, что придает ему уникальное звучание.
52. Salmon
Salmon — шрифт без засечек, смелый и минималистичный. Идеально подходит для названий, логотипов и колонтитулов. Полностью прописной и включает в себя версии с полной заливкой и только с очертаниями, которые прекрасно сочетаются друг с другом.
53. Thinoo
Thinoo — шрифт с современными засечками. Имеет тонкое и жирное начертание и включает в себя все буквы, цифры, символы и знаки препинания. Профессиональный и чистый. Простой, но привлекающий внимание. Хорошо подойдет для любого типа веб-сайта на WordPress, а также для печатных материалов.
54. Summer Loving
Summer Loving — супервеселый и современный. Включает несколько стилей, так что вы можете создать полноценный дизайн, используя только одно семейство шрифтов. В комплект входит чистый шрифт sans, а также вариант с детализацией кистью — это сразу добавит объем вашим проектам. В нем также есть лигатуры и альтернативные буквы.
55. Silverfake
Silverfake — широкоформатный вариант с засечками для заголовков, логотипов, шапок сайтов и печатных материалов. Такой шрифт отлично подойдет, например, для логотипа футболки.
56. Vienna
Vienna — современный шрифт с засечками, завершающий сегодняшний обзор. Обладает привлекательностью классической типографики, используемой на обложках журналов, но при этом достаточно модифицирован, чтобы соответствовать эстетике сегодняшнего дня. Он минималистичен и включает в себя все прописные буквы, цифры и знаки препинания.
Итоги
Существует множество причин, по которым вы можете захотеть использовать пользовательские шрифты на своем сайте. Причем неважно — хотите ли вы лучшего соответствия дизайна сайта своему бренду или просто желаете сделать свой контент более читаемым во всех браузерах.
Независимо от того, как вы подойдете к этому процессу, вы можете быть уверены, что конечный результат будет стильным и добавит характер в общий дизайн вашего онлайн-проекта. Надеемся, что коллекция современных шрифтов, которую мы собрали здесь, поможет вам найти подходящий вариант для вашего WordPress-ресурса.