Подключение шрифтов на ваш сайт | Блог веб-разработчика MaxGraph

Подключение шрифтов на ваш сайт

 

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

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

 

 

  1. Подключение шрифта от Google Fonts.Простейший вариант, который Вы можете использовать. Но есть один главный минус — там довольно мало шрифтов, и очень часто приходится использовать сторонние. Тем не менее, если шрифт из макета есть в Google Fonts — смело используйте.Как это делать? Заходите на Google Fonts Google Fonts, в строке search вводите название нужного вам шрифта и жмете Enter. Если шрифт имеется — он будет сразу же Вам показан, и вот тут то самое интересное — как скачать и поставить себе на сайт?Очень даже просто. Нажимайте на «плюсик» в правом верхнем углу описания шрифта.
    Подключение шрифтов GoogleПосле этого нужно нажать на Family Selected. Выезжающий блок покажет вам дополнительные настройки. Здесь нужно перейти на вкладку Customize и выбрать нужные начертания шрифта. Например, Regular и Bold.
    Подключение шрифтов Google
    Далее вернуться во вкладку Embed и воспользоваться специальным кодом. Он начинается с link, прямо как ссылка на css-файл.Подключение шрифтов Google
    Этот код нужно вставить в тег head, рядом с подключением css-файла. Это и будет ваше подключение шрифта. Но после этого он работать еще не будет. Нужно задать шрифт конкретному элементу:

    CSS

    .box {
    font-family: ‘Roboto’;
    {

    Только в этом случае шрифт будет работать.

     

     

     

    Легко? Уверен, что да. А теперь перейдем к более сложному способу. Но и более кастомизированному.

  2. Подключение сторонних шрифтов через font-face.С подключением данных шрифтов не все так просто и гладко, однако этот способ даже лучше. На сайта Google Fonts нет огромного кол-ва шрифтов, а подключить сторонний шрифт можно.Сразу оговоримся, что вам нужно будет иметь НЕСКОЛЬКО форматов шрифтов. от eot до svg. Как получить эти форматы? Очень просто.Либо скачивать шрифты с fonts4web, где Вам в архиве предоставят все необходимые форматы, либо играться вручную, если и на этом сайте нет их. Я для этого использую вот этот сервис. Очень удобно и всегда работает.С форматами разобрались, но как же это все подключать? У нас на выходе будет папка с кучей шрифтов (и форматов), что с ними делать? Показываю :)Все делается через css. Лучше будет, если все будет в отдельном файле.

    fonts.css

    CSS

    @font-face{
    font-family: ‘Roboto’;
    src: url(‘../fonts/Roboto.eot’);
    src: url(‘../fonts/Roboto.eot?iefix’) format(‘eot’),
    url(‘../fonts/Roboto.woff’) format(‘woff’),
    url(‘../fonts/Roboto.ttf’) format(‘truetype’),
    url(‘../fonts/Roboto.svg#webfont’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    Такой код нужно расписать для каждого начертания. И, если у вас есть Sass, то можно делать как я (да и многие другие) — использовать миксины. Это упрощает работу, но об этом уже я расскажу на видео верстки макета.
    И да, естественно, нужно включить шрифты для конкретного элемента специальным свойством font-family.

 

 

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

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

Метки: , , ,

Понравилось? Оцени!
12345 (1 оценок, среднее: 5,00 из 5)
Загрузка...

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *