Нестандартные шрифты в Blogger для оформления блога. Подключение Google Fonts

вторник, 23 ноября 2010 г.

проект Google Web Fonts

определение тиц pr
аренда квартир в москве
eвропейский педикюр

Нестандартные шрифты в Blogger для оформления блога

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

Интернет всегда традиционно был весьма органичен в плане использования разных шрифтов, особенно когда дело доходило до нелатинских алфавитов по типу Кириллицы (Cyrillic) или Greek.Но тут, как всегда, на арену выходит компания Google и предлагает свою помощь в решении вопроса - некоторое время назад был создан проект Google Web Fonts вместе с Google Font API, которые позволяют использовать разные шрифты на разных устройствах и платформах. Это что-то вроде отрытого архива нестандартных шрифтов, которые можно использовать в веб-раработке, собственно где-то 400 тысяч сайтов по всему миру, генерирующие 17 миллионов запросов в день так и поступают. Благодаря этому проекту в черновиках блоггера (draft.blogger.com) теперь можно найти аж 40 разных шрифтов для оформления своего блога. И это только начало:)

Чтобы выбрать новые шрифты зайдите в раздел Дизайн, выберите Дизайнер Шаблонов. В его меню последний пункт "Дополнительно" (Advanced) содержит набор элементов странице, для которых можно подобрать шрифты. Это может быть заголовок блога, описание, заголовок поста или элемента шаблона. Для выбора доступно действительно много шрифтов для блоггеров из разных стран - Reenie Beanie, r Neucha (Cyrillic), GFS Didot (Greek) или даже Hanuman (Khmer). Кстати, из всего набора 6 веб шрифтов поддерживают кириллицу, так что есть где развернуться:)

P.S. Постовой. Кстати, популярный форум для вебмастеров теперь может осуществлять определение тиц pr ваших сайтов - смотрим сервисы от Webmasters.
Для тех, кто собрался посетить столицу на пару дней или перебраться сюда жить понадобиться аренда квартир в москве по доступным и невысоким ценам, множество предложений.
Салон красоты TemNova осуществляет педикюр всех видов - классический, eвропейский педикюр и комбинированный - все для вашей красоты.

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

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

Меры предосторожности для тех, кто не уверен

• Для начала определимся? что речь идет о темах (шаблонах) WordPress. Если тема блога установлена на этот движок, то это статья для Вас.
• Если Вы не уверены в своих силах, лучше сначала поэкспериментировать на тестовом поддомене. Убедившись в своей дееспособности, можно перенести навык на основной сайт. Впрочем, действия, которые требуются для того, чтобы изменить шрифт заголовка сайта , настолько просты, что напортачить там сложно. Лично я все всегда сначала делаю на тестовом. Чуть больше времени, но надежнее.
• В случае, если сайт все-таки сломался, читайте, >>. Но, если все делать аккуратно, никаких катастроф не произойдет.

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

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

Инструкция по смене шрифта в заголовке сайта

А если времени разбираться нет, но хочется быстрее На все про все нам понадобится наш сайт и программа word (для подбора шрифта).

1. Входим в админпанель своего сайта. Далее, в левом сайдбаре находим Консоль — Внешний вид — Редактор .
2. В правой части находим Список стилей (style.css) и открываем его.
3. Заголовок сайта — это header h1 . Находится ближе к началу. Чтобы не искать глазами, можно нажать Ctrl+F — появится строка поиска. Наберите в поиске. У меня эта часть выглядит так:

Верхний квадрат: строка изменения шрифта.

Нижний квадрат: строка изменения размера шрифта.

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

Как изменить шрифт заголовка сайта

1. Теперь открываем чистый документ Word, копируем на главной странице сайта название и переносим его в вордовский документ, выделяем и начинаем играться с разными шрифтами. Находятся они на верхней панели в левом углу. Почему удобно делать именно в этой программе — потому что сразу видны все изменения шрифта в Вашем названии. Выбирайте шрифт, который будет сочетаться с названием Вашего сайта. Шрифт, который Вам безусловно понравится. Когда выберите, скопируйте в Worde название шрифта.
2. Возвращаемся в админпанель сайта. В строку изменения шрифта (на рис. — верхний синий квадрат) вносим название выбранного шрифта вместо того, что стоит по умолчанию.
3. Внизу страницы нажимаем «Обновить файл».
4. Переходим на сайт и смотрим, хорошо ли встал шрифт в общем контексте. Если нет, возвращаемся в Word и выбираем другой. Все.

