Как ЛЕГКО подключить нестандартный шрифт к сайту. Шрифты google

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

Вы знаете, вчера захотел поменять на блоге шрифт, хотел, чтобы текст был популярным сегодня шрифтом Open Sans (я кайфую от этого шрифта, и сейчас как раз текст на блоге именно open sans), но чтобы текст стал шрифтом open sans, пришлось немного погуглить, потому что простое прописывание правила в таблице стилей css:  font-family: ‘Open Sans’ ни к чему не привело, шрифт не хотел становиться open sans, никак не хотел.

Зачем к сайту подключать нестандартные шрифты? Да просто — для красоты, для дизайна, для изящества — в общем, что бы восхищало  взгляд :)

[yandexd]

Итак, после поисков я нашел несколько вариантов подключения на сайт нестандартных шрифтов.

Один вариант показался мне мудренным — нужно скачать шрифт с определенным расширением, затем загрузить нестандартный шрифт  на хостинг, потом в стилях через специальное правило прописать путь к этому шрифту, в общем, я сказал себе «нет» (я ленивый)

Другой вариант заключался в подключении к сайту специальной библиотеки Cufon. Я только успел прочитал первые строчки инструкции о том, что нужно подключить Ява скрипт, какие-то «куфоны», «реплайсы» — в ужасе закрыл вкладку :)  Ну нафиг, подумал я!

А вот теперь встречайте самый простой способ подключения нестандартного шрифта к вашему сайту через сервис Google. С помощью google шрифтов.

Шрифты google

Итак, вот ссылка на google шрифты — http://www.google.com/fonts Вам туда

Слева в меню во вкладке «Script» включите «Cyrillic» (т.е. это русские шрифты). На данный момент у Гугла 53 русских шрифта (и 632 латинских)

гугл шрифты

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

А если вы пришли за конкретным шрифтом, то слева вверху введите в поиск название шрифта. Я ввел «open sans» и нажал на кнопочку Enter. Если шрифт есть в библиотеки шрифтов гугла, то он его найдет.

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

Далее в блоке с нужным вам шрифтом жмете на небольшую иконку справа (стрелочка направленная вправо)

google шрифты

Во втором пункте устанавливаете галочку в чекбокс «Cyrillic»

устанавливаем на саит шрифты из гугла

Ну а в третьем пункте выбираете как будете подключать шрифт на сайт:

1. Standard.

подключаем на сайт нестандартные шрифты из google

Копируем код и размещаем его в файле header.php перед закрывающем тегом </head>

2. @import

подключаем нестандартные шрифты из google

Можете переключить вкладку на @import, скопировать код и разместить его в самом начале файла стилей style.css.

Третий способ javascript я не рассматривал.

Какой бы способ подключения вы не выбрали, вам только останется в файле стилей css поменять классы у «font-family» на новый подключенный шрифт.

подключаем нестандартный шрифт

[adsense]
gugl-shrifty-5

Внимание! Чем больше нестандартных шрифтов вы будете подключать к своему сайту с помощью сервиса Google, тем скорость загрузки вашего сайта будет меньше! Имейте это в виду!

При подключении шрифтов google, следите за спидометром скорости загрузки вашего сайта, и не доводите то критической отметки :)

В целом, чтобы подключить нестандартный шрифт, вам потребуется 2 минуты! Все!

Также, с Гугл шрифтов любой шрифт можно скачать себе на компьютер нажав справа сверху кнопочку донлоад.

P.S. Сейчас популярные шрифты open sans и ubuntu

Все, удачи вам сегодня!

✌️ Хочешь продолжить разговор после статьи?

В Telegram я делюсь всем, чего нет на блоге: быстрые мысли, мемы, хаос и ностальгия.

Подписаться на Telegram
Комментарии: 19
  1. Людмила

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

    1. Voroni (автор)

      Да не за что =)

  2. Дмитрий

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

    1. Voroni (автор)

      Дмитрий, я в статье имел в виду то, что много шрифтов не стоит подключать. Один шрифт — не заметите никакой нагрузки. Если с хостингом проблемы, переезжайте на Бегет. Ваш сайт сами перенесут и настроят. Плюс при оплате на год от меня скидка 20%. Сплошные плюсы)

      1. Дмитрий

        Я уже начал подумывать о переезде, но у меня сделана предоплата, как с этим быть? Я не думаю. что с переездом сайта, переедут и деньги:) Придется наверно ждать окончания оплаты (на 45 дней остаток), или выводить?

  3. Костя

    Тоже надо заменить шрифт, мне мой на сайте не очень нравится…и с CSS поработать. А вообще, а вообще…надо бы приобрести платный шаблон :-D

  4. Данил

    Вот читаю комменты и диву даюсь)) Люди пишут тупо ни о чем,в основном ради ссылок. Валер, а не думал завести категорию «отзывы», чтобы они там оставляли свои «спасибо»? :-D . Ну реально, ты платишь им за «лучшие» комментарии «ни о чем»… Щедрый ты человек =) Какой должен быть комментарий? Ну, думаю где-то рядом с этим:

    1. Со смыслом;
    2. Дополнять сам пост;
    3. Критиковать пост (даже так);
    4. Коммент может быть ответом другому участнику.
    5. И т.п.

    Чисто выразил свое мнение. =)

    1. Дмитрий

      Здравствуйте Данил:) Но скажу Вам, что Вы опоздали. Валерий уже об этом позаботился, и я так понимаю вы не читали этот пост — https://aimblog.ru/konkursy/top-kommentatory.html :-D

    2. Костя

      Данил, но это нормально. Люди создают общение. Где-то дополнят, а где-то и пофлудят))) Можно поворчать, но зачем? Тем более, Валера сам определит, кто будет лучшим комментатором (не по количеству флуда, а по качеству сообщений), если идет разговор о награждении вебманями))) Я лично не гонюсь здесь за ними, просто пишу, потому что хочу ответить на какой-нибудь пост или коммент к посту, ну и ссыль оставить. Это не криминал.
      А идея с отзывами, кстати, неплохая. На одном трэвэл-блоге реализовали подобное. Но при этом ничто не мешает народу флудить в, так ск-ть, обычных постах)))))

    3. Voroni (автор)

      Данил, я как раз и изменил правила) Много комментариев вообще нужно удалять и чистить.

  5. Костя

    Дмитрий, во-во! о чем и речь))))) Я в любом случае порадуюсь за победителя. А писАть можно и нужно, даже если флуд и невольный оффтоп)))))

  6. Анжелика

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

  7. Людмила

    А мне кажется, что поисковикам особой разницы нет, какой шрифт на сайте. Лишь бы было удобно посетителям сайта, как говорят, юзабилити. Может, я не права? У себя на сайте шрифт я поменяла, на более крупный. У самой зрение плохое, да и читателям лучше читать.

  8. Анжелика

    Людмила, а в каком файле вы делали настройки шрифта крупнее? Смотрится и правда лучше, и читать удобнее.

  9. Геннадий

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

  10. Прохожий

    Еще хорошие каталоги шрифтов на http://www.adobe.com/type/fontfinder/ и http://www.fonts-online.ru

  11. Александр

    спасибо, попробую. вроде ничего особо сложного тут нет

  12. MaskoVa

    Очень хочу поставить на заголовки статей шрифт Lobster. Но пока еще не определилась, как я это буду делать, а точнее, чьими руками… Придется просить помощи *help*

  13. Алексей

    Спасибо.Бывает такого накрутиш с шрифтом что назад вернуть не можеш :-))

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности (подробнее).