Как использовать скачанные шрифты. Платные и бесплатные шрифты
При вёрстке страниц время от времени приходится сталкиваться с нестандартными шрифтами. Безусловно, использовать их как основные на сайте не стоит, но вот в различных отдельных элементах, например, в шапке, вполне можно. Проблема с этими шрифтами в том, что его может просто не оказаться на компьютере пользователя, что приведёт к тому, что у него соответствующий текст отобразится стандартным шрифтом, в результате, задуманный дизайн будет испорчен. Данную проблему решают очень просто: весь нестандартный шрифт вырезают просто в виде картинки . Однако, есть и другой способ использовать нестандартный шрифт на сайте .
Давайте я напишу CSS-код , а потом его поясню:
@font-face {
font-family: SpecialFont;
src: url("font/specialfont.ttf");
}
p {
font-family: SpecialFont;
}
В результате, к тегам
будет применён шрифт SpecialFont . Я думаю, код достаточно прозрачный, но всё-таки поясню. Вам нужно раздобыть шрифт и загрузить к себе на сайте, например, в папку font . Дальше в CSS-коде прописать в @font-face его имя и путь к нему, а дальше уже можно его использовать.
Но недаром в большинстве случаев используют картинки для вывода нестандартных шрифтов. У использования @font-face есть 2 недостатка :
- Есть очень крупные шрифты, которые весят сотни килобайт, а это резко увеличит время загрузки страницы .
- Второй минус ещё серьёзнее. Не все браузеры поддерживают такую возможность , более того, некоторым браузерам нужен шрифт в другом формате (не ttf ). Таким образом, у некоторых Ваш шрифт всё равно не отобразится. Чтобы решить данную проблему, надо загружать один и тот же шрифт в разных форматах, что в разы усилит первый минус.
Но стоит отметить, что первый минус уже не так принципиален как раньше. Так как скорости Интернет-соединения растут очень быстро, и уже мало, кого волнуют дополнительные 100-200 КБ .
Второй минус тоже не так принципиален. Единственные более-менее популярные браузеры, которые не поймут этого кода - это IE8 и ниже , плюс iOS . Все остальные современные браузеры без проблем данный код поймут.
Учитывая, что IE8 ещё относительно популярен, то лично я пока буду выводить нестандартные шрифты по-прежнему в виде картинки , но очень надеюсь, что в ближайшем будущем данный браузер станет историей, и тогда можно будет использовать @font-face и ttf-шрифты .
P.S. Всех женщин поздравляю с праздников весны!
Если вы уже познакомились с основами типографии и знаете, где можно найти подходящие для вас шрифты, то самое время познакомиться с классификацией шрифтов и их типами. В наше время существует достаточно большое количество самых разнообразных шрифтов. Они бывают как платные, так и бесплатные.
Основные группы шрифтов
Сейчас существует очень много различных шрифтов. Все они имеют специфические характеристики, благодаря которым их можно разделить на группы:
Serif (с засечками)
Такие шрифты обычно применяют в печати. Причиной этого является удобство их чтения, которое и делает их очень популярными. Этот тип шрифтов привлекателен небольшими линиями на концах букв. Свое применение он получил в книгах, разных журналах и газетах. В свою очередь, шрифты с засечками помогут вашему сайту приобрести некую элегантность и сделать внешний вид веб-дизайна более утонченным.
Slab serif (прямоугольные засечки)
Использование такого типа шрифтов придаст вашему сайту уникальности и сделает его внешний вид довольно стильным. Прямоугольные засечки тяжело читаются и поэтому их не рекомендуют использовать в тексте, которым вы наполняете тело сайта. Лучшего всего их использовать при оформлении заголовков, что придаст им более интересный вид и визуально отделит их от основной части текста.
Script (пропись)
Лучше всего эти шрифты используются для дополнения декоративных элементов вашего дизайна. Применяя шрифты прописью, будьте особо осторожны, эксплуатируя их в своих заголовках, а также в тексте тела сайта, потому как их чтение является довольно затруднительным процессом для посетителей.
Blackletter (готический шрифт)
Этот шрифт имеет декоративный вид. Если вы хотите разбавить ваш веб-дизайн чем-нибудь старинным, то вам следует воспользоваться именно этим шрифтом. Зачастую эти шрифты используют различные рестораны на своих вывесках.
Sans serif (без засечек)
Буквы не будут иметь засечек. Они довольно схожи со шрифтами, которые имеют засечки и будут замечательно смотреться в тексте любого интернет ресурса или в заголовках. Обычно их применяют на компьютере, потому как читать их намного удобней, когда шрифт имеет мелкие размеры. Эти шрифты могут помочь сделать ваш проект более простым, а его дизайн - более минималистичным. На сегодняшний день San serif - это самый популярный шрифт, который дизайнеры используют для текста статей, размещаемых на своих веб-сайтах.
Handwriting (рукописный шрифт)
С применением шрифта такого типа ваш текст будет выглядеть так, будто его кто-то написал своей рукой. Он может послужить для веб-проекта неплохим декоративным дополнением, что в свою очередь сделает его уникальным и неповторимым. Лучше всего использовать шрифт только для выделения информации, на которую вы хотите обратить внимание читателя.
Decorative (декоративный)
Эти шрифты включают в себя все существующие типы забавного характера и являются довольно оригинальными. Небольшой их минус заключается в том, что их очень трудно прочитать. Если вы хотите, чтобы ваш веб-проект имел необыкновенное оформление текста, то можете смело их использовать.
Подборка и совмещение шрифтов
Разнообразие шрифтов огромно, а значит комбинаций их совмещения еще больше. Поэтому правильная подборка шрифтов занимает очень много времени. Это довольно непростой процесс, при котором вы всегда должны основываться на стиле вашего интернет проекта и на предпочтениях ваших посетителей.
Во-первых, в начале этого процесса вы должны определиться с выбором шрифта, который будете использовать в тексте тела сайта, он же станет основным для всего вашего проекта. Зачастую для тела сайта выбирают шрифт с засечками или же без них. Это даст вам уверенность в том, что ваш сайт будет читабельным, и поэтому поиск шрифтов следует проводить непосредственно именно в этих двух группах.
Обратите свое внимание и на то, чтобы шрифт, выбранный вами, имел разнообразные стили. Это позволит вам быть более гибкими при использовании их в веб-проекте. Хорошим способом понять, подходит ли вам тот или иной шрифт, будет его тестирование на больших блоках, например в заголовках, параграфах и т.д.
Во-вторых, вам обязательно нужно определить еще один шрифт, который вы будете использовать в некоторых заголовках. Определенных правил такого выбора не существует, но опытные дизайнеры рекомендует подбирать такой шрифт, который будет отличаться от основного, используемого вами для тела сайта. Таким образом, вы сможете сделать заголовки на вашем сайте более привлекательными для пользователей. Лучше использовать шрифт для тела сайта слегка измененный, например, сделав его полужирным.
Неплохим вариантом оформления текста является смешивание и соединение группы шрифтов заголовков с засечками с основным текстом сайта, который будет без засечек. Провидите этот эксперимент, и вы увидите, что эти две группы очень гармонично сочетаются друг с другом, создавая красивый дизайн типографии.
В-третьих, если вы хотите обратить внимание ваших пользователей на какие-то определенные элементы текста и сделать их более видимыми, то вам следует внести еще один шрифт в дизайн. В этом случае поэкспериментируйте с рукописным и декоративным шрифтом, так как именно они позволяют привлечь внимание посетителей веб-сайта.
Как смешивать и использовать шрифты в тексте
Рассмотрим несколько принципов совмещения шрифтов, которые позволят добиться красивого оформления текста.
Сайт должен быть читабельным
Подбирая шрифт для текста тела сайта или заголовка, обязательно следует помнить то, что он должен быть легко читаем пользователем. Конечно, читаемость некоторых шрифтов напрямую зависит от правильных их настроек: необходимо следить за тем, чтобы был выбран соответствующий размер шрифта, высота строк, цвета. Перед применением в веб-дизайне каких-либо шрифтов проверьте, как они будут смотреться в разных цветах. Таким образом, вы сможете понять, подходит ли вам тот или иной цвет.
Это правило имеет пару исключений, о которых следует помнить всегда. К примеру, вы разрабатываете веб-дизайн для детского интернет-проекта и, возможно, вам захочется применить один из видов декоративного шрифта, который понравится детям. В этом случае старайтесь придерживаться шрифта с засечками и без засечек. Соблюдать это правило необходимо, потому как проведенные исследования доказали, что эти шрифты намного легче читаются, поэтому выбор декоративных шрифтов будет не самым лучшим вариантом в данном случае.
Не используете большое количество разных шрифтов
Создавая дизайн проекта, старайтесь не использовать большое количество шрифтов. Оптимальным количеством для использования будет три шрифта. Этому есть несколько причин:
При использовании сервисов шрифтов каждый шрифт, добавленный вами, будет способствовать увеличению скорости загрузки страницы сайта.
Присутствие большего количества шрифтов на страницах сайта отвлекает посетителей, из-за чего им будет тяжелей сконцентрировать свое внимание на чтении контента.
Применяя не более трех шрифтов, вы экономите свое время, но при этом веб-сайт выглядит отлично.
Не используйте неподходящие сочетания
Комбинирование нескольких шрифтов при написании заголовков сайта или соединение большого количества различных шрифтов – это очень плохая задумка. Такие комбинации являются рискованными и могут принести вам много проблем.
Просматривая шрифты на веб-сервисе Typekit, вы имеете возможность устанавливать необходимые для вас фильтры, которые помогут разобраться в том, какие шрифты лучше применять для заголовков или параграфов, что будет очень полезным инструментом во время разработки дизайна.
Примеры объединения шрифтов
Для примера рассмотрим страницы нескольких сайтов, где грамотно подобраны шрифты.
Заголовки:
Sentinel (serif slab)
Параграфы:
Gotham Narrow (sans-serif)
На этих примерах мы можем наблюдать, что заголовки и подзаголовки имеют шрифт с прямоугольными засечками. Он выступает в качестве контраста к основному тексту сайта и является простым и легко читаемым шрифтом. Этот дизайн имеет единообразность. От него можно добиться многого, лишь изменив цвет и его стиль.
Заголовки и параграфы:
Freight Text Pro (serif)
Остальное:
Freight Sans Pro (san-serif)
На этом примере мы можем наблюдать, как используют только один шрифт для заголовков и параграфов. Это выглядит довольно здорово, потому как заголовки имеют более жирный и крупный вид.
Так же здесь мы можем наблюдать и один шрифт без засечек, который автор использует на кнопках сайта и информации о сообщениях.
Заголовки:
PMN Caecilia (slab serif).
Параграфы:
Gill Sans (sans-serif)
Дизайнеры этого сайта создали очень утонченный и красивый дизайн своего веб-ресурса. Здесь отсутствуют какие-либо раздражители и жирные шрифты. Они остановили свой выбор на тонком шрифте для заголовков и простом шрифте для текста тела сайта.
Присутствующие на этом ресурсе оба семейства шрифтов имеют отличное сочетание, что позволяет посетителю с легкостью читать весь текст.
Заголовки и параграфы:
Skolar (serif)
Дизайнеры этого сайта используют только один шрифт с засечками. Но, несмотря на такое неординарное решение специалистов, заголовки и параграфы между собой имеют видимую разницу. Все это благодаря тому, что здесь используются специфические стили, цвета и размеры шрифта.
В последних версиях текстового редактора Microsoft Word имеется довольно большой набор встроенных шрифтов. Большинство из них, как и полагается, состоят из букв, но в некоторых вместо букв используются различные символы и знаки, что тоже весьма удобно и необходимо во многих ситуациях.
И все же, сколько бы в MS Word не было встроенных шрифтов, активным пользователям программы стандартного набора всегда будет мало, особенно, если хочется чего-то действительно необычного. Неудивительно, что на просторах интернета можно найти множество шрифтов для этого текстового редактора, созданных сторонними разработчиками. Именно поэтому в данной статье мы расскажем о том, как добавить шрифт в Ворд.
Важное предупреждение: Скачивайте шрифты, как и любое другое ПО, только с проверенных сайтов, так как во многих из них вполне могут содержаться вирусы и прочий вредоносный софт. Не забывайте о собственной безопасности и сохранности личных данных, не качайте шрифты, представленные в установочных файлах EXE, так как на самом деле распространяются они в архивах, внутри которых содержатся файлы форматов OTF или TTF, поддерживаемых ОС Windows.
Вот список безопасных ресурсов, с которых можно скачивать шрифты для MS Word и других совместимых программ:
Отметим, что все вышеперечисленные сайты крайне удобно реализованы и каждый из шрифтов там представлен наглядно и понятно. То есть, вы смотрите на картинку превью, решаете, нравиться ли вам этот шрифт и нужен ли он вам вообще, и только после этого качаете. Итак, приступим.
1. Выберите на одном из предложенных нами сайтов (либо на другом, которому полностью доверяете) подходящий шрифт и скачайте его.
2. Перейдите в папку, в которую вы скачали архив (или просто файл) со шрифтом (шрифтами). В нашем случае это рабочий стол.
3. Откройте архив и извлеките его содержимое в любую удобную папку. Если вы скачали шрифты, не запакованные в архив, просто переместите их туда, откуда вам будет удобно к ним добраться. Не закрывайте эту папку.
Примечание: В архиве со шрифтами помимо файла OTF или TTF могут также содержаться и файлы другого формата, к примеру, изображение и текстовый документ, как в нашем примере. Извлекать эти файлы отнюдь не обязательно.
4. Откройте .
В Windows 8 — 10
сделать это можно с помощью клавиш Win+X
, где в появившемся списке нужно выбрать . Вместо клавиш также можно использовать клик правой кнопкой мышки по значку меню “Пуск”
.
В Windows XP — 7 этот раздел находится в меню “Пуск” — .
5. Если находится в режиме просмотра “Категории” , как на нашем примере, переключитесь на режим отображения мелких значков — так вы сможете быстрее найти необходимый пункт.
6. Найдите там пункт “Шрифты” (скорее всего, он будет одним из последних), и нажмите на него.
7. Откроется папка со шрифтами, установленными в ОС Windows. Поместите в нее файл шрифта (шрифтов), ранее скачанный и извлеченный из архива.
Совет: Вы можете просто перетащить его (их) мышкой из папки в папку или использовать команды Ctrl+C (копировать) или Ctrl+X (вырезать), а затем Ctrl+V (вставить).
8. После короткого процесса инициализации шрифт будет установлен в систему и появится в папке, в которую вы его переместили.
Примечание: Некоторые шрифты могут состоять из нескольких файлов (например, обычный, курсив и полужирный). В таком случае необходимо помещать в папку со шрифтами все эти файлы.
Установка нового шрифта в Word
1. Запустите Ворд и найдите новый шрифт в списке со стандартными, встроенными в программу.
2. Зачастую, отыскать новый шрифт в списке не так просто, как может показаться: во-первых, их там и без того довольно много, во-вторых, его название, хоть и написано собственным шрифтом, но довольно мелкое.
Чтобы быстро отыскать новый шрифт в MS Word и приступить к его использованию в наборе текста, откройте диалоговое окно группы “Шрифт”, нажав на небольшую стрелочку, расположенную в правом нижнем углу этой группы.
3. В списке “Шрифт” найдите название нового, установленного вами шрифта (в нашем случае это Altamonte Personal Use ) и выберите его.
Совет: В окне “Образец” вы можете видеть то, как выглядит шрифт. Это поможет быстрее его найти, если вы не запомнили название шрифта, но запомнили его визуально.
4. После того, как вы нажмете “ОК” в диалоговом окне “Шрифт” , вы переключитесь на новый шрифт и сможете начать его использовать.
Внедрение шрифта в документ
После того, как вы установите новый шрифт на свой компьютер, использовать его вы сможете только у себя. То есть, если вы отправите текстовый документ, написанный новым шрифтом другому человеку, у которого этот шрифт не установлен в системе, а значит, и не интегрирован в Ворд, то у него он отображаться не будет.
Если вы хотите, чтобы новый шрифт был доступен не только на вашем ПК (ну и на принтере, точнее, уже на распечатанном листе бумаги), но и на других компьютерах, другим пользователям, его необходимо внедрить в текстовый документ. О том, как это сделать, читайте ниже.
Примечание: Внедрение шрифта в документ приведет к увеличению объема документа MS Word.
1. В вордовском документе перейдите во вкладку “Параметры” , открыть которую можно через меню “Файл” (Word 2010 — 2016) или кнопку “MS Word” (2003 — 2007).
2. В диалоговом окне “Параметры”, которое перед вами откроется, перейдите к разделу “Сохранение” .
3. Установите галочку напротив пункта “Внедрить шрифты в файл” .
4. Выберите, хотите ли вы внедрить только знаки, которые используются в текущем документе (это уменьшит объем файла), хотите ли вы исключить внедрение системных шрифтов (по сути, оно и не нужно).
Собственно, на этом можно и закончить, ведь теперь вы знаете о том, как установить шрифты в Ворд, предварительно инсталлировав их в ОС Windows. Желаем вам успехов в освоении новых функций и безграничных возможностей программы Microsoft Word.
Здравствуйте, уважаемые читатели!
В предыдущей статье я писал о том, как нестандартным образом, используя строчные CSS-стили, оформить контент на сайте под управлением WordPress. Используя стили можно, в том числе, изменять и шрифт, применяемый в тексте.
Шрифты для сайта – важнейший элемент его дизайна. От их правильного выбора зависит поведение посетителя на странице. Необходимо правильно выбрать тип шрифта, его размер, толщину, наклон, цвет, чтобы все это гармонично сочеталось с общим дизайном.
Но иногда возникает необходимость использовать какой-то необычный шрифт, а их сейчас разработано несметное количество – художественные, рукописные, готические, древнерусские и т. д. Можно ли любой из них использовать на сайте?
Можно, но есть определенные условия.
Стандартные и нестандартные шрифты
Чтобы шрифт, который вы выбрали, правильно отображался на экране пользователя, необходимо, чтобы он был установлен на его компьютер. При установке операционной системы мы получаем и определенный набор шрифтов. Такой набор называют стандартным. У каждой операционной системы свой список стандартных шрифтов. Но есть шрифты, которые присутствуют во всех операционных системах, их называют безопасными. Любой из них вы можете смело использовать на своем сайте, не боясь, что он не так отобразится на компьютере посетителя. Естественно, что эти шрифты самые популярные, их используют для набора контента на большинстве сайтов, они удобны для чтения.
Кроме стандартных шрифтов, пользователь может установить на свой компьютер и другие, нестандартные, но с их отображением могут возникнуть проблемы. Иногда неопытные пользователи, готовя обыкновенный текстовый документ в Wordе или презентацию, используют какой-то красивый художественный шрифт, который они нашли в Интернете и установили на свой компьютер. При подготовке все выглядит прекрасно, но когда эту презентацию начинают просматривать на другом компьютере оказывается, что этот красивый шрифт заменяется на обычный, стандартный.
То же самое происходит и сайтами. Чтобы нестандартный шрифт, используемый вами, правильно отображался на компьютере посетителя сайта необходимо, чтобы он был у него установлен. Но ведь вы не можете потребовать от тысяч посетителей, чтобы они ради просмотра вашего сайта устанавливали себе какой-то шрифт.
Как же решить эту проблему?
Для этого нужно подключить необходимые шрифты к сайту.
Как подключить шрифты для сайта
Сделать это можно двумя основными способами. В первом случае используются шрифты, находящиеся на специализированном удаленном сервере, второй предполагает размещение файлов шрифтов на сервере самого сайта.
В этой статье мы рассмотрим подробнее первый способ.
Работа с сервисом Google Fonts
Начнем с сервиса Google Fonts
, как самого известного и надежного.
Я не зря говорю о надежности, так как если вы на своем сайте используете посторонний ресурс, то он должен быть проверен и надежен. В процессе подготовки этой статьи я заходил на несколько сайтов с коллекциями шрифтов, которые были у меня в закладках. Раньше я их использовал, но оказалось, что один из них отключен за неоплату хостинга, другой, на котором я брал когда-то очень красивые шрифты, заблокирован антивирусом.
На сайте , как видно из скриншота, на данный момент в коллекции содержится 708 шрифтов, но не все они нам подходят. Для русскоязычных сайтов нужны шрифты, поддерживающие кириллицу. Слева располагаются фильтры для выбора, где в выпадающем списке Script
выбираем Cyrillic,
после чего остается уже 61 вариант. Из них мы и выбираем. Понравившиеся шрифты добавляем в коллекцию, нажимая на кнопку .
После выбора переходим к следующему пункту – кнопка Review
. На открывшейся странице можно посмотреть, как будет выглядеть текст, попробовать изменить его параметры.
Далее переходим к последнему пункту – кнопка Use
. Здесь можно скопировать код для подключения шрифта к сайту.
Этот код следует вставить на HTML-страницу вашего сайта между тэгами <head
> и head
>. Для сайтов на WordPress эти тэги находятся в файле заголовка header.php
. В пункте 4 копируется код для описания стиля CSS.
Как видите, я выбрал три варианта, и если теперь в HTML-редакторе WordPress набрать такой код:
то на странице это будет выглядеть так:
Этот текст оформлен нестандартно. Poiret One.
Сделать это можно двумя основными способами. Russo One.
Рассмотрим подробнее первый способ. Marck Script.
Работа с сервисом AllFont.ru
Еще один хороший сервис для выбора шрифта для сайта — . Кажется, здесь выбор еще богаче. По крайней мере, разнообразнее. Выбирать можно, пользуясь рубрикатором или поиском по названию.
На странице выбранного шрифта можно изменить цвет, фон, размер, текст и посмотреть, как он будет выглядеть.
После этого можно скопировать коды для вставки на сайт. Все делается аналогично тому, как делали на сайте Google Fonts. Я для примера выбрал шрифт AGZeppelin-Roman, посмотрите, как он выглядит.
Добро пожаловать в крупнейшую библиотеку AllFont.ru
Надеюсь, что статья оказалась для вас полезной. Если так, подписывайтесь на обновления блога, так как готовятся новые полезные статьи.
До скорых встреч.
Если вы ищите, как установить шрифт, тогда, скорее всего, знаете зачем он нужен. Позвольте предположить — вы делаете открытку на свадьбу, и хотите, чтобы поздравление выглядело экзотично, а не в стандартном шрифте Times New Roman (или, что еще хуже — Comic Sans) . Или может быть, оформляете резюме и нужно выделить заголовок особым шрифтом. Так или иначе, в связи со шрифтами возникает два вопроса:
- Где скачать красивый шрифт;
- Как установить шрифт.
Где скачать красивый шрифт
Привожу несколько сервисов, на которых можно скачать разнообразие шрифтов:
Что удобно, на этих сервисах сразу можно посмотреть, как выглядит шрифт.
Как установить шрифт
На самом деле установка шрифта - дело элементарное. Вообще шрифты хранятся в папке C:/Windows/Fonts (по умолчанию она скрыта). Но, в системе предусмотрен стандартный способ установки шрифтов через интерфейс.
В панели управления есть отдельный раздел «Шрифты» . Перетянув в эту «папку» любой скачанный шрифт (файл в формате ttf) вы увидите его в списке шрифтов, например, в Photoshop. Ниже показал весь этот «процесс» на .
И как можно заметить, наш шрифт успешно появился в списке шрифтов Microsoft Word
