12 многоязычных шрифтов для вашего сайта: бесплатный выбор по скрипту

Подведите итог этому посту следующим образом: 9 мин чтения

ЧатGPT Недоумение Грок Google ИИ

Не существует единого веб-шрифта, который бы хорошо охватывал все языки. Ближе всего к этому Google Ното проект, который охватывает “более 1000 языков и более 150 систем письма”, но поставляется как отдельные семейства для каждого сценария. Для большинства многоязычных веб-сайтов практическим ответом является один основной шрифт для текста на латыни, кириллице и греческом языке, а также запасной вариант для конкретного сценария (Noto или соответствующее семейство) для арабского, иврита, деванагари, тайского и CJK.

Ниже приведены 12 бесплатных шрифтов, которые обрабатывают более одного скрипта, с указанием конкретных скриптов, которые поддерживает каждый из них, а также настройка CSS и тестовая процедура, которую вы можете запустить перед запуском нового языка.

Ключевые выводы

• Проверять сценарии, а не “количество языков”. Если шрифт не имеет арабских глифов, не имеет значения, сколько языков с латинской графикой он перечисляет.
• Отсутствующие глифы отображаются в виде пустых полей (“tofu”) или в виде несоответствующего системного шрифта. Оба выглядят сломленными для местных читателей.
• Построить а стек шрифтов: сначала шрифт вашего бренда, затем шрифт, специфичный для сценария, затем общее семейство. Браузер выбирает по символам.
• Загружайте CJK и другие крупные шрифты только там, где это необходимо. Google Fonts уже разделяет их на небольшие unicode-range ломтики.
• Протестируйте каждый язык на реальных страницах, в реальных размерах, прежде чем включать его для посетителей.

Как мы выбирали и проверяли эти шрифты

Все 12 шрифтов бесплатны для использования и доступны в Google Fonts. Охват скрипта для каждого из них взят из метаданных семейства шрифтов Google, проверенных 27 сентября 2026 года. “Латынь” включает расширенный набор латинских языков, охватывающий большинство европейских языков, включая турецкий и вьетнамский.

Мы исключили премиум-шрифты. Платные семейства, такие как Helvetica World или Frutiger, могут быть отличными, но их языковая поддержка и цены меняются в зависимости от лицензии и поставщика, и вам следует уточнить их непосредственно на литейном заводе.

12 многоязычных шрифтов

1. Ното Санс

Сценарии: Латынь, кириллица, греческий, деванагари, вьетнамский. Семьи компаньонов охватывают практически все остальное: ното санс арабский, иврит, тайский, JP, KR, SC (упрощенный китайский), TC (традиционный китайский) и многое другое.

Noto (сокращение от “no tofu”) — выбор по умолчанию, когда вам нужна широта. The Проект Ното описывает его как коллекцию “на более чем 1000 языках и более чем 150 системах письма”, а шрифты выпускаются под лицензией SIL Open Font License. Поскольку каждое семейство шрифтов предназначено для совместной работы, Noto также является самым безопасным запасным вариантом после любого другого шрифта в этом списке.

2. Ното Сериф

Сценарии: Латынь, кириллица, греческий, вьетнамский, а также математические символы.

Шрифт с засечками является партнером Noto Sans и имеет собственный набор сопутствующих шрифтов (Noto Serif JP, Noto Naskh Arabic для традиционного арабского стиля и другие). Подходит для редакционных сайтов, которым нужна атмосфера книги на каждом языке.

3. Открытый санс

Сценарии: Латынь, кириллица, греческий, Иврит, вьетнамский.

Гуманистический гротеск Стива Мэттесона уже много лет является неотъемлемой частью Интернета. Поддержка иврита - причина, по которой он в этом списке: мало популярных латинских шрифтов включают его. Это надежный выбор основного текста для сайтов, которым нужны английский, русский, греческий и иврит из одной семьи.

4. Робото

Сценарии: Латынь, кириллица, греческий, вьетнамский.