Как изменить размер шрифта заголовка сайта

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

Как изменить цвет шрифта заголовка сайта

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

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

Итак, чтобы изменить шрифт, цвет и размер , нужно внести изменения всего в 3 строчки редактора. При небольшом навыке занимает очень мало времени.

Красивый, хорошо читаемый заголовок,

сочетающийся с общим духом темы,

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

Экспериментируйте, выбирайте то, что Вам по душе!

P.S. Когда я вношу даже незначительные изменения в файлы редактора темы, то на всякий случай копирую измененный текст целиком в блокнот — в папку, где хранится zip установленной на моем сайте темы. В том случае, если сайт вдруг сломается и придет необходимость переустанавливать тему, у меня сохранены все измененные на мой вкус файлы. Останется только при переустановке wordpress или темы перенести файлы в соответствующие папки на хостинге.

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

Шрифты от Google API - это отличная возможность дать вашему блогу новый и безупречный стиль. На данный момент в наборе есть 501 шрифт, из которых 35 - поддерживают кириллицу. Главное при выборе шрифта - это читаемость и совместимость с остальным блогом.
Настройка
Для примера - я выбрал шрифт "Marck Script".

1. Зайдите в каталог и выберите себе шрифт. Весь каталог шрифтов вы можете найти здесь: google.com/webfonts

Choose the character sets you want:

Latin (latin)
Latin Extended (latin-ext)
Cyrillic (cyrillic)

Выберите "Latin" и "Cyrillic". Остальные варианты советую не выбирать, так как в этом случае страница будет долго грузиться, а иногда шрифт просто не будет работать.

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

3.1 Добавьте "/" в конце кода перед ">", а также если в вашем коде есть этот символ - "&" вместо него поставьте "&".

Установка

1. Зайдите на свой аккаунт в blogger.com.
Далее зайдите в Дизайн ---> Изменить HTML

2. С помощью поиска (Ctrl+F) вам надо будет найти эту строку в вашем шаблоне:

3. После неё добавьте код шрифта и сохраните шаблон.
Использование

Вы можете использовать установленный шрифт в любом месте в вашем блоге. К примеру если вы желаете чтобы "название сайта" имело этот шрифт, тогда вам надо:

1. Зайти в Дизайн ---> Изменить HTML

2. С помощью поиска (Ctrl+F) найти эту строку в вашем шаблоне:
header h1

#header h1 {
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.1em;
}

2.2 Если в вашем коде "header h1" нет строки font-family тогда добавьте её:
font-family:Marck Script, Georgia, serif;

2.2.1 Вместо "Marck Script" - поставьте название вашего шрифта. Название можно узнать на странице шрифта, в четвёртом пункте.
2.3 Вот и всё. Также можете попробовать добавить шрифт и в другие место в вашем блоге, к примеру в "sidebar", "post-body" или "post h2".

Доброго времени суток, уважаемые читатели. Сегодня я хочу рассказать об одном из способов установки нестандартного кириллического шрифта на свой сайт. Данный способ подходит для любого сайта, в том числе и для блогов на Blogger. Этот способ с успехом применяется на многих англоязычных сайтах, активно используется в премиум темах WordPress и Joomla.

Т.к. большинство моих читателей ведут свои блоги на Blogger и WordPress, я расскажу, как установить нестандартный шрифт именно в такие блоги. При этом способ, описанный для Blogger подходит абсолютно для любого сайта. А для WordPress есть уже готовый плагин. Но не советую прокручивать статью до соответствующих описаний, т.к. для настройки плагина вам пригодятся все знания об этом способе.

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

Я уже достаточно вас заинтриговала? Пора переходить к деталям.

Итак, способ этот носит название Cufon. Придумал его один разработчик - Simo Kinnunen. Во-первых, он создал специальный файл, который нужно подключить к сайту. Во-вторых, он создал генератор, который любой шрифт превращает в JavaScript.

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

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

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

Или через правую кнопку мыши выбрать команду Установить. После этой процедуры шрифт отобразится во всех установленных на компьютере программах, где это вообще предусмотрено. Т.е. никаких дополнительный действий больше делать не нужно. Описанный способ гарантированно действует в Windows 7.

Установка абсолютно любого кириллического шрифта на сайт в три шага

