Интернет лифт -это полезный БЛОГИнтернет лифт - Форум
Загрузка...

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


ВАЖНО!!! ОТКРЫТИЕ ФОРУМА ИНТЕРНЕТ ЛИФТ


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

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

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

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

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

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

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

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

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

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

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

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

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

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

шрифты-internetlift.ru

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

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

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

как-узнать-шрифт-на-сайте

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

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

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

Эта задача очень легкая, особенно на 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;
}
.CSS1

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

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

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

.CSS2

Тем самым мы и шрифт отредактируем и придадим жирность. Что касается поменять  шрифт в 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 и т.д. См. на скрин

.CSS3

Как подключить на сайт шрифт 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>

гугл-шрифт2

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

body {
    font-family: ‘Open Sans’, sans-serif;
}гугл-шрифт3

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

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

Интернет — как социальный лифт из тьмы к солнцу

Загрузка...

Об авторе

Многие, наверное, не понимают, почему я назвал свой блог Социальный лифт из тьмы к солнцу, тогда я рассказу и объясню. Для меня интернет это лифт, в который я погружаюсь на нужным мне этаж умений, навыков, заработков; а социальный, потому что он для людей, для общества, для желающих, для тех, кто очень схож с моим видением. Тьма — это жопа, или другими словами днище обычной жизни, в которой был я, в которой многие сейчас, да, наверное, половина людей в нашей стране в этой жопе, которые думаю, что это чайка, а нет… Солнце — это то, что дает жизнь абсолютно всему живому на планете, в том числе и нам с вами. Если б солнца не было, не было бы жизни. Солнце — это энергия к жизни. А если все резюмировать, InternetLIFT — это возможность обычным пользователям интернета, которые работают на дядю, находятся в финансовой жопе, мечтаю разбогатеть, но не знают с чего им начать. Internet Lift - это платформа, которая поможет желающим, стать немного или значительно подкованными в тонкостях и схемах заработка. Смогут узнать, с чего начать, куда идти, и как стать самому себе начальником. Я надеюсь, мои советы и статьи помогут вам и мне в том числе. Так как однажды вы поймете, почему я веду блог, если вы что-то знаете, это ценно только тогда, когда вы это помните. А когда вы запишите и поделитесь, это будет вечно, в том числе в вашей памяти!!! Прочтите мою Автобиографию, возможно у нас много общего
Vadim Ochinskiy

Оставили Комментарии (2)     Поделитесь и ВЫ Вашим Мнением О Статье!

  1. Да все правильно написано и ничего сложного нет. Но.. Вот захотел я как-то Linux попользовать, открываю сайт, а там с шрифтами беда. Так что при проверке смотрите, чтобы в системе шрифты стояли, а то будете, как и я, искать ошибки там, где их нет (то есть не в CSS).

    Пы.Сы.
    Не нашел подписки по RSS, ибо VK не очень лублу…
    Nfrb yt yfitk djkit,ye

    • Vadim Ochinskiy:

      Спасибо за коммент, ДА хочу добавить, что на сегодняшний день гугл, создал очень большую коллекцию шрифтов, в том числе и с кириллицей, так что лучше всего использовать именно гугловские шрифты с ними меньше проблем в отображении во всех браузерах. А по поводу подписки, я все по прежнему использую rss ленту от гугла. Подписаться можете по ссылке https://feedburner.google.com/fb/a/mailverify?uri=internetlift


Яндекс.Метрика