Влад Мержевич

Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.

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

h1 { font-family: SuperPuperFont; }

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам

. Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову - это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

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

Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.

• Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
• Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы

Формат	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Самый поддерживаемый формат - TTF. За исключением IE до версии 9.0 и iOS все браузеры его прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Вначале загружаем сам файл шрифта с помощью правила @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(fonts/pompadur.ttf), url(fonts/pompadur.ttf);
src: local(pompadur), url(fonts/pompadur.ttf);
src: local("bla bla"), url(fonts/pompadur.ttf);

Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.

Пример 2. Подключение EOT

HTML5 CSS3 IE Cr Op Sa Fx

Современный элемент политического процесса

По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.

Что касается iOS, то делать и загружать отдельный шрифт в формате SVG как мне кажется нет особого смысла. Аудитория сайтов просматривающая его через iOS пока невелика, к тому же версию сайта под мобильные устройства стараются облегчить, и загружать дополнительные несколько десятков килобайт не желательно.

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts . Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

Рис. 3. Загружаемые на страницу шрифты

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

1. Через элемент . Строка будет иметь примерно следующий вид.

2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

• Шрифты свободны для использования, вам не нужно за них платить.
• Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
• Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.

Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.

Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.

В различных операционных системах присутствуют определенные библиотеки шрифтов, которых хватает для повседневного использования: написания статей, подготовки учебной (дипломов, рефератов) и рабочей (отчетов, бланков, заявлений) документации. Но дизайнерам и издателям сложнее, для создания уникального узнаваемого бренда или журнала заказчики хотят более интересные нестандартные шрифты, которых нет в стандартных библиотеках операционных систем. В таких случаях человеку приходится подбирать интересующий вид шрифта на специальных сервисах, по типу . На данном ресурсе Вы можете подобрать различные виды шрифтов в форматах TTF, EOT, WOFF для своего компьютера. А если скачать архив со шрифтом целиком, то он будет полностью подготовлен для использования в вашем Web проекте , имея внутри все форматы шрифтов во всех доступных начертаниях, а так же файл стилей CSS . На сервисе присутствуют различные категории шрифтов: от рукописных стилей различных стран (древнегреческие, древнеримские) и до современных стилей для техно и веб-дизайна.

Самый популярный формат для установки шрифтов – TTF . С помощью данной статьи Вы разберетесь, как легко устанавливать шрифты на различные платформы: Windows , Linux , MacOS .

Как установить шрифт в Windows

Windowsначала поддержку Тру тайпформатов (TTF) с выходом Windows 3.1 и продолжают до нашего времени. Установка шрифтов в различных версиях Виндовс практически ничем не различается. Человек, который обладал навыком установки шрифтов для XP сможет также просто это повторить и в WindowsVista, 7, 8, 10.

Шрифты в ОС Виндовс хранятся в системной папки с путем C:\WINDOWS\Fonts . Для пропуска процесса установки шрифта можно просто скопировать загруженный с диска, флешки или интернета TTF файл в данную папку.

После данного действия Вы с легкостью можете использовать шрифт без непосредственной установки.

Производить установку шрифта можно непосредственно через файл. Для этого необходимо кликнуть левой кнопкой мыши на новый TTF файл со шрифтами и нажать на кнопку «установить».

После чего произойдет следующая операция:

Как установить шрифт в Linux

С установкой шрифтов на Линукс все немного сложнее чем с операционной системой от компании Майкрософт. Система Линукс использует две папки: для шрифтов доступных всем пользователям ПК используется папка /usr/share/fonts , а папка.fonts доступна только для выбранной пользовательской учетной записи

Для добавления новых шрифтов в ОС Linux необходимо выполнить следующие действия:

Действие 1. Необходимо создать в корне домашней родительской директории (меню > Домашняя папка) папку с абсолютно любым названием, которое начинается с латинской буквы.

Действие 2. Необходимо произвести копирование в данную папку всех файлов шрифтов, которые Вы бы хотели установить на ОС Linux.

Действие 3. Необходимо запустить терминал и в нем перейти в образованный каталог при помощи команды cd ~/preps . После данного действия, чтобы увидеть все содержимое, необходимо прописать команду ls . Операционная система Linux предоставит Вам полный список помещенных файлов со шрифтами.

Действие 4. Необходимо выполнить ввод команды sudomv «название шрифта.ttf» /usr/share/fonts/truetype . В данном примере возможно перемещение файлов во вложенный каталог truetype.Для завершения процесса установки шрифта необходимо после нажатия на Enter прописать пароль администратора.

Поздравляю, Вы установили шрифт в систему и теперь можете его использовать во всех Linux программах.

Как установить шрифт в MacOS

В операционной системе от компании Apple установка шрифтов упрощена до минимума. К тому же последняя версия OSX поддерживает виндовс шрифты без доработок.

Первый способ установки шрифта в MacOS:

Для самого простого способа установки шрифта достаточно произвести двойной клик по файлу и в открывшемся окне нажать на кнопку Install font (установить шрифт). После данного действия шрифт будет доступен в любом приложении.

Второй способ установки более расширенный. Для начала необходимо открыть программу Fontbook – своеобразный менеджер шрифтов для MacOS.

После открытия программы необходимо указать точное место для установки нового шрифта. Папку User следует поменять на Computer чтобы шрифт был доступен для всех учетных записей данного ПК. В меню preview (пред просмотр) следует выбрать пункт Customчтобы появилась возможность ввода любого текста в поле просмотра. Также в данном поле можно изменять размер текста.

Как установить шрифт в Photoshop.

Установка шрифта фотошоп полностью совпадает с установкой шрифта в операционную систему. Программа фотошоп используется на системах: Windows и MacOS, поэтому ключ к установке шрифта лежит через установку файла со шрифтом в систему. Единственное рекомендованное действие после установки шрифта в систему – сравнение имени файла с названием шрифта. Так как фотошоп будет отображать именно название шрифта, а не имя установленного файла.

Если у вас на компьютере есть шрифт который вы хотите использовать, то все что вам нужно это установить шрифт в Windows. После этого он будет доступен в любой программе, будь то Photoshop, Sony Vegas или любая другая программа использующая шрифты.

Для установки шрифта нужно нажать «Пуск/Панель управления». Если вы вошли в панель управления впервые, то окно будет выглядеть так (рис. 1):

Рисунок 1. Панель управления Windows XP.

Теперь в окне «Панель управления» (классический вид), находим иконку «Шрифты» (рис. 2) и переходим по ней. Откроется окно в котором находятся все шрифты установленные в Windows.

Рисунок 2. Шрифты в панели управления Панель управления Windows XP.

Однако более простой способ, это просто скопировать нужные шрифты в папку «Шрифты» с помощью проводника (рис 3).

Рисунок 3. Установка нового шрифта в Windows XP.

Установка шрифтов в Windows 7.

Установка шрифтов в Windows 7 почти не чем не отличается от установки в Windows XP, разве что внешним видом. Как и в первом случаи нам нужно нажать «Пуск/Панель управления». В открывшемся окне, нужно нажать «Категория» (рис. 4) и выбрать «Крупные значки».

Рисунок 4. Панель управления Windows 7.

После чего найти иконку «Шрифты» (рис. 5) открыть ее, и с помощью простого копирования шрифтов в данную папку - установить новые шрифты в Windows 7.

Рисунок 5. Установка нового шрифта в Windows 7.

Как скачать русские шрифты

И так что бы установить новые шрифты на ваш компьютер нужно сначала их где-то взять. В интернете есть множество шрифтов, однако что бы найти те которые поддерживают русский язык запрос должен выглядеть так: «русские шрифты» (можно добавить слово скачать), или «кириллические шрифты».

Во время поиска шрифтов, вы можете найти сайты, в которых перед скачиванием шрифта можно увидеть как он выглядит. Я считаю этот вариант самым удобным и советую вам искать именно такие сайты (рис. 6).

Рисунок 6. Просмотр шрифта перед скачиванием

Но есть и другой вариант, это скачать шрифты целыми коллекциями, например «2000 русских шрифтов в одном архиве». Кажется, что этот вариант гораздо удобнее так как не нужно искать шрифты по одному. Однако, как показывает практика, скачав такой пакет шрифтов, большинство пользователей «не заморачиваются», и устанавливают все эти шрифты в систему.

Таким образом, во-первых, они создают дополнительную нагрузку на систему, что может значительно повлиять на производительность в целом.

Во-вторых, искать нужный шрифт, среди такого количества, становится гораздо труднее.

Ну и в-третьих, я лично сомневаюсь, что кто-то, будет использовать все эти шрифты в своей работе.

Поэтому, если вы скачаете такое количество шрифтов, то лучше устанавливать только те из них, которые вам точно понадобятся.

Что бы посмотреть как выглядит шрифт перед его установкой, его нужно открыть с помощью «блокнота», что занимает не мало времени. Именно поэтому я еще раз вам советую скачивать шрифты по одному, тщательно выбирая только нужные.

Ну и главное, не забывайте, что шрифт, в первую очередь, должен быть «читаемым», а потом уже красивым.

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

Кстати, если Вас интересует, как установить новый шрифт в Windows XP или Vista, то этот урок тоже подойдёт, принципиальных различий здесь нет, просто читайте внимательно.

Сперва вспомним, куда устанавливать шрифты . Открываем Панель управления с помощью меню Пуск.

Теперь открываем папку Шрифты.

Появится вот такое окно, в котором показаны все шрифты, которые есть на компьютере.

Если у Вас они отображаются иначе, то для удобства можете сменить вид на список, для этого нажмите на треугольник, как показано на рисунке выше. В появившемся окошке нажмите Список.

В принципе, можете попробовать и другие пункты и посмотреть, какой вид Вам больше нравится.

Шрифты эти используются во всех программах, в которых можно печатать, например, в текстовых редакторах, как , или в программах для редактирования графики, как Photoshop. Но бывает так, что, например, Вы хотите напечатать надпись на картинке или заголовок статьи красивым шрифтом, а имеющиеся в программе варианты Вас не устраивают. Вернемся к нашим баранам. И так, как установить шрифт на компьютер?

Сперва его надо скачать из интернета. Лично я советую Вам скачивать шрифты с сайта www.photoshop-master.ru

Это сайт про Photoshop, но шрифты отображаются одинаково во всех программах, так что можно скачивать отсюда. Тем более, сайт надёжный и удобный.
Пролистываем сайт и слева находим надпись Шрифты. Нажимаем, открывается перечень различных типов шрифтов. Выберем, например, Декоративные русские шрифты.

Итак, открывается такая страница.

Как видите, здесь вверху тоже есть категории шрифтов, а ниже вот находятся шрифты той категории, что мы выбрали. Выберем, например, шрифт Chokogirl.
Откроется страница со шрифтом, здесь вот на картинке показано, как выглядит сам шрифт, ну а чуть ниже жмём «Скачать шрифт».

Сохраняем для удобства на Рабочий стол.

Весят шрифты мало, так что скачиваются быстро. Находим архив со шрифтом на рабочем столе. Теперь рассмотрим, как извлечь его из архива и как добавить шрифт в Windows 7 , чтобы его можно было использовать.

Как добавить шрифт в Word и не только?

Щёлкаем по архиву правой кнопкой мышки, наживаем Открыть с помощью, затем выбираем WinRAR. Если вы не знаете, как распаковывать архивы, то прочтите две мои статьи по этой теме:

Вот в архиве картинка с изображением шрифта и сам шрифт. Теперь, не закрывая архив, откройте папку Шрифты на Панели управления. Зажмите файл со шрифтом левой кнопкой мышки и, не отпуская, перетяните в папку Шрифты и отпустите кнопку мыши.

Теперь он должен появиться в папке Шрифты.

Если вдруг пока не появился, щёлкните правой кнопкой мышки по пустому месту в папке и нажмите Обновить.

Теперь, для проверки, откроем . Выделяем текст и открываем список шрифтов.

Прокручиваем список и находим наш шрифт. Выбираем его.

Как видите, изменился даже английский текст, но так бывает не всегда.

Проделываем то же самое в Photoshop — всё работает.

Вот мы и узнали, как установить шрифт в word и в другие программы. Не бойтесь экспериментировать и находить новые шрифты. Удивляйте своих знакомых интересным оформлением текста. Ведь важно не только содержание, но и форма. Достаточно один раз понять, как добавить шрифт, и перед Вами откроются новые возможности по оформлению текста.

Если у вас остались вопросы, то посмотрите видео-урок, в котором я все подробно объясняю.

Я показывала урок как установить скаченные шрифты в windows. Почему то очень многие решили, что такие шрифты можно использовать только в фотошопе, что конечно не так. Их можно использовать и для заголовков, и для текста и для оформления.

Эти надписи написаны скачанным шрифтом, НО я их перевела в рисунок, что бы они были видны всем. Точно таким же шрифтом я пишу обыкновенный текст. НО ВНИМАНИЕ! Они будут видны только тем, КТО УСТАНОВИЛ ТАКИЕ ШРИФТЫ В СВОЮ СИСТЕМУ. У кого эти шрифты не установлены, они будут видеть обыкновенный текст.

Добро пожаловать в мой блог

Добро пожаловать в мой блог

И по многочисленным просьбам делаю более подробный, пошаговый урок с примерами, как СКАЧАТЬ и УСТАНОВИТЬ такие шрифты в свой компьютер. Идем ИДЕМ НА ЭТОТ САЙТ , где много оригинальных русских шрифтов, которые легко качаются и устанавливаются.
Выбираю шрифт, который я хочу скачать. Беру самый первый.

Скачался шрифт автоматически в папку ЗАГРУЗКИ.

Кто не знает где находится эта папка, то в вскочившем окне загрузки, встаем мышкой на ПОСЛЕДНИЙ СКАЧЕННЫЙ ФАЙЛ, и жмем ПРАВУЮ КНОПКУ, и выбираем ОТКРЫТЬ ПАПКУ С ФАЙЛАМИ. Она вам сразу откроется. (можно перетаскивать шрифт в нужную папку и прямо из загрузки.)

У меня на компе создана специальная папка со шрифтами, из которой я их обычно и ставлю в систему. Это очень удобно, не надо каждый раз прописывать путь. (Вы можете ставить прямо из папки загрузок.)
Поэтому из папки ЗАГРУЗКИ, я перетаскиваю ЭТОТ СКАЧЕННЫЙ ШРИФТ в свою папку ШРИФТЫ.Просто открываю обе папки рядом, беру мышкой скаченный файл и не отпуская кнопки мыши (левой) тащу его в папку ШРИФТЫ.

Шрифт теперь у меня в папке, но запакован в архив, поэтому я распаковываю его. Для этого, встаю на запакованный файл мышкой, жму ПРАВУЮ кнопку мыши и выбираю ИЗВЛЕЧЬ В ТЕКУЩУЮ ПАПКУ

Файл распаковался. И мы получили шрифт и картинку, как выглядит этот шрифт. Теперь архив и картинку можно удалить что б не мешались (то что в синей рамочке)

Вы можете сразу скачать несколько понравившихся вам шрифтов, для примера, я скачиваю еще два, следующих, так же перекидываю их в свою папку, распаковываю. Вот так выглядит папка перед установкой. Лишнее я удалили, установленные шрифты в отдельной папке, а три скаченных новых еще стоят. Вы можете не удалять лишнее, при установке шрифтов вам это не помешает.

Все, теперь шрифт можно устанавливать, как это описано в ПРЕДЫДУЩЕМ ПОСТЕ

Нажимаем «Пуск» - «Настройки»- «Панель управления».

Теперь ВНИМАНИЕ. Поскольку нам нужна папка ШРИФТЫ, то нам надо переключится на КЛАССИЧЕСКИЙ ВИД.

ВНИМАНИЕ! У кого стоит старая система, и нет переключения на классический вид, то делаем так. Жмем ВИД, в нем выбираем ПАНЕЛИ ОБОЗРЕВАТЕЛЯ и в них ищем ПАПКИ.

Слева открывается дополнительная панелька. Находим папку со шрифтами

Ну и в нее устанавливаем наши шрифты из папки.Жмем - «Файл» - «Установить шрифты».

В открывшейся вкладке выбираем путь к папке с вашими скаченными шрифтами. У меня это на диске «С» - папка «ШРИФТЫ» - 1. Два раза кликаем по папке, где лежат ваши шрифты, и видим как они появляются в верхнем окошке. У нас в папке три шрифта, и они отразились все. Дальше просто нажимаем на кнопку «Выделить все», и жмем «Ок»

Все, установка закончена и шрифты в вашей системе. Как их использовать в своих записях, оформлении и прочему, расскажу в следующем уроке. Удачи в вашем творчестве.