Итак, мы стали обладателем красивого нестандартного кириллического шрифта и хотим установить его на свой сайт. Какие наши действия?

Шаг 1

Идем на сайт Cufon - cufon.shoqolate.com .
Кликаем по ссылке в меню – Download. Открывается страница со скриптом. Просто копируем весь код, вставляем его в блокнот и сохраняем с расширением.js. Для своих читателей я подготовила готовый файлик , можете скачать его к себе на компьютер.

Будьте внимательны, на дату написания поста 26 июля 2011 года версия скрипта 1.09i. Именно эта версия сейчас по ссылке выше.

Загружаем скрипт на хостинг. Кто ведет свой блог на Blogger уже должен знать, куда загрузить сторонний файл (), я для этого пользуюсь сайтами Google.

Шаг 2

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

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

Как видите для каждого вида шрифта отдельное загрузочное окошко:

• обычный шрифт
• жирный шрифт
• обычный курсив
• жирный курсив

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

Например на скриншоте отображена загрузка рукописного шрифта. Он наклонный и достаточно упитанный:).

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

Следующий скриншот.

1. В первом поле мы указываем, что нам нужно отображение прописных и строчных букв, а также цифры и знаки пунктуации.
2. Во втором поле галочка стоит по умолчанию, я не пробовала ее удалять.
3. В третьем поле обязательно выбираем Кириллический и Русский алфавит.

Одну строчку я выделила синим – тут галочку ставят те, кто генерирует шрифт для WordPress.
И последние настройки.

1. В первом окошке я не стала ничего писать, но думаю, поле полезное с той точки зрения, что указав домены, на которых будет использоваться шрифт, на других доменах он просто не будет работать.
2. Я так поняла, в верхнем поле речь идет о том, какой размер шрифта будет идти по умолчанию. Можно согласиться с настройкой, а можно отказаться, поставив галочку. Лично я попробовала по разному и меня устроили оба варианта. Думаю, это ещё зависит как от самого шрифта, так и от задумки дизайнера шаблона. Следующий пункт в окне 2 сам генератор рекомендует отключить, при условии, если вы собираетесь использовать небольшой размер шрифта. Последнюю галочку по возможности лучше поставить, т.к. благодаря этой настройке сгенерированный файл получается меньшего размера, что несомненно отразится на загрузке шрифта в лучшую сторону.
3. Ну и последнее – соглашение с условиями использования генератора.

В итоге мы получаем ещё один файл, который также загружаем на хостинг.

Шаг 3

Осталась самая малость, указать в файлах шаблона сайта до закрывающего тега такой код:

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

Также можно указывать не тег, а идентификатор:

Но это ещё не все. Если вы хотите на одном сайте использовать сразу несколько разных шрифтов, то для всех новых шрифтов проходим Шаг два и указываем их все:

Если вы не уверены в правильности написания своего шрифта, то откройте соответствующий сгенерированный файл из шага 2 и найдите нужную информацию.

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

А стало так:

Как установить нестандартный кириллический шрифт в WordPress

Для пользователей WordPress все ещё намного проще. Конечно, можно пройти весь описанный путь и шрифт также будет работать, но есть и готовый плагин, который называется All-in-One Cufon. Скачать плагин можно как с сайта разработчика , так и непосредственно в админке блога.

Устанавливаем плагин. Активируем. Переходим в настройки плагина. В самом верху два предупреждающих сообщения.

Первое о том, что вы должны создать папку cufon-fonts в директории wp-content/plugins/. Для этого подключаемся по FTP или идем в панель управления хостингом и создаем в папке plugins новую папку с именем cufon-fonts. После этого первое сообщение исчезает.

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

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

Cufon.replace("h1");

К слову, стоит сказать, что если вы установили тему WordPress с уже нестандартным шрифтом, при этом у него нет кириллического написания, то вам нужно:

1. Установить плагин All-in-One Cufon.
2. Установить сгенерированный шрифт.

Вносить Cufon Code в поле ниже не нужно, как правило, в шаблоне уже прописан данный код. Если же вы захотите установить ещё один шрифт, дополнительно к уже имеющемуся, то такую запись нужно будет сделать, так, как я писала в примерах выше.

Очень важное замечание.
Если вы оптимизировали заголовки в шаблоне по моим статьям – и , то вы должны быть предельно внимательны. Если вы помните, то на всех страницах, кроме главной, заголовок блога находится в теге (в ссылке). Вам нужно присвоить именно этому тегу id или class, например:

