yoksel : ) (yoksel) wrote in journals_covers,
yoksel : )
yoksel
journals_covers

Category:

Гуглошрифты в дизайне ЖЖ

По мотивам вопроса от random1911

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

Есть несколько сервисов, предлагающих веб-шрифты, я расскажу только про Google Web Fonts



Как пользоваться?



1. Заходим на Google Web Fonts. В левой колонке в разделе Script выбираем Cyrillic, чтобы выбрать все шрифты с кириллицей.



2. Выбираем шрифт и нажимаем кнопку Quick use под ним



3. На открывшейся странице во втором разделе подключаем кириллицу



4. В синем поле есть код для встраивания шрифта. Он нам не подходит, но мы можем воспользоваться ссылкой из него:



Жёлтым выделила нужную часть (без кавычек):

<link href='http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

5. Скопируйте эту ссылку и вставьте её в адресную строку вашего браузера. Откроется страница с примерно таким кодом:

@font-face {
font-family: 'Kelly Slab';
font-style: normal;
font-weight: 400;
src: local('Kelly Slab'), local('KellySlab-Regular'), url(http://themes.googleusercontent.com/static/fonts/kellyslab/v3/gKqKZ8BbpAcxgFwZImcomxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}


Именно он нам и нужен : ) Для вашего шрифта будет другой код, этот только для примера.
Скопируйте его и вставьте в ваши стили в настройках журнала на странице Custom CSS в большое текстовое поле.

Если у вас там уже есть какие-то стили, вставьте этот код перед ними.

Сохраните настройки. Теперь вы можете пользоваться установленным шрифтом.

6. Как использовать шрифт в коде?

Как и любой другой, задав его через font-family.

Строчка с шрифтом:

font-family: 'Kelly Slab';

Она должна находиться внутри стилей для какого-либо блока. Вот так, например, этот шрифт задаётся для всего текста в журнале:

BODY {
font-family: 'Kelly Slab', sans-serif;
}


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

Что получается можно увидеть на картинке ниже:



Тут видно, как шрифт применился ко всему журналу : )

В каких браузерах работает?

Во всех современных браузерах, включая 9-й IE.
В старых браузерах текст будет выглядеть как обычно.

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

Upd: если зайти в гуглошрифты под старым IE, сервис выдаст код и для него.

Экспериментируйте : )
Tags: useful: уроки по оформлению ЖЖ, useful: шрифты
Subscribe
promo journals_covers august 1, 2013 11:15 62
Buy for 200 tokens
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 169 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →