Как подключить шрифт в CSS, где найти и как установить
Роль шрифтов при создании сайта
При оформлении созданного сайта необходимо уделить должное внимание выбору шрифтов, поскольку люди посещают страницы с целью получить информацию именно через прочтение, поэтому нужно сделать этот процесс максимально комфортным.
Разумным решением будет использовать два основных шрифта при оформлении сайта. Один – для заголовков, а другой – для основного текста. Таким образом, посетитель будет легко различать структуру контента, а сам сайт будет более целостным.
Для заголовка, например, можно использовать шрифт Roboto Black, а для основного текста – Roboto Light или другие варианты.
Важно знать, что шрифт, который вы установили на своем компьютере, не обязательно правильно отрисуется у других. Если такой же шрифт не установлен у читателя, то его браузер отобразит либо альтернативу вашему шрифту, либо значение по умолчанию.
Кстати, эта фраза для демонстрации всех кирилических шрифтов выбрана не случайно. Именно она содержит сразу весь русский алфавит и предоставляет возможным оценить отрисовку каждой буквы в контексте одного предложения.
Как установить сразу несколько шрифтов
Очередь шрифтов – указание в стилях сайта не только, например, «Roboto», но и ряд других, как вариант: «Roboto, Serif, Arial». В таком случае, браузер первым попытается использовать шрифт Roboto, если он не установлен на компьютере пользователя, то следующим будет Serif, за ним Arial, а затем шрифт, который система сама обозначила по умолчанию. Пример реализации, фрагмент из style.css моего сайта:
body { font-family: Open Sans Light, sans-serif; color: #333; font-size: 18px; line-height: 20px; font-weight: 400; }
Как видно из кода, основным шрифтом является Open Sans Light, в случае возникновения с ним каких-либо проблем, браузер отобразит стандартный serif, который есть в каждой сборке Windows. Зачем это нужно, если система сама поставит шрифт по умолчанию? Затем, что стандартный serif визуально гораздо больше похож на мой кастомный Open Sans, и в целом, потери отображения контента будут не такими большими, как в случае с отрисовкой совершенно другим шрифтом.
Чтобы совсем обезопасить себя от метаморфоз с отображением, достаточно просто прописать прямую ссылку на используемый шрифт в файл стилей Вашего сайта. Делается это очень просто:
@font-face {
font-family: "Название шрифта";
src: url("../путь/к/шрифту.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
Пример из таблицы стилей моего сайта:
@font-face { font-family: "Open Sans Light"; src: url("../fonts/opensans.ttf") format("truetype"); font-style: normal; font-weight: normal; }
После указания в style.css прямой ссылки на файл шрифта, остаётся лишь применить его, указав в том же файле стилей font-family для всего сайта или отдельного элемента. В качестве примера, применим ко всему тексту на сайте:
body { font-family: Open Sans Light ; color: #333; font-size: 18px; line-height: 20px; font-weight: 400; }
Где взять красивые шрифты для сайта?
Поиск необходимых шрифтов, порой, самое долгое и интересное занятие. Ведь их на сегодняшний день просто великое множество, и такое же множество похожих между собой видов. Определиться с этим крайне непросто, но ведь нужно знать, откуда брать источник для выбора.
AllFont — cервис, которым я пользуюсь лично. Это огромная библиотека шрифтов, в том числе, что немало важно, и кирилических. Сайт удобен тем, что Вам вовсе не обязательно скачивать шрифт для того, чтобы узнать как он будет выглядеть в работе — достаточно лишь ввести желаемую фразу в качестве примера, и Вы сразу получите представление о шрифте. Так же на странице каждого шрифта дополнительно есть изображение со всеми символами и буквами русского и английского алфавита, цифрами и самыми распространенными спецсимволами.
Желаю Вам удачи в оформлении
Таким образом, зная эти несколько нюансов, вы сможете оформить сайт на свой вкус и предотвратить возможные недоразумения при его отображении на компьютерах пользователей.
Как установить шрифт в любую из ОС, графические редакторы или на свой сайт.
Главная цель инструкции – помочь вам раз и навсегда решить вопрос, как установить шрифты в операционную систему Windows, MacOS и Linux. На самом деле в этом нет ничего сложного. Достаточно 1 раз попробовать, и инсталляция новых шрифтовых наборов будет занимать меньше минуты.
Для Windows
В качестве системных допускается устанавливать шрифты формата EOT или TTF. Выделите один или несколько файлов, щёлкните правой кнопкой и наведите курсор на «Установить». Инсталляция запустится автоматически после щелчка. Останется лишь дождаться завершения процесса.
Альтернативный метод немного сложнее и актуален для случаев, когда контекстное меню не содержит пункт «Установить» или надо добавить в ОС внушительное число шрифтов. Вначале зайдите в директорию Windows и перейдите в каталог Fonts. Потом переместите туда файлы. Больше никаких операций не требуется.
Попасть в каталог со шрифтами можно ещё 2 способами. Самый простой – нажмите WIN
+ R.
Откроется окно для ввода команд. Скопируйте туда строку %windir%\fonts и
кликните по кнопке ОК.
Другой метод отнимает чуть больше времени – зайдите в «Панель
управления» и найдите «Шрифты» в разделе «Оформление и персонализация».
В системной папке разрешается проводить манипуляции со шрифтами. Например, удалять или скрывать для отображения в приложениях. Если захотите ознакомиться с какими- либо наборами, щёлкните по кнопке «Просмотр» или 2 раза по интересующим файлам. Через секунду запустится специальная программа.
Кстати, установка возможна через стандартный просмотрщик. Откройте в нём любой шрифт и нажмите «Установить». Когда инсталляция завершится, перезапустите приложения, где собираетесь применять набор. Для надёжности лучше полностью перезагрузить компьютер.
Для MacOS
Как и Windows, MacOS тоже поддерживает форматы шрифтов EOT и TTF. Перед началом инсталляции советуем закрыть активные приложения. Тогда впоследствии не придётся выполнять перезапуск программ. Добавление наборов в систему выполняется элементарно – кликаете 2 раза по требуемому файлу и в открывшемся окне нажимаете «Установить». Если всё проходит успешно, запускается штатная программа «Шрифты».
Проинсталлировать шрифты для всех системных пользователей имеет право только администратор. Делается это так. Открываете приложение «Шрифты». В меню Apple наводите мышь на «Шрифты» и щёлкаете по «Настройки». Находите надпись «Расположение счетов по умолчанию». В выпадающем рядом списке активируете «Компьютер». Вводите администраторский логин и пароль, чтобы подтвердить действие.
Для Linux
Photoshop, Figma, Sketch, Adobe InDesign и другие графические редакторы.
Установка шрифта в программы аналогична установке шрифта в операционной системе. Чтобы использовать шрифт в любой из программ, вам необходимо установить его в вашу операционную систему. После установки не забудьте перезапустить программу, в которой вы собираетесь использовать шрифт.
Установить на свой WEB сайт
Если вы скачали весь шрифт, то в ZIP архиве вы обнаружите файл stylesheet.css. В этом файле будут прописаны все стили для подключения
данного шрифта.
Например вы скачали шрифт “Roboto”.
Для начала переместите все содержимое архива в отдельную папку («fonts/roboto»).
Через HTML: <link href = «fonts/roboto/stylesheet.css»
rel = «stylesheet» type = «text/css» />
Через CSS: @import
url(«fonts/roboto/stylesheet.css»)
Будьте внимательны, прописывая правильный путь к файлу stylesheet.css!
Пример использования шрифта в вашем файле стилей: body {font:15px ‘Roboto’, Arial, Helvetica, sans-serif;}
При скачивании одного начертания — например “Roboto Bold”, все вышеперечисленные действия аналогичны.
Как установить шрифт на сайт, в Windows и Фотошоп (Photoshop)
ВсеШрифты.рф- Шрифты 3D шрифты LCD шрифты Wanted шрифты Western шрифты Бесплатные шрифты Брендовые шрифты Винтажные шрифты Восточные шрифты Готические шрифты Граффити шрифты Декоративные шрифты Детские шрифты Дизайнерские шрифты Другие шрифты Жирные шрифты Заглавные шрифты Иероглифические шрифты Кириллические шрифты Комические шрифты Контурные шрифты Латинские шрифты Машинописные шрифты Наклонные шрифты Italic Необычные шрифты Новогодние шрифты Округлые шрифты Подчеркнутые шрифты Поцарапанные шрифты Прописные шрифты Ретро шрифты Рукописные шрифты Русские шрифты Сказочные шрифты Старославянские шрифты Трафаретные шрифты Ужасы шрифты Художественные шрифты Цифровые шрифты Шрифты без засечек Шрифты буквица Шрифты для тату Шрифты из фильмов Шрифты с засечками
- Семейство
- Инструменты font-face Generator
- Статьи
- Контакты
Как установить шрифты, установка шрифтов в Windows
Устанавливать шрифты довольно просто. Во-первых, перед установкой шрифты нужно распаковать, поскольку большинство шрифтов распространяется в виде архивов. После того, как шрифт распакован, его можно установить несколькими способами.
Способ № 1. Откройте шрифт обычным двойным кликом левой кнопкой мышки. После этого перед вами откроется окно в котором можно посмотреть, как выглядит данный шрифт.
Дальше нужно нажать на кнопку «Установить», которая находится в верхней части окна. После этого шрифт установится автоматически.
Способ № 2. Кликните правой кнопкой по шрифту и выберите пункт «Установить».
В этом случае установка запустится сразу и окно с предварительным просмотром шрифта открываться не будет.
Способ № 3. Откройте Панель управления. В открывшемся окне перейдите в раздел «Оформление и персонализация – Шрифты». Также окно со шрифтами можно открыть с помощью команды %windir%\fonts, которую нужно ввести в меню «Выполнить».
После этого перед вами откроется окно со списком установленных шрифтов. Для того чтобы установить шрифт, просто перетащите его файл в это окно.
После перетаскивания файла запустится процесс установки шрифта в систему.
Как удалить установленный шрифт
В некоторых случаях может возникать необходимость в удалении установленных ранее шрифтов. Это делается в Панели управления из раздела «Шрифты». Здесь можно удалять и скрывать установленные шрифты. Для этого нужно выделить нужный шрифт и нажать на кнопку «Удалить».
Кроме этого шрифт можно скрыть. Для этого нужно выделить нужный шрифт и нажать на кнопку «Скрыть».
Скрытые шрифты не будут удаляться из системы, но при этом их не будет видно в списке шрифтов в других приложениях. Также удаление и скрытие шрифтов можно выполнять с помощью контекстного меню, которое вызывается правой кнопкой мышки.
Нужно отметить, что к удалению установленных шрифтов нужно подходить с осторожностью. Многие шрифты необходимы операционной системе для нормальной работы. К таким шрифтам относятся: Courier New (включая варианты: Bold, Italic, Bold Italic), Times New Roman (включая варианты: Bold, Italic, Bold Italic), Arial (включая варианты: Bold, Italic, Bold Italic), Symbol, MS Serif, Wingdings и MS Sans Serif.
Посмотрите также
Как подключить шрифт к сайту при помощи @font-face в CSS. Блог на facefont
@font-face – это CSS-правило, которое позволяет отображать шрифты на веб-страницах в интернете. До того, как появилось это правило, вебмастера могли использовать на своих сайтах ограниченный набор шрифтов, которые наиболее распространены и установлены на компьютерах пользователей. С появлением @font-face, к сайту с легкостью можно подключить любой специфический шрифт.
Если вы скачали шрифт на нашем сайте, в архиве со шрифтами вы найдете готовый CSS-код, который останется скопировать и поместить в CSS-документ подключенный к проекту.
Пошаговая установка
1. Выберите нужный шрифт и нажмите «скачать для сайта».
2. В корне своего сайта создайте папку fonts, и скопируйте в нее скачанные шрифты.
3. Откройте свой CSS-документ и скопируйте в него содержимое текстового файла из архива.
4. Убедитесь, что путь к папке со шрифтами прописан правильно. В зависимости от положения папки, в которой находятся шрифты, путь может содержать одну или несколько точек.
5. Готово. Скопируйте свойство с названием семейства и вставьте в селектор, для которого вы прописываете стили.
Что если я уже скачал шрифт в другом месте, и хочу его подключить?
В таком случае вам нужно найти в интернете конвертор шрифтов и преобразовать ваш ttf шрифт (или otf) в нужные форматы, а именно в eot, svg, woff и woff2. Это необходимо для того чтобы шрифт отображался и корректно работал во всех браузерах, а также на мобильных устройствах.
Затем вам нужно самостоятельно прописать правило @font-face, соблюдая его синтаксис.
Синтаксис @font-face
Синтаксис правила можно условно разделить на основные свойства и расширенные.
Основные:
- font-family – указывает название шрифта.
- src – указывает путь шрифта. Это может быть URL шрифта, расположенного на сервере вашего сайта, URL шрифты расположенного на чужом сервере (например, Google Fonts), или просто название шрифта расположенного на компьютере пользователя (Helvetica New Bold, Tahoma, Georgia и т.д.).
Расширенные:
- font-display – определяет как будет отображаться шрифт, в зависимости от того, был ли он загружен и готов ли к использованию.
- font-stretch – позволяет регулировать ширину текста.
- font-style – определяет начертание шрифта – обычное, курсивное или наклонное (последние два это не одно и то же).
- font-weight – устанавливает насыщенность шрифта, по шкале от 100 до 900 (100-сверхсветлое, 900-сверхжирное).
- font-variant — определяет как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера(капитель).
- font-feature-settings – позволяет управлять расширенными типографскими функциями в шрифтах OpenType.
- font-variations-settings – позволяет осуществлять низкоуровневый контроль над вариациями Open Type и TrueType шрифтов, указывая четырехбуквенные названия осей.
- unicode-range – указывает диапазон Unicode кодов(глифов), которые будут использоваться в шрифте.
Подключение шрифта к сайту с помощью Google Fonts
Использование Google Fonts – это наиболее легкий способ подключения шрифта к сайту. Переходите на их сайт, находите нужный шрифт, выбираете нужные начертания для установки и копируете код.
Скопированный код нужно разместить в теле тега head, на вашей странице html.
Минус данного способа в том, что если во время верстки сайта у вас пропал интернет – шрифты перестанут отображаться и заменятся на стандартные т.к. файлы находятся не на локальном компьютере, а на серверах Google. Также, есть шансы, что когда вы приедете на презентацию верстки к клиенту (или просто на согласование), и у него не будет Wi-Fi, то проблема повторится.
Как установить шрифт TTF
Windows поддерживает большое количество шрифтов, позволяющих изменять вид текста не только внутри самой ОС, но и в отдельных приложениях. Довольно часто программы работают с библиотекой шрифтов, встроенных в Виндовс, поэтому удобнее и логичнее установить шрифт в системную папку. В дальнейшем это позволит воспользоваться им и в другом ПО. В этой статье мы рассмотрим основные методы решения поставленной задачи.
Установка TTF-шрифта в Windows
Часто шрифт инсталлируется ради какой-либо программы, поддерживающей изменение этого параметра. В этом случае есть два варианта: приложение будет использовать системную папку Windows либо установку нужно производить через настройки конкретного софта. На нашем сайте уже есть несколько инструкций по инсталляции шрифтов в популярное программное обеспечение. Ознакомиться с ними можно по ссылкам ниже, кликнув на название интересующей программы.
Подробнее: Устанавливаем шрифт в Microsoft Word, CorelDRAW, Adobe Photoshop, AutoCAD
Этап 1: Поиск и скачивание TTF-шрифта
Файл, который впоследствии будет интегрирован в операционную систему, как правило, скачивается из интернета. Вам понадобится отыскать подходящий шрифт и скачать его.
Обязательно обращайте внимание на надежность сайта. Поскольку инсталляция происходит в системную папку Виндовс, заразить операционную систему вирусом можно очень легко, выполнив загрузку из ненадежного источника. После скачивания обязательно проверьте архив установленным антивирусом или через популярные онлайн-сервисы, не распаковывая его и не открывая файлы.
Подробнее: Онлайн-проверка системы, файлов и ссылок на вирусы
Этап 2: Установка TTF-шрифта
Сам процесс инсталляции занимает несколько секунд и может быть выполнен двумя способами. Если был скачан один или несколько файлов, проще всего воспользоваться контекстным меню:
- Откройте папку со шрифтом и найдите в ней файл расширения .ttf.
- Нажмите по нему правой кнопкой мыши и выберите пункт «Установить».
- Дождитесь окончания процесса. Обычно это занимает пару секунд.
Зайдите в программу или системные настройки Windows (в зависимости от того, где вы хотите пользоваться этим шрифтом) и найдите установленный файл.
Обычно для того чтобы список шрифтов обновился, следует перезапустить приложение. В противном случае вы просто не найдете нужное начертание.
В случае когда надо установить много файлов, легче поместить их в системную папку, а не добавлять каждый по отдельности через контекстное меню.
- Перейдите по пути
C:\Windows\Fonts. - В новом окне откройте ту папку, где хранятся TTF-шрифты, которые требуется интегрировать в систему.
- Выделите их и перетащите в папку «Fonts».
- Начнется последовательная автоматическая инсталляция, дождитесь ее окончания.
Как и в предыдущем способе, для обнаружения шрифтов открытое приложение нужно будет перезапустить.
Точно таким же образом можно устанавливать шрифты и других расширений, например, OTF. Удалять варианты, которые вам не понравились, очень просто. Для этого зайдите в C:\Windows\Fonts, отыщите название шрифта, кликните по нему правой кнопкой мыши и выберите «Удалить».
Подтвердите свои действия нажатием на «Да».
Теперь вы знаете, как устанавливать и применять TTF-шрифты в Windows и отдельных программах.
Мы рады, что смогли помочь Вам в решении проблемы.Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.Помогла ли вам эта статья?
ДА НЕТЗагрузка и установка пользовательских шрифтов для Office
Большинство приложений (таких как Microsoft Word, Excel и PowerPoint) включают шрифты, которые автоматически устанавливаются при установке программного обеспечения. Например, приложения, предназначенные для разработки документов, такие как Microsoft Publisher, часто поставляются с большим количеством дополнительных шрифтов, которые можно использовать в любой другой программе на компьютере.
Однако иногда может потребоваться установить пользовательские шрифты, которые вы создали, купили или скачали. В этой статье мы поговорим о том, как установить эти шрифты для использования в Microsoft Office.
Примечание: Сведения о внедрении шрифтов в документы Microsoft Office Word и презентации PowerPoint см. в разделе Внедрение шрифтов на сайте PPTools.
Поиск шрифтов в Интернете
Кроме шрифтов, установленных с другими приложениями, вы можете использовать шрифты, скачанные из Интернета. Некоторые из них продаются, некоторые распространяются как условно бесплатные программы, а некоторые доступны бесплатно. На этом сайте Майкрософт можно найти ссылки на страницы компаний и дизайнеров, разрабатывающих и распространяющих шрифты.
Найдя шрифт, который вы хотите использовать в приложении Office, можно скачать и установить его с помощью операционной системы компьютера. Так как шрифты работают на уровне операционной системы, они не скачиваются непосредственно в Office. Необходимо установить шрифт в папку Шрифты на панели управления Windows, после чего он будет поддерживаться в Office автоматически. На компьютере Mac необходимо добавить шрифт через средство Шрифты, а затем скопировать его в папку Windows Office Compatible.
Многие сторонние компании упаковывают шрифты в ZIP-файлы для уменьшения их размера и ускорения скачивания. Если вы скачали шрифт, сохраненный как ZIP-файл, можно открыть его, дважды щелкнув его значок.
Установка скачанного шрифта
Скачанный шрифт необходимо установить в операционной системе. После этого Microsoft Office сможет распознавать и использовать его. Для получения подробных инструкций выберите свою операционную систему в раскрывающемся списке ниже.
-
Найдите скачанный файл шрифта, помня, что он может быть в ZIP-файле. Вероятно, он находится в папке «Загрузки».
-
Дважды щелкните файл шрифта, чтобы открыть его в средстве просмотра шрифтов.
-
Убедившись в том, что это нужный вам шрифт, щелкните Установить в верхней левой части окна.
-
Закройте средство просмотра шрифтов и откройте программу Office. Новый шрифт будет указан в списке шрифтов.
-
Найдите скачанный файл шрифта (скорее всего, он имеет расширение TTF или OTF и находится в папке «Загрузки»). Дважды щелкните его.
Примечание: Если файл имеет расширение ZIP, необходимо открыть его и извлечь файл шрифта.
-
Шрифт откроется в средстве просмотра шрифтов. Нажмите кнопку Установить шрифт. Откроется окно Шрифты.
-
Закройте шрифтовую книгу. Теперь шрифт должен быть доступен для Microsoft Office.
Примечание: Если вы используете Office 2011 для Mac, вам может потребоваться перетащить этот шрифт в набор, совместимый с Windows Office , в книге шрифтов , чтобы сделать его доступным для Microsoft Office.
Совместное использование файлов, содержащих нестандартное шрифты
При установке пользовательских шрифтов они будут работать только на том компьютере, на котором установлены. Шрифты, установленные на компьютере, могут отображаться по-другому на другом компьютере. Текст, отформатированный шрифтом, который не установлен на компьютере, будут отображаться с использованием шрифта Times New Roman или стандартного шрифта.
Поэтому если вы планируете предоставить файлы Microsoft Office Word, Excel или PowerPoint другим пользователям, то вам следует знать, какие шрифты есть в версии Office, которую использует получатель. Если шрифтов нет в этой версии, возможно, потребуется внедрить их или предоставить шрифты вместе с файлом Word, презентацией PowerPoint или электронной таблицей Excel. Дополнительные сведения см. в статье Шрифты, которые входят в состав различных версий Office.
Дополнительные сведения
У вас есть предложения по улучшению Microsoft Office?
См. статью Как оставить отзыв по Microsoft Office?