И тогда ваш код Cufon должен быть таким:

Cufon.replace("h1");
Cufon.replace(". mycufon1");

Соответственно, для заголовков статей вы должны проделать тоже самое.

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

Единственное, на чем я не стала останавливаться, это на описании CSS стилей. С одной стороны, те стили, которые у меня уже были на шрифтах по умолчанию, после замены их на Cufon-шрифты, сохранились. Т.е. цвет, размер у меня не поменялся. С другой стороны, большинство стилей повторяют уже стандартные CSS стили, т.е. можно вполне обойтись тем, что уже имеется. Если же вы хотите поэкспериментировать, то все CSS настройки вы можете посмотреть в документации на этой странице .
На этом все. Желаю, чтобы у вас были самые красивые блоги в рунете.

Ирина Кудрявцева

Justus показали один вариант, хочется увидеть и еще возможные шрифты!

https://www.blogger.com/profile/03714046357448661094

Ирина Кудрявцева, к сожалению это единственный из "нестандартных" шрифтов, которые я встретил (на Блогспот). Если, кто то знает другие шрифты, с удовольствием ознакомлюсь!

Si.A.A.

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

Si.A.A., надо подумать! Дайте время до завтра!

https://www.blogger.com/profile/13746790384341325111

Si.A.A.

Уговорили. Но только один день. ;)

https://www.blogger.com/profile/06106872544132460143

Si.A.A., ваша заявка выполнена! В конце поста разместил мануал по установке. Простое решение не получилось, придется "поковыряться" в шаблоне! Кроме того неизвестно, как это отразится на общем дизайне блога?

https://www.blogger.com/profile/13746790384341325111

MagentaWAVE

"к сожалению это единственный из "нестандартных" шрифтов, которые я встретил (на Блогспот). Если, кто то знает другие шрифты, с удовольствием ознакомлюсь! "
Позволю себе наглость спамнуть ссылку,
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
Совсем недавно об этих делах воял,

https://www.blogger.com/profile/05069681985675276048

MagentaWAVE, спасибо, размещу вашу ссылку в конце поста, для опытных читателей!

https://www.blogger.com/profile/13746790384341325111

Si.A.A.

Спасибо, но страшновато после предупреждения "как это скажется на дизайне блога".

https://www.blogger.com/profile/06106872544132460143

Si.A.A., я имел ввиду, что помимо текста, шрифт попадет еще кое куда! Куда...? Это будет видно только после инсталляции кода! Не думаю, что будет хуже. В любом случае, вы можете вернуть все обратно!

https://www.blogger.com/profile/13746790384341325111

Marina Kouyarova

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

https://www.blogger.com/profile/05106932572444773407

ОЛЕНА САВИЦКАЯ

Простите пожалуйста-самого чайного чайника-а где находится редактор текста? в упор не вижу...и где HTML шаблона-это там-где-когда нажала на -шаблон-рядом-изменить HTML? но если это там-вообще не вижу про то-о чем вы пишите-.да ну что ж это такоето-ничего не получается у меня..и листья падали падали-а теперь уже второй день не падают..куда они делись то?!

https://www.blogger.com/profile/04422214255958505740

ОЛЕНА САВИЦКАЯ, вот например, набрал Гугл и нашел сразу статью для вас с видео:
http://mlmvsem.blogspot.de/2012/01/blogspot.html

https://www.blogger.com/profile/13746790384341325111

Кристина Азарова

Где вы такие теги видели! Если пишите стаью, то пишите,что для стандартных шаблонов, в самописанных там нет такого ничего,и работать не будет.

https://www.blogger.com/profile/05518665193214781905

Кристина Азарова, теги взяты из стандартных шаблонов и они там ЕСТЬ, а вот найти их в новом "Изменить HTML" очень нелегко!

https://www.blogger.com/profile/13746790384341325111

Владимир Телевной

На сайте есть выбор вэб шрифтов, ток как его применять я так и не понял, http://www.google.com/fonts/

Владимир Телевной

Если бы вы как о подсказали. На сайте делается ссылки и скрипты но что и куда вставлять...

https://www.blogger.com/profile/16497829425382739102

Ирина Бусурманова

Хочу каллиграфический почерк, но это для чайника просто УЖАС!

https://www.blogger.com/profile/10826754143079211427