Обложки для журналов
от Yoksel

Дизайны для ЖЖ

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

По мотивам вопроса от 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, сервис выдаст код и для него.

Экспериментируйте : )

Похожие посты

Вступите в сообщество, чтобы увидеть все дизайны
промо journals_covers август 1, 2013 11:15 62
Разместить за 200 жетонов
У меня сегодня прекрасная новость: длинные инструкции по настройкам оформления больше не нужны, потому что теперь настройки на русском! : ) '​*':'*'тут салютики'*':'*' Сначала это было сделано для Хамелеона, теперь настройки переведены для Minimalism и Expressive. Помимо перевода, настройки…
1. про двоеточие: погуглите про тег :after

2. попробуйте внутрь этого контейнера прописать шрифт. Вместо многоточия впишите нужный вам.

#page div.asset-tags a, #page div.lj-currents ul li a {
font-family: '....', sans-serif;
font-size: 12px;
color: rgb(119, 119, 119);
font-style: italic;
font-weight: normal;
}


Edited at 2013-02-03 06:43 (UTC)
Спасибо огромное за подробный рецепт! Сделал заголовок журнала и постов с использованием гуглошрифтов. Все получилось с первого раза!
Супер!
Ёксель, спасибо вам большое! Очень полезная фича) Я когда-то так билась, пыталась узнать, как же это делается, а вы так наглядно и по полочкам все разложили..мм) Все работает, ура=)
странно, скопировала шрифт из комментов, что вы барышне правили, но у меня без изменений.
правда у меня еще стоит отключка рекламы, но не думаю же , что из-за нее.

@font-face {
font-family: 'Bad Script';
font-style: normal;
font-weight: 400;
src: local('Bad Script Regular'), local('BadScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/badscript/v2/xvnrV3H3fZsc-fSw6fOJeBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
H2, H3 {
font-family: 'Bad Script';
font-style: normal;
}
.adv { display: none;}
у вас другой стиль журнала, и вот этот блок кода просто так не заработает

H2, H3 {
font-family: 'Bad Script';
font-style: normal;
}


Код для заголовка в вашем журнале, например, будет таким:

.content .header H2 {
font-family: 'Bad Script';
font-style: normal;
}


классы для остальных блоков можно посмотреть в уроках

Edited at 2013-02-03 18:05 (UTC)
Добрый!
Я к вам опять с проблемой(

Взяла у вас как-то дизайн для моей чайной страничке, сейачс нигде не найду тут.
Так вот, часто мен надо что-то изменить в разных постах. Раньше всё було без малейшей проблемы.
Сейчас за последние недели творится ужас, достаточно только зайти в пост и просто нажать на "сохранить", как из поста получается каша-хтмлка((((((

http://vida-verde.livejournal.com/22219.html

разбираю это потом часами((( и не имею ни малейших знаний, т.е. приходиться сносить всё и делаьт заново!((( это тихий ужас.

моежт быть так, чот ЖЖ изменился в программах и это стиль и дизайн не развился вместе с ЖЖ?
ЧТО ДЕЛАТЬ? Не могу же всю страничку менять. мне это стоило столько труда.
пропробуйте войти в редактирование поста в визуальном редакторе, скопировать текст и вставить его в режиме Html

а вообще судя по всему там просто не закрыт тэг span. Думаю, что достаточно будет найти его и закрыть

Edited at 2013-02-04 12:02 (UTC)
?

Log in

No account? Create an account