Системный шрифт Android, разработанный Кристианом Робертсоном. Посетители уже знают его, у него много весов и переменная версия, и он четко сочетается с Noto для скриптов, которые он не охватывает.

5. Интер

Сценарии: Латынь, кириллица, греческий, вьетнамский.

Расмус Андерссон разработал Inter для экранов, и он отображается в виде небольшого текста пользовательского интерфейса: кнопок, меток, таблиц. Если ваш сайт представляет собой приложение или панель управления, то Inter plus Noto fallbacks — это надежная комбинация.

6. Источник Санс 3

Сценарии: Латынь, кириллица, греческий, вьетнамский.

Первое семейство Adobe с открытым исходным кодом, созданное Полом Д. Хантом. Нейтральный, очень читабельный в длинном тексте и близкий по стилю к Source Han Sans, дизайн CJK, разработанный Adobe совместно с Google и поставляемый Google как Noto Sans CJK.

7. Фира Санс

Сценарии: Латынь, кириллица, греческий, вьетнамский.

Разработано Carrois Apostrophe для Mozilla. Немного более индивидуальны, чем Roboto или Inter, с соответствующим Fira Mono, если на вашем сайте отображается код.

8. Монтсеррат

Сценарии: Латынь, кириллица, вьетнамский язык. Никакого греческого.

Популярно для заголовков. Напоминаем, что нужно прочитать статью: Монтсеррат подходит для английского, немецкого, польского, русского и украинского языков, но греческая страница будет иметь другой шрифт в середине заголовка.

9. IBM Plex Sans (и его скрипты-компаньоны)

Сценарии: Plex Sans охватывает латынь, кириллицу, греческий и вьетнамский языки. Отдельные семьи добавляют Арабский, иврит, деванагари, тайский, японский и корейский.

IBM Plex — наиболее полный “разработанный как единая система” вариант после Noto. Каждый компаньон разделяет пропорции и тон Plex, поэтому страница на арабском и страница на английском языках кажутся одним и тем же брендом.

10. Рубик

Сценарии: Латынь, кириллица, Иврит, арабский.

Слегка округлый и дружелюбный. Одна из немногих отдельных семейств, охватывающая как иврит, так и арабский язык, а также латынь и кириллицу, что делает ее удобной для сайтов Ближнего Востока.

11. Каир

Сценарии: Арабский, латынь.

Современная арабская семья с соответствующим латинским набором. Полезно, когда приоритет отдается страницам на арабском языке и вы хотите, чтобы английские слова в арабском тексте (названия брендов, коды продуктов) совпадали.

12. Noto Sans JP, SC, TC и KR

Сценарии: Японский, упрощенный китайский, традиционный китайский и корейский языки соответственно, каждый с латиницей и кириллицей.

Китайские, японские и корейские шрифты содержат тысячи символов, поэтому размер файла является реальной проблемой. Google Fonts обслуживает их в небольших количествах unicode-range фрагменты, а браузер загружает только те фрагменты, которые нужны странице. Используйте семейство, соответствующее языку: японский и китайский языки имеют много общих символов, но рисуют их по-разному, и читатели это замечают.

Краткое предупреждение о фаворитах только на латиноамериканском языке: Например, Lato перечисляет в Google Fonts только Latin и Latin Extended. Многие фирменные шрифты одинаковы. Это нормально, если в вашем стеке есть резервный вариант для каждого второго публикуемого вами скрипта.

Как настроить многоязычный стек шрифтов

Браузер выбирает шрифт для каждого символа. Если первый шрифт в font-family не имеет глифа, пробует следующий. Вы можете использовать это намеренно:

body {
  font-family: 'Inter', 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans JP', system-ui, sans-serif;
}

Для лучшего контроля установите шрифты для каждого языка с помощью :lang() селектор. Это работает до тех пор, пока страница <html lang="…"> атрибут верен для отображаемого языка:

:lang(ar) body {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
}
:lang(he) body {
  font-family: 'Open Sans', 'Noto Sans Hebrew', sans-serif;
}
:lang(ja) body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
}
:lang(th) body {
  font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif;
  line-height: 1.9;
}

Три детали, которые экономят время в дальнейшем:

• Высота линии. В тайском, деванагари и арабском языках знаки расположены над и под буквами. Высота строки, настроенная на английский язык, может их обрезать. Дайте этим языкам больше места.
• Жирный шрифт и курсив. Во многих сценариях нет настоящего курсива. Если вы полагаетесь на курсив для акцентирования внимания, выберите другой стиль (вес или цвет) для этих языков.
• Самостоятельный хостинг. Если вы размещаете шрифты самостоятельно, сохраните unicode-range дескрипторы при копировании @font-face правила. The Ссылка MDN для диапазона юникодов показывает синтаксис.

Как протестировать шрифты перед запуском языка

1. Включите язык в скрытом или промежуточном состоянии и загрузите пять самых важных страниц: домашнюю страницу, страницу с товарами или ценами, длинную статью, форму, а также страницу оформления заказа или регистрации.
2. Обратите внимание на тофу и смену шрифтов. Пустые прямоугольники очевидны. Внезапное изменение формы букв в середине заголовка легче не заметить, и это означает, что шрифт отступил.
3. Отметьте мелкий текст. Нижние колонтитулы, метки форм, ячейки таблиц и кнопки мобильного размера. Сложные тексты трудно читать, если их размер не соответствует английскому языку.
4. Проверьте длину текста. Переведенный текст часто длиннее. W3C статья о размере текста в переводе ссылается на рекомендации IBM о том, что короткие строки английского языка (до 10 символов) могут увеличиваться на 200–300% в европейских языках. Кнопки и меню ломаются первыми.
5. Проверьте направление. Для арабского, иврита и персидского языков убедитесь, что макет зеркал корректен, а цифры и латинские слова внутри текста по-прежнему читаются правильно. Наш путеводитель по Дизайн РТЛ закрывает сторону макета.
6. Спросите у местного читателя. Свободно говорящий заметит неправильный региональный глиф (распространенный в китайском и японском языках) за считанные секунды.

Как ConveyThis помогает на этапе тестирования

ConveyThis переводит текст вашего сайта и устанавливает страницу lang атрибут отображаемого языка, поэтому :lang() вышеуказанные правила применяются автоматически. Вы можете просмотреть каждый язык с помощью переключателя языков и исправить неудобные формулировки в визуальный редактор на самой странице, что является самым быстрым способом обнаружить метку кнопки, которая больше не подходит. Если строка слишком длинная для вашего дизайна, отредактируйте перевод там или используйте глоссарий, чтобы короткий термин использовался последовательно.

Чего ConveyThis не делает, так это не выбирает и не загружает шрифты за вас. Стек шрифтов остается в CSS вашей темы. Планы и языковые ограничения находятся на рассмотрении страница цен, и ConveyThis поддерживает 210 языков, поэтому стоит проверить покрытие шрифтов перед добавлением нового скрипта.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Какой шрифт поддерживает все языки? Ни один файл шрифта этого не делает. Ближе всего к этому подходит семейство Noto от Google, в котором для совместной работы предусмотрено отдельное семейство для каждого скрипта.

Что означает “тофу” в шрифтах? Пустой прямоугольник, который рисует браузер, когда в шрифте нет глифа для символа. Название Ното происходит от “нет тофу”.

Должен ли я использовать один шрифт для каждого языка? Только если он действительно охватывает каждый опубликованный вами сценарий. В противном случае используйте фирменный шрифт для латинского текста и соответствующие резервные варианты для всего остального.

Замедляют ли многоязычные шрифты работу моего сайта? Они могут, особенно шрифты CJK. Загружайте только те грузы, которые вы используете, сохраняйте unicode-range подмножество и использование font-display: swap поэтому текст отображается во время загрузки шрифтов.

Готовы ли вы увидеть свой сайт на новом языке, со всеми шрифтами? Создать учетную запись ConveyThis и просмотрите переводы на своих страницах, прежде чем публиковать их.