Html — Могу ли я на своем сайте использовать шрифты мака


Содержание

«Нестандартные шрифты на сайте» или «CSS свойство @font-face»

04 февраля 2011 34 Рубрика: HTML&CSS, Важные мелочи

« Предыдущая запись
Свойства CSS3! Часть 4 – rgba, hsla и прозрачность фона
Следующая запись »
Свойства CSS3! Часть 5 – column-count. Несколько колонок в HTML

Очень часто в дизайн сайта гораздо лучше вписываются нестандартные шрифты, чем стандартные, но вылезать из-за рамок стандартов не хочется. Для вылаза из рамок существуют, конечно, специальные жабаскрипты, но этот вариант всяко уступает тому, которое уже заранее создано в спецификации CSS — свойство @font-face. И если раньше было трудно его использовать из-за слабой кроссбраузерности, то сейчас им дан зелёный свет. Итак…

EOT TTF и OTF SVG WOFF
Internet Explorer IE5+ IE9 IE9
Google Chrome Chrome 4.0+ Chrome 0.3+ Chrome 5.0+
Mozilla Firefox Firefox 3.5+ Firefox 3.5 Firefox 3.6+
Apple Safari Safari 3.1+ Safari 3.1
Opera Opera 10+ Opera 9

В предлагаемой таблице указано какие шрифты какими версиями браузеров поддерживаются. Материалы взяты из интернета и дополнены собственными наблюдениями в виде указанных значков +. Для тестирования я использовал Chrome 8.0, Opera 11.01, Firefox 4.0b7, Safari 5.0.

С ишаком комментариев не надо – даём ему EOT и забываем о нём, также как и о том, что EOT больше никем не поддерживается. В хроме работают все шрифты, но раньше всех заработал SVG. А вот для огнелиса про SVG можно забыть, т.к. в четвёртой версии он не поддерживается. Впрочем, для Сафари и Оперы почти такая же история – в последних версиях поддержка SVG также убрана, а рабочим остался только TTF.

Использование

Строки 1-4 – задаём шрифт, а в 5 строке его используем. Поподробнее глянем на 2-3 строки. Мы задаём шрифт только для ишака, а как задать шрифты для других браузеров? Рассмотрим пример.

Здесь необходимо сказать две вещи. Первое касательно src: если задаётся url, то, как можно догадаться, указывается путь до шрифта, а если задаётся local, то указывается название шрифта на локальной машине, который может быть уже есть у пользователя на компьютере. В предлагаемом примере это служит в роли хака для ишака. Второе, что я хотел сказать, так это то, что ишак не понимает строки, когда в них пишут format, он их просто игнорирует. В результате ишак считает первый шрифт eot, а остальное всё продинамит, а остальные браузеры дойдут до нужного им правила.

Последний вопрос, который может возникнуть, где достать все вариант одного и того же шрифта? Ответ прост. Умные люди уже позаботились создать сервис Белкошрифт , который сам создаёт все варианты шрифтов того, который вы ему подсунете.

UPD: Спасибо Алексу за полезную ссылку в виде аналога белкошрифта, у которого есть возможность юзать лицензионные шрифты — www.font2web.com .

Достоинства использования @font-face

Основные достоинства очевидны: сео, возможный поиск по тексту, работа с ним, не говоря уже о том, что можно работать с текстом как хочешь – line-height, letter-spacing, first-letter – всё это возможно.

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

Недостатки использования @font-face

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

И последнее. Для желающих есть сервис предпросмотра шрифтов от гугл (линк) . Он позволяет не только просмотреть шрифт, но и задать ему всякие параметры.

Вот и всё на сегодня. Не забываем пользоваться font-face, так как вещь крайне полезная. Удачи!

Кривое отображение на Mac

Верстаю сайт с другом на пару. У друга Мак, просматривает вёрстку и говорит — у меня меню верхнее уезжает:

Смотрю у себя(Win7:Gc\Opera\FF\IE):

— всё нормально. Перелопачиваю меню, но сомнительный код найти не могу. В чём может быть проблема?

Попытался назвать тему «Проблема отображения на Mac» и долго не мог понять из-за чего мне не дают это сделать. Оказалось, что слово «проблема» в списке запрещённых :facepalm:

10.07.2013, 11:25

Кривое отображение в IE
День добрый как сделать чтобы эти блоки отображались ровно в IE в других браузерах они хорошо.

кривое отображение
у меня есть динамичный сайт, в верху панель с кнопками, мне надо, чтобы пару кнопок передвигались.

