Как подключить шрифт к сайту? [CSS+ HTML инструкция для wordpress]

Приветствую вас, дорогие читатели! Сегодня статья, совершенно в мои планы не входила. Почему?, спросите Вы. Да все потому что я и не думал, что у меня случится проблема со шрифтами на сайте internetlift.ru и ответа на эту проблему я в интернете не найду. КАК ТАК? Вы знаете я даже топик на форуме завел searchengines.guru , но и там ответа я не получил. И тогда я понял, что есть проблема, которую нужно раскрыть подробно, дабы помочь большому количеству людей.

Кстати, я уже писал инструкцию,  как подбирать слова для ваших видео и статей, и Вы можете воспользоваться сервисом для рунета и узнать насколько актуальна проблема и раскрыть ее детально с видео обзором. Я не перестану твердить всем, что тема видео уроков очень актуальна, т.к. с каждым днем я, да и вы наверное, сталкиваетесь с какими-то сложностями и решение их ищите в сети, но когда вы не находите, вы задумываетесь, что я один такой….. А вот нет, просто на него не дали хороший ответ, так что, кто понял дерзайте. Делюсь с вами идеями. Самое главное – если пришла идея запишите ее на бумаге, дабы не забыть. (Сужу по себе). Лично я все заметки и задачи веду в сервисе bitrix24.ru Очень удобно, особенно для коллективной работы. Ну да ладно вернемся к теме статьи.

Структура статьи: Как подключить шрифт к сайту?

Где искать шрифты при верстке сайта

Как узнать стиль шрифта на сайте CSS / HTML

Как сделать жирный текст CSS / HTML

Как менять размер шрифта в CSS / HTML

Как увеличить/уменьшить шрифт в CSS / HTML

Как форматирование текст /ссылки на сайте в CSS

Как подключить на сайт шрифт google / гугл

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

Где искать шрифты при верстке сайта

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

Итак, где искать шрифты для сайта? В интернете! Банально звучит, но все же это именно так. Хочу вам дать подсказку. В браузере Mozilla Firefox есть очень хороший инструмент, который показывает какой шрифт используется на сайте (см. скрин ниже) Вообщем используйте данную функцию для поиска нужного вам шрифта.

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

Как узнать стиль шрифта на сайте CSS / HTML

В этом вопросе нам поможет приложение для хрома, оперы и яндекс браузера  от сервиса webfont.ru/extension (см. скрин ниже)  А что касается Мазилы я писал немного выше, он уже встроенный.

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

При создании своего блога, подключать шрифты при верстке и использовал внешний источник, на который ссылался мой сайт. Конечно я имел в своей CSS таблице исходники шрифтов, разных форматов .ttf .otf .woff .svg данного шрифта, которые ранее загружались на компьютер к пользователям, посещавший мой сайт. И работало все четко. Но конце ноября 2015 года, корректное отображение во всех браузерах пропала. Первая у меня мысль, что я нарушил авторство, ведь я не интересовался в самом начале чей этот шрифт и можно ли его использовать в своих целях. (А это очень важное условие) Но после того как я порылся в сети про авторство идея пропала сама собой – можно использовать. Начал искать дальше. И понял, что сейчас видимо левые сайты, которые не одобряются гуглом и рядом др. браузеров, попали под некий фильтр. И сегодня корректно отображается на любом сайте, в том числе и на WordPress, используя google шрифты. Как только я их подключил, все заработало как часы ))) *** Учтите мой опыт и совет***

Как сделать жирный текст CSS / HTML

Эта задача очень легкая, особенно на wordpress. Для начала нужно знать к чему мы конкретно будем делать жирный шрифт. Например к h1 h2 h3 или к <p> или к таблице <tr><td>. Определились? После этого, Вам нужно залезть в таблицу стилей .CSS (см. скрин) И чтобы шрифт отобразился жирным, ответственен селектор font-weight.  Нажимаем сочетание клавиш поиска CTRL+F и вводим запрос “font-weight” (Без кавычек)  Выше мы определились к чему мы будем менять, допустим h1 h2 (см. пример ниже) Значения могут быть normal (нормальное), bold (жирное), а также можно указывать диапазон значений от 100 до 900. Базовым значением является 400. Поэтому варианты ниже равнозначны.

h1, h2 {
font-weight:bold;
}

h1, h2 {
font-weight:400;
}

Т.е. Заменив старые данные на новые и сохранив, при этом вы получите изменения в шрифте на вашем сайте. Что касается Html – то добавьте в ваш текст в HTML редакторе тег <b></b> и будет вам жирный шрифт )))

Как менять размер шрифта в CSS / HTML

Размер на сайте менять таким же способом как я описал выше, но тут другой селектор font-size и возле него могут стоять данные, как в пикселях (px), процентах (%), так и (em) – это размер в процентах, так обычно делают при создании адаптивного шаблона и шрифтов, которые автоматически на различных устройствах отображаются правильно и красиво. Вообщем смотрите на скрин

Тем самым мы и шрифт отредактируем и придадим жирность. Что касается поменять  шрифт в HTML, то так обычно не делают, а если уж надо, то просто добавьте в HTML редакторе код <font size=”25″><b>У тебя все получится! </b></font> Тем самым мы и шрифт отредактируем и придадим жирность.

Как увеличить/уменьшить шрифт в CSS / HTML

На этот вопрос я уже ответил выше, приводя пример, как менять шрифт на сайте. Но если у Вас не WordPress, а другой сайт одностраничник или с другой CMS системой, то вам тоже нужно найти файл, обычно style.css и в нем через поиск найти font-size и внести изменения.

body {
background: #EAE8E5 url(images/bg.png) repeat;
font-size: 14px; – вот тут уменьшить или увеличить, если хотите в теле сайта изменить размер
line-height: 1.5em;
color: #646464;
font-family: , “Georgia”, serif;
margin: 30px 0;

Как форматирование текст /ссылки на сайте в CSS

Как я говорил выше, можно в таблице стилей произвести любые корректировки размеров для h1-h6, а также для различных тегов, так вот я всегда выделяю жирным шрифтом текст на англ/ссылки/аббревиатуры и т.д. за это отвечает тег  <strong> . Заходим в нашу таблицу и там в поиске находим его и видим какой шрифт (font-size), какой цвет, кстати за цвет отвечает селектор color и т.д. См. на скрин

Как подключить на сайт шрифт google / гугл

Вот тут самое интересное, нужно ни где не ошибиться и следовать 3 шагам.

Шаг 1 Заходим на сайт Гугл Шрифтов и выбираем подходящий нам шрифт далее нажимаем, на стрелку вправо (см. на скрин)

Шаг 2 Затем вы увидите, вам будет предложен, простой стиль, курсив, жирный и т.д., а также наборы символов. Ниже вам будет предложен фрагмент кода, который вы будете добавлять в <HEAD> вашего сайта. Для этого примера я выбрал Amaranth

<head>

<link href=’https://fonts.googleapis.com/css?family=Amaranth:400,400italic,700,700italic’ rel=’stylesheet’ type=’text/css’>

</head>

Шаг 3 Google API будет генерировать необходимый код CSS для добавления в таблицу стилей. Просто добавьте сгенерированный код в файл CSS.

}

НА этом по подключению все! А вы ожидали больше ))) Важно перед тем как выбрать шрифт проверьте – отображает ли он кириллицу. (В данном примере я не проверял)

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