Блог Сергея Князева

Ucoz
Красивые шрифты от Google Fonts

Красивые шрифты от Google Fonts

10.04.20166230
Выбор красивого варианта текста для сайта довольно-таки сложный процесс. Его сложность заключается в том, что трудно выбрать подходящий стиль именно под ваш дизайн. Хотя некоторые проекты в интернете, даже не задумываются об этом. Но читать текст на этих проектах, бывает очень не приятно.

Введение

Красивые шрифты от Google Fonts

Каждый знает про поисковик Google, но не всем известно, что он предоставляет кучу полезных функций для web-дизайнеров и администраторов. Сегодня мы рассматриваем функцию от Google Fonts, которая подразумевает установку нужного вам шрифта без загрузки, каких либо файлов на сайт. Что ускоряет вашу работу и загрузку контента в целом.

Установка

Для начала работы необходимо установить следующий код между тегами head.

Код
<link href='http://fonts.googleapis.com/css?subset=cyrillic&family=Seymour+One|Ubuntu+Mono|Playfair+Display|PT+Sans|Poiret+One|Andika|PT+Sans+Narrow|Philosopher|Neucha|Bad+Script|Istok+Web|Yeseva+One|Kelly+Slab|Ubuntu|Ruslan+Display|Marck+Script|Oranienbaum|PT+Serif|Lobster|Russo+One|Underdog|Ubuntu+Condensed|Roboto+Condensed|Roboto|Open+Sans|Playfair+Display+SC|Scada|Didact+Gothic|Play|Press+Start+2P|Open+Sans+Condensed:300|Comfortaa|Marmelad|PT+Sans+Caption|Forum|Jura|Stalinist+One' rel='stylesheet' type='text/css'>
Данный link содержит варианты всех возможных вариаций от Google Fonts. Если вы хотите пользоваться несколькими вариантами, просто сократите код, например:
Код
<link href='http://fonts.googleapis.com/css?subset=cyrillic&family=Seymour+ Comfortaa|Marmelad' rel='stylesheet' type='text/css'>
Как вы могли догадаться, каждое наименование между "| название |" это шрифт который мы подгружаем стили на страницу.

Следующим шагом, для упрощения дальнейших действий понадобится прописать следующий текст себе в файл со стилями css. Для этого сделаем маленький CSS код.

Код
.BadSc{font-family: 'Bad Script';}
Так будет выглядеть текст, с классом "BadSc"

Вид всех вариантов отображения текста вы сможете посмотреть на ДЕМО странице.

Для читателей моего блога, которые не хотят прописывать выше изложенное и выполнять все действия, я подготовил следующий вариант кода:

Код
<link type="text/css" rel="StyleSheet" href="http://center-wd.ru/blog-materials/shrifti-id71/fonts.jpg" />
linkподгрузят все необходимые стили на страницу. Если вы захотите скачать его, воспользуйтесь ссылкой выше.

Заключение

Красивые шрифты от Google FontsСегодня мы рассмотрели простой вариант, как быстро заменить старый шрифт на вашем сайте на новый от Google Fonts. У меня это заняло 5 минут. Если у вас остались, какие-либо вопросы, пишите их в комментариях.

Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.