Кривое отображение таблицы в Firefox
Сверстал таблицу на сайт, во всех браузерах открывает корректно (даже в IE 6,7), a в Mozila FireFox.

Кривое отображение шрифтов Chrome
Добрый вечер Делал верстку сайта и столкнулся с такой проблемой — шрифты отображаются иначе, чем.

Съезжает верстка (кривое отображение)
Приветствую. Проблема: на сайте в верхнем меню изображена книжная полка с книгами. На главной.

Как использовать нестандартные шрифты для сайта

Здравствуйте, уважаемые читатели!

В предыдущей статье «Применение стилей CSS в редакторе WordPress» я писал о том, как нестандартным образом, используя строчные CSS-стили, оформить контент на сайте под управлением WordPress. Используя стили можно, в том числе, изменять и шрифт, применяемый в тексте.

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

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

Можно, но есть определенные условия.

Стандартные и нестандартные шрифты

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

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

Цукерберг рекомендует:  Приложение прогноза погоды для Android за один урок

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

Как же решить эту проблему?

Для этого нужно подключить необходимые шрифты к сайту.

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

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

В этой статье мы рассмотрим подробнее первый способ.

Работа с сервисом Google Fonts

Начнем с сервиса Google Fonts , как самого известного и надежного.

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

На сайте Google Fonts, как видно из скриншота, на данный момент в коллекции содержится 708 шрифтов, но не все они нам подходят. Для русскоязычных сайтов нужны шрифты, поддерживающие кириллицу. Слева располагаются фильтры для выбора, где в выпадающем списке Script выбираем Cyrillic, после чего остается уже 61 вариант. Из них мы и выбираем. Понравившиеся шрифты добавляем в коллекцию, нажимая на кнопку Add collection.

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

Далее переходим к последнему пункту – кнопка Use. Здесь можно скопировать код для подключения шрифта к сайту.

Этот код следует вставить на HTML-страницу вашего сайта между тэгами и . Для сайтов на WordPress эти тэги находятся в файле заголовка header.php. В пункте 4 копируется код для описания стиля CSS.

Как видите, я выбрал три варианта, и если теперь в HTML-редакторе WordPress набрать такой код:

Этот текст оформлен нестандартно. Poiret One.

Сделать это можно двумя основными способами. Russo One.

Рассмотрим подробнее первый способ. Marck Script.

то на странице это будет выглядеть так:

Этот текст оформлен нестандартно. Poiret One.

Сделать это можно двумя основными способами. Russo One.

Рассмотрим подробнее первый способ. Marck Script.

Работа с сервисом AllFont.ru

Еще один хороший сервис для выбора шрифта для сайта — AllFont.ru . Кажется, здесь выбор еще богаче. По крайней мере, разнообразнее. Выбирать можно, пользуясь рубрикатором или поиском по названию.

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

После этого можно скопировать коды для вставки на сайт. Все делается аналогично тому, как делали на сайте Google Fonts. Я для примера выбрал шрифт AGZeppelin-Roman, посмотрите, как он выглядит.

Добро пожаловать в крупнейшую библиотеку AllFont.ru

Добро пожаловать в крупнейшую библиотеку AllFont.ru

Надеюсь, что статья оказалась для вас полезной. Если так, подписывайтесь на обновления блога, так как готовятся новые полезные статьи.

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

новости интернета и современных технологий

Многие пользователи Mac хотели бы установить автоматическую HTML-подпись для своих электронных писем, чтобы не приходилось каждый раз добавлять ее при начале новой переписки. Как оказалось, осуществить это не так уж и трудно – следует всего лишь выполнить несколько простых действий.

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

Как создать и установить HTML-подпись для электронных писем в Mac OS X

1. Для начала необходимо зайти в приложение Mail на своем компьютере Mac и создать новое письмо, которое следует удалить после выполнения всех нижеописанных действий;

2. В открывшемся окне, в поле письма создайте подпись, используя различные шрифты и стили, если это необходимо. Там же можно добавлять ссылки на свои интернет-ресурсы (правой кнопкой мыши по ссылке -> Ссылка — Добавить ссылку) и контактные данные;

3. Затем необходимо скопировать в буфер обмена подпись и закрыть письмо;

4. Возвращаемся к главному окну Mail и выбираем меню Настройки;

5. Затем открываем вкладку Подписи;

