Настройка
Для примера - я выбрал шрифт "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. Перед нами страница со множеством настроек. Признаюсь честно, я не вдавалась абсолютно во все настройки, но в ходе экспериментов пробовала разные, и всегда получала желаемый результат.
Но в любом случае я подготовила несколько скриншотов с основными настройками, чтобы обратить ваше внимание на важные пункты.
Как видите для каждого вида шрифта отдельное загрузочное окошко:
- обычный шрифт
- жирный шрифт
- обычный курсив
- жирный курсив
До конца не поняла, почему так, но загружала именно туда, где описание максимально характеризовало мой шрифт.
Например на скриншоте отображена загрузка рукописного шрифта. Он наклонный и достаточно упитанный:).
Далее выделено поле с лицензионным соглашением. Вы должны обязательно поставить галочку и тем самым подтвердить, что загружаемый вами шрифт разрешено использовать в вебе разработчиком этого самого шрифта. Тут вопрос деликатный, к сожалению, среди большого многообразия различных шрифтов в интернете мы сами точно не знаем, какой шрифт мы можем использовать, а какой нет. Поэтому данный пункт полностью лежит на вашей совести.
Следующий скриншот.
Одну строчку я выделила синим – тут галочку ставят те, кто генерирует шрифт для WordPress.
И последние настройки.
В итоге мы получаем ещё один файл, который также загружаем на хостинг.
Шаг 3Осталась самая малость, указать в файлах шаблона сайта до закрывающего тега такой код:
Cufon.replace("h1");
Как видно из кода, мы применяем шрифт к тегу заголовка h1. Таким образом можно указать любой другой тег, чтобы в нем отображался наш кириллический шрифт.
Cufon.replace("h1");
Cufon.replace("h2");
Cufon.replace("p");
Также можно указывать не тег, а идентификатор:
Cufon.replace("#mycufon");
Но это ещё не все. Если вы хотите на одном сайте использовать сразу несколько разных шрифтов, то для всех новых шрифтов проходим Шаг два и указываем их все:
Cufon.replace("h1";, { fontFamily: "название_шрифта_1"; });
Cufon.replace("h2";, { fontFamily: "название_шрифта_2"; });
Если вы не уверены в правильности написания своего шрифта, то откройте соответствующий сгенерированный файл из шага 2 и найдите нужную информацию.
То, что выделено голубым и является названием шрифта.
Так, на одном из моих тестовых блогов изначально было так.
А стало так:
Для пользователей WordPress все ещё намного проще. Конечно, можно пройти весь описанный путь и шрифт также будет работать, но есть и готовый плагин, который называется All-in-One Cufon. Скачать плагин можно как с сайта разработчика , так и непосредственно в админке блога.
Устанавливаем плагин. Активируем. Переходим в настройки плагина. В самом верху два предупреждающих сообщения.
Первое о том, что вы должны создать папку cufon-fonts в директории wp-content/plugins/. Для этого подключаемся по FTP или идем в панель управления хостингом и создаем в папке plugins новую папку с именем cufon-fonts. После этого первое сообщение исчезает.
Второе сообщение говорит, что вы должны поместить в созданную папку файл сгенерированного шрифта, тот самый файл, который мы получаем на Шаге 2. Загружаем файл и сообщение исчезает, при этом ниже в настройках появляется шрифт, который теперь "видит" плагин.
Не забываем поставить галочку напротив шрифта, который вы собираетесь использовать в шаблоне. Но шрифт пока не работает. Ниже есть поле Cufon Code, в нем мы должны указать, к какому тегу должен быть применен наш кириллический шрифт. При этом нужно указать голый код, без каких либо других обозначений.
Cufon.replace("h1");
К слову, стоит сказать, что если вы установили тему WordPress с уже нестандартным шрифтом, при этом у него нет кириллического написания, то вам нужно:
Вносить Cufon Code в поле ниже не нужно, как правило, в шаблоне уже прописан данный код. Если же вы захотите установить ещё один шрифт, дополнительно к уже имеющемуся, то такую запись нужно будет сделать, так, как я писала в примерах выше.
Очень важное замечание.
Если вы оптимизировали заголовки в шаблоне по моим статьям – и , то вы должны быть предельно внимательны. Если вы помните, то на всех страницах, кроме главной, заголовок блога находится в теге (в ссылке). Вам нужно присвоить именно этому тегу id или class, например:
Ваш текст
Вместо “Ваш текст”
пишет необходимый текст. Если вы хотите изменить шрифт: Названия блога; Названия статьи; Текста всей статьи; Текста в боковых панелях. То вам необходимо добавить Css код и для них. Не переживайте это совсем не сложно. 1.Чтобы изменить шрифт названия статьи найдите в теле шаблона следующий тэг: Или
Как поменять шрифт на своем сайте? Как подключить общедоступные шрифты из библиотеки Google Fonts, а что делать, если шрифт эксклюзивный? Если вопросы для вас актуальны, читаем дальше По аналогии с другими типами файлов шрифты имеют различные форматы. Всего их насчитывается несколько десятков, а наиболее популярными из использующихся в сети считаются TTF, EOT, WOFF и SVG. При этом каждый поддерживается лишь определенными версиями программного обеспечения. Помимо принадлежности к конкретным системам они отличаются технологией отрисовки символов и методом сжатия. От последнего зависит объем получаемого файла, что напрямую влияет на время его загрузки, а значит – и на скорость отображения страницы. Это критично только при установке нового шрифта, так как после скачивания содержащий его файл будет храниться в кэше. На данный момент при внедрении конкретного шрифта на сайт необходимо подготовить все эти форматы шрифта: TTF (или OTF), WOFF,EOT и SVG . Для того чтобы облегчить работу со шрифтами, компанией Google был создан сервис «Fonts», в котором представлено несколько сотен шрифтов, включая десятки кириллических. После выбора нужных шрифтов, а их может быть несколько, сервис формирует свернутое окно с режимами «стандарт» и «импорт», каждый из которых имеет два вида кода: Там же находится кнопка загрузки, позволяющая скачать файлы шрифтов к себе на компьютер. Основные преимущества сервиса заключаются в том, что в момент обращения, определяется браузер пользователя и система сама подгружает пользователю нужный файл со шрифтом. Иными словами, не нужно беспокоиться ни о версии программного обеспечения, ни о формате шрифта. Чтобы воспользоваться шрифтом, который отсутствует в Google Fonts, необходимо применить правило «@font-face», содержащее название шрифта и путь к его файлу. font-weight: normal;
— этим значением мы задаем насышенность шрифта: обычная, полужирная, жирная и т.д. font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900 Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное - 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст - значению 700. font-style: normal;
— здесь мы задаем начертение текста: нормальное, курсив или наклонное font-style: normal | italic | oblique Разные пути и форматы свидетельствуют о поддержке различных устройств и версий браузеров, то есть, получается, данный код подойдет для большинства из них. Т.е последовательность формирования правила «@font-face» такая: Если у шрифта разные начертания распиханы по отдельным файлам: для начертания regular
один файл, для жирного начертания (bold
) второй, для курсива (italic
) — третий, значит и подключать эти начертания будем каждый. Итого, для каждого начертания необходимо 3 раза прописать правила: меняя путь, расположения файла на сервере, значения font-weight и font-style. В CSS-правилах кроме нашего шрифта так же принято через запятую указывается другие шрифты, так сказать — основной и дополнительный. Это делается для тех случаев, если на определенном устройстве или в отдельно взятом браузере основной шрифт не распознаётся (не может быть установлен), тогда браузер отображает информацию с помощью дополнительных шрифтов. По поводу дополнительных: рекомендуется применять самые распространенные шрифты, которые есть практически на всех компьютерах: Arial, Courier New, Georgia, Times New Roman и Verdana.
Вместо “Название шрифта
” пишет название того шрифта который выбрали
Изменит “Название вашего шрифта” на название шрифта который вы выбирали во 2ом шаге.
В целом код после модификации должен выглядеть примерно так:
.post h3 {
font-family: "Your Font Name";
}
Для остальных шрифтов ищите такие тэги:
-Заглавие блога: h1
-Название статьи: post h3 либо.post-title
-Шрифт статьи: .post-body
-Боковая панель: .sidebar h2
Если вы хотите изменить шрифт в данных 4 позициях, ищите, их тэги в шаблоне, и затем как и при изменении заголовка статьи вставляйте тэг:
font-family: "Название вашего шрифта";
после него.
Стоить заметить, что в некоторых шаблонах тэги заголовков могут отличаться, так что придется искать подобные тэги