6. В поле со списком своих электронных адресов (слева) выбираем тот, в исходящие письма с которого будут автоматически добавляться подписи. Нажимаем кнопку «+» и вставляем в соседнее поле ранее скопированную подпись.

Если все действия выполнены верно, то подпись будет отображаться в каждом письме, отправленном с выбранного электронного адреса. Можно также создавать несколько вариантов подписей, которые будут доступны для выбора в соответствующей вкладке при создании нового сообщения.

Аналогичными действиями можно настроить смену подписи в приложении Mail на iPhone и iPad. В таком случае, при отправке сообщений, вместо стандартной фразы о том, что сообщение было отправлено, например, со смартфона Apple, будет появляться подпись, установленная пользователем.

Типографика. Правильно ли вы используете шрифт?

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

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

Антиква или гротеск?

Конечно может некоторые сейчас не сильно поняли, что за антиква, а что за гротеск, поэтому будем называть их чуть более привычными названиями: с засечками (антиква, serif) и без засечек (гротеск, sans-serif). Тут есть одно правило, которого просто жизненно необходимо придерживаться: никогда не используйте в маленьком кегле (8-14) антикву! Засечки в таком случае начинают создавать «монолитность» тексту и его становится куда тяжелее читать. Ставьте антикву в заголовках и прочих крупных вещах, для всего остального есть мастеркард гротеск.

Использование заглавных букв в тексте.

Тут давно действует избитое правило: «Заглавным буквам всегда необходимо разрядка» и оно правдиво на все 100%, но до сих пор можно встретить сайты студий веб-дизайна(!), которые похоже плевать на это правило хотели или просто о нём не знают. Излишняя правильность заглавных букв заставляют их слипаться, что очень напряжно для глаз. Пожалуйста, делайте разрядку и пользователь в долгу не останется.

Интерлиньяж (межстрочный интервал)

Избитое право, которое так же частенько игнорируется большим числом дизайнеров. Тут рекомендация простая: 1.5em и будет вам счастья. Это не так сложно, но при этом даст пользователю комфорт при чтении большого текста.

Контраст

Выделить нужный кусок текста каким-то цветом может и не плохая идея, но в первую очередь ваш шрифт должен быть контрастен по отношению к фону. Если вы будете писать красными буквами на синем фоне, то будьте уверены — клиент уйдёт и больше никогда не вернётся. Лучше всего — стандарт: чёрное на белом.

Текстовые шрифты

Используйте текстовые шрифты. Отставить декоративщину. Она хороша, но только для выделения блока. Никогда не пишите декоративным шрифтом большие блоки текста. Это затрудняет чтение!

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

Цукерберг рекомендует:  Api - Нужен специалист API

Как подключить шрифт на сайт в CSS

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

Как подключить шрифт на сайт в CSS

Например, у нас есть шрифт Raleway.ttf и мы хотим использовать его во всех заголовках h1 нашего сайта. Для этого выполняем следующие действия:

В корневой папке сайта создаём папку fonts и копируем туда наш Raleway.ttf;

В самом низу файла стилей style.css прописываем правило:

А также в файле стилей задаём правило для всех заголовков:

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

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

Вы могли заметить, что есть разные форматы шрифтов — .ttf, .woff, .eot, .svg и другие. Еще существует формат для современных браузеров .woff2, но о нем мы расскажем в одной из следующих статей.

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

Здесь следует обратить внимание на порядок подключения — это важно!

Не будем вдаваться в подробности, просто запомните вид этой конструкции.

Если у вас есть шрифт только в одном формате, то воспользуйтесь различными конверторами шрифтов. Вот один из них.

Как подключить шрифт с помощью различных сервисов

Также можно воспользоваться сервисом fonts4web для подключения шрифтов:

  1. Находим нужный шрифт или выбираем из уже имеющихся;
  2. Скачиваем архив и добавляем его в папку fonts;
  3. Копируем уже готовый CSS-код для файла style.css;

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

  1. Заходим на сайт https://fonts.google.com;
  2. Находим нужный шрифт или несколько:
  3. Нажимаем на красный круг в правом верхнем углу в блоке шрифта;
  4. Внизу нажимаем на появившееся чёрное поле:
  5. При желании кастомизируем шрифт;
  6. Копируем ссылку и вставляем ее в тег head:

Как подключить шрифт к шаблону Moguta.CMS

  1. Через хостинг загрузить необходимый шрифт в папку /mg-templates/mg-default/fonts;
  2. Через административную панель открыть файл стилей;
  3. Прописать в самом верху новый шрифт;
  4. Ниже в файле стилей найти интересующий нас элемент и задать или изменить свойство font-family: *название нового шрифта* ;

Как добавить ссылку с Google Fonts в шаблон Moguta CMS

  1. Заходим Настройки—>Шаблон—>template.php;
  2. Перед закрывающим тегом head вставляем ссылку сгенерированную гуглом;
  3. Затем в файле стилей задаём новый шрифт к нужному элементу:

Теперь вы знаете как подключить шрифт на сайт в CSS и не только. Мы с радостью ответим на все ваши вопросы в группе или комментариях.

Как сделать красивый шрифт в html: размеры, цвета, теги шрифтов html

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

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .


Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:

  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.
  • face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.

Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:

  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • — меньший размер шрифта;
  • — наклонный текст ( курсив ). Аналогичный ему тег ;
  • — текст с подчеркиванием;
  • — зачеркнутый;
  • — отображение текста только в нижнем регистре;
  • — в верхнем регистре.

Возможности атрибута style

Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении ( xx-small, x-small, small, medium, large );
  • В процентах;
  • В пунктах ( pt ).

3) font-style – устанавливает стиль написания шрифта. Синтаксис:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

Пример того, как изменить шрифт в html этим свойством:

5) font-weight – позволяет установить толщину написание текста ( насыщенность ). Синтаксис:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

Для того чтобы задать цвет шрифта в html можно использовать свойство color . Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb . А также в виде шестнадцатеричного кода.

Русскоязычные шрифты и их поддержка

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

  • Arial Black ;
  • Arial ;
  • Comic Sans MS ;
  • Courier New ;
  • Georgia ;
  • Lucida Console ;
  • Lucida Sans Unicode ;
  • Palatino Linotype ;
  • Tahoma ;
  • Times New Roman ;
  • Trebuchet MS ;
  • Verdana .
      Если этого количества мало, то на просторах интернета хватает сайтов, где можно скачать шрифт на любой вкус. Еще можно разработать свой шрифт. Но это уже совсем другая история. И она будет написана уже другим шрифтом.

    Как подключить шрифт на сайт: 3 разных способа + готовый CSS шаблон

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

    Одни шрифты выглядят более убедительно, другие — более интригующе.

    Но как подключить любые шрифты к сайту и применять их где захочется?

    В этой статье я покажу вам 3 способа , с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.

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

    Если у вас сайт на Wordress, читайте способ №1, он — самый простой. Если вы разбираетесь в CSS — можете сразу перейти ко второму или третьему способу.

    Способ №1. Быстрое подключение шрифтов к сайту на WordPress ( cложность: ⭐ ⭐ ⭐ )

    Если на ваш сайт установлена премиальная тема оформления — вы можете подключить шрифты за 2 минуты.

    Вы хотите изменить шрифт заголовков своих статей. Для этого:

    1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один — «настройки темы».

    2. Перейдите в раздел Typography (типография).

    3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):

    4. Нажмите на «Сохранить изменения».

    Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.

    Способ №2. Используйте всю силу Google Fonts ( cложность: ⭐ ⭐ ⭐ ⭐ )

    Вы когда-нибудь слышали про Google Fonts? Если вкратце — это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.

    Шаг 1. Перейдите на официальный сайта сервиса.

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

    Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.

    Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку «+»:

    Вы можете добавить любые шрифты нажимая на значок «+».

    Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:

    Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект — нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):

    Но если вам нужно только жирное начертание (для заголовков), выберите только ее.

    Помните, чем больше начертаний вы выберите, тем больше будет вес загружаемого файла.

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

    Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую «@import» и вставьте на первую строчку CSS файла вашего сайта:

    Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/’вашатема’/css/. В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:

    Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет ��

    Так как сначала должны загрузиться шрифты, только потом все остальное — размещайте код подключения шрифта в самое начало CSS файла.

    Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.

    Для придания шрифта Roboto всем абзацам я напишу следующее: p

    Способ №3. Кастомное подключение шрифтов с помощью CSS ( cложность: ⭐ ⭐ ⭐ ⭐ ⭐ )

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

    Где взять веб-шрифты для сайта

    А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?

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

    Шаг 1. Перейдите на официальный сайт сервиса

    Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.

    Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.

    Например, если есть 4 начертания, будет написано 4 Styles:

    Обозначение начертаний шрифтов — нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).

    Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.

    Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.

    Для подключения шрифтов используем @Font-face

    Через директиву @font-face вы можете подключить как один, так и несколько шрифтов к своему сайту. Но у данного способа есть свои плюсы и минусы.

    • Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
    • Файлы шрифтов будут находится на вашем сервере — вы не будете зависеть от сторонних сервисов.
    • Для правильного подключения шрифта для каждого начертания нужно прописывать отдельный код.
    • Не зная CSS можно легко запутаться.

    Вы можете просто скопировать мой готовый код и где нужно указать свои значения.

    Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.

    Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.

    Шаг 2. Пропишите в самом начале CSS файла следующую запись:

    Где MyWebFont — это название шрифта, а значение свойства src (данные в скобках в кавычках) — их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.

    Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.

    Шаг 3. При подключении курсивного начертания, пропишите следующее:

    Где все то же самое, только свойству font-style мы придали значение italic.

    Шаг 4. Для подключения жирного начертания, добавьте следующий код:

    Где свойству font-weight мы задали значение bold.

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

    Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:

    Ну вот и все :) Только что вы подключили 4 начертания шрифта на свой сайт.

    Но есть одна ремарка — данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.

    Как подключать шрифты для сайтов на разных CMS

    Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) — если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.

    Ну вот и все. Если вы считаете, что эта статья может быть полезна другим вебмастерам — поделитесь ею в социальных сетях.

    [popup_trigger >Подписывайтесь на мою рассылку [/popup_trigger], чтобы не пропустить полезные и интересные публикации на блоге.

    Кликните по ссылке ниже чтобы получить бесплатный доступ к ПОШАГОВОМУ видеоуроку по подключению шрифтов.

    Типографика. Правильно ли вы используете шрифт?

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

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

    Антиква или гротеск?

    Конечно может некоторые сейчас не сильно поняли, что за антиква, а что за гротеск, поэтому будем называть их чуть более привычными названиями: с засечками (антиква, serif) и без засечек (гротеск, sans-serif). Тут есть одно правило, которого просто жизненно необходимо придерживаться: никогда не используйте в маленьком кегле (8-14) антикву! Засечки в таком случае начинают создавать «монолитность» тексту и его становится куда тяжелее читать. Ставьте антикву в заголовках и прочих крупных вещах, для всего остального есть мастеркард гротеск.

    Использование заглавных букв в тексте.

    Тут давно действует избитое правило: «Заглавным буквам всегда необходимо разрядка» и оно правдиво на все 100%, но до сих пор можно встретить сайты студий веб-дизайна(!), которые похоже плевать на это правило хотели или просто о нём не знают. Излишняя правильность заглавных букв заставляют их слипаться, что очень напряжно для глаз. Пожалуйста, делайте разрядку и пользователь в долгу не останется.

    Интерлиньяж (межстрочный интервал)

    Избитое право, которое так же частенько игнорируется большим числом дизайнеров. Тут рекомендация простая: 1.5em и будет вам счастья. Это не так сложно, но при этом даст пользователю комфорт при чтении большого текста.

    Контраст

    Выделить нужный кусок текста каким-то цветом может и не плохая идея, но в первую очередь ваш шрифт должен быть контрастен по отношению к фону. Если вы будете писать красными буквами на синем фоне, то будьте уверены — клиент уйдёт и больше никогда не вернётся. Лучше всего — стандарт: чёрное на белом.

    Текстовые шрифты

    Используйте текстовые шрифты. Отставить декоративщину. Она хороша, но только для выделения блока. Никогда не пишите декоративным шрифтом большие блоки текста. Это затрудняет чтение!

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

    Правила форума

    Чтобы отправить ответ, вы должны войти или зарегистрироваться

    Сообщений 2

    1 Тема от madagaskar83 19-12-2013 16:30:00

    • madagaskar83
    • начал пользоваться ImageCMS
    • Неактивен
    • Зарегистрирован: 05-02-2013
    • Сообщений: 20

    Тема: Как вставить свой шрифт.

    Уважаемые участники форума, подскажите как вставить свой шрифт в ImageCMS Shop 4.5.1.

    2 Ответ от webmistress 25-12-2013 01:49:37 Отредактировано webmistress (25-12-2013 02:07:30)

    • webmistress
    • начал пользоваться ImageCMS
    • Неактивен
    • Зарегистрирован: 18-10-2013
    • Сообщений: 23

    Re: Как вставить свой шрифт.

    Я не большой специалист по imagecms, но по-моему дополнительные шрифты везде вставляются через CSS-правило @font-face одинаково:

  • Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих