Как подключить шрифт css из папки
Перейти к содержимому

Как подключить шрифт css из папки

  • автор:

Как подключить шрифт к сайту с помощью @font-face

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

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

Пошаговая установка

1. Выберите нужный шрифт и нажмите «скачать для сайта».

Как скачать шрифт

2. В корне своего сайта создайте папку fonts, и скопируйте в нее скачанные шрифты.

Создание папки шрифтов

3. Откройте свой CSS-документ и скопируйте в него содержимое текстового файла из архива.

CSS-документ, подключение шрифта

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

Выберите правильный путь

5. Готово. Скопируйте свойство с названием семейства и вставьте в селектор, для которого вы прописываете стили.

Готово @font-face

Что если я уже скачал шрифт в другом месте, и хочу его подключить?

В таком случае вам нужно найти в интернете конвертор шрифтов и преобразовать ваш ttf шрифт (или otf) в нужные форматы, а именно в eot, svg, woff и woff2. Это необходимо для того чтобы шрифт отображался и корректно работал во всех браузерах, а также на мобильных устройствах.

Затем вам нужно самостоятельно прописать правило @font-face, соблюдая его синтаксис.

Синтаксис @font-face

Синтаксис @font-face

Синтаксис правила можно условно разделить на основные свойства и расширенные.

Основные:

  • font-family – указывает название шрифта.
  • src – указывает путь шрифта. Это может быть URL шрифта, расположенного на сервере вашего сайта, URL шрифты расположенного на чужом сервере (например, Google Fonts), или просто название шрифта расположенного на компьютере пользователя (Helvetica New Bold, Tahoma, Georgia и т.д.).

Расширенные:

  • font-display – определяет как будет отображаться шрифт, в зависимости от того, был ли он загружен и готов ли к использованию.
  • font-stretch – позволяет регулировать ширину текста.
  • font-style – определяет начертание шрифта – обычное, курсивное или наклонное (последние два это не одно и то же).
  • font-weight – устанавливает насыщенность шрифта, по шкале от 100 до 900 (100-сверхсветлое, 900-сверхжирное).
  • font-variant — определяет как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера(капитель).
  • font-feature-settings – позволяет управлять расширенными типографскими функциями в шрифтах OpenType.
  • font-variations-settings – позволяет осуществлять низкоуровневый контроль над вариациями Open Type и TrueType шрифтов, указывая четырехбуквенные названия осей.
  • unicode-range – указывает диапазон Unicode кодов(глифов), которые будут использоваться в шрифте.

Подключение шрифта к сайту с помощью Google Fonts

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

Выберите шрифт

Выберите начертания

Скопируйте код

Скопированный код нужно разместить в теле тега head, на вашей странице html.

Разместите код в теле тега head

Минус данного способа в том, что если во время верстки сайта у вас пропал интернет – шрифты перестанут отображаться и заменятся на стандартные т.к. файлы находятся не на локальном компьютере, а на серверах Google. Также, есть шансы, что когда вы приедете на презентацию верстки к клиенту (или просто на согласование), и у него не будет Wi-Fi, то проблема повторится.

Как подключить шрифт css из папки

Добрый вечер! Ни когда раньше не приходилось подключать шрифты с «Google fonts» или каких либо других бесплатных ресурсов в интернете.
Ну, сделать абсолютную ссылку не составило труда, скопировал ссылки для html и css и вставил их соответственно htm между тегами , а css в классе котором нужен данный шрифт. Я конечно недавно в этом варюсь, но логически понял, что данные ссылки будут тормозить загрузку документа. Это даже видно не выкладывая в интернет, поэтому решил скачать шрифты и установить их не посредственно в папку сайта. Скачать не составило труда, но с установкой через @font-face (относительная ссылка css ) пропарился довольно долго.
Понял вот что, не надо до того как вы не убедились что шрифт действительно работает в документе устанавливать его на компьютер. Во многих браузерах показывает, что шрифт применился хотя это не так( меня Opera выручила, показала, что шрифт по ссылке не установился.)
Далее непосредственно ссылки:

и вот другая из файла fonts.css (вывел ссылки в отдельный файл css ):

@font-face < font-family: Bad Script; src: url(../fonts/BadScript-Regular.ttf);

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

.name

и как файл BadScript-Regular.ttf . Почему так?
Особенно поразили конечно ссылки. Что, в css надо указывать на одну папку меньше?
С Наилучшими пожеланиями!

[QUOTE]"Все Мысли О смерти нужны для жизни!"
Л. Н. Толстой[/
QUOTE]

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

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

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

После этого, находим файл стилей (например, style.css), или создаём новый, и добавляем в документ следующий код:

@font-face font-family: test; /*вместо test пишем название нашего шрифта*/
src: url(fonts/test.ttf); /*внутри скобок прописываем путь к файлу шрифта*/>

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

При этом, в значении атрибута href необходимо написать путь к нашему файлу стилей, в котором у нас уже подключён наш шрифт.

Вот и всё! Теперь мы можем его использовать.

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

Пример подключения шрифта Open Sans для системы управления контентом Joomla!

  1. Находим шрифт через поисковик и скачиваем его.
  2. В корневой папке сайта на Joomla ищем папку templates, переходим в папку с активным шаблоном.
  3. Ищем в в директории с шаблоном файл style.css (он может находится в папке css), открываем его.
  4. Переходим в конец документа и пишем туда следующий код: @font-face < font-family: Open Sans; src: fonts/OpenSans.ttf[название файла] >
  5. Переходим в папку fonts в папке активного шаблона.
  6. Скидываем туда файл скачанного шрифта. [Если файл style.css ещё не подключен к сайту]
  7. Ищем файл index.php (или head.php, или header.php, или template.php и т.д. в зависимости от выбранного шаблона) и между открывающим и закрывающим тегом head пишем следующий код:

Подключение шрифта Open Sans для системы управления контентом Joomla

Пример использования шрифта в файле style.css:

h1 font-family: “Open Sans”;
>

Пример подключения шрифта Open Sans для системы управления контентом WordPress

Алгоритм абсолютно такой же, за исключением директорий: файл стиля находится в папке /wp_content/themes//css/style.css

Папка с шрифтами у сайта на WordPress находится по адресу /wp_content/themes//fonts/

Файл header.php, куда вписывается код подключения файлов стилей, находится в директории /wp_content/themes//

Подключение шрифта Open Sans для системы управления контентом WordPress

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

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

Переходим на сайт fonts.google.com, ищем там требуемый шрифт и открываем страницу с ним. В правом верхнем углу находится кнопка «Select this font», при нажатии на которую появится окно с кодом тега , который просто нужно добавить в файл header.php. После этого шрифт уже можно использовать.

Рассмотрим пример подобного подключения для системы 1С-Битрикс.

На сайте шрифтов гугла есть интересный шрифт Roboto (fonts.google.com/specimen/Roboto). После нажатия кнопки появился следующий код:

Подключение Google шрифта на сайт 1С-Битрикс

Открываем корневую папку сайта, переходим по пути bitrix/templates//header.php и внутри тега вставляем код выше. Вот и всё, новый шрифт подключен!

Ваш запрос или вопрос по теме:

Интернет-агентство сегодня:

ТОП20 веб-студий России по разработке интернет-магазинов по доступной цене в рейтинге CMSMagazine, 1 место в ЮФО и ТОП10 Центрального ФО.

ТОП100 веб-студий Партнеров Битрикса по созданию интернет-магазинов и 11 место среди разработчиков интернет-магазинов на Битриксе по низким ценам в рейтинге РейтингРунета-2016.

ТОП10 разработчиков интернет-магазинов Москвы по доступной цене в рейтинге РейтингРунета.

ТОП120 SEO-компаний России , специализирующихся на поисковом продвижении интернет-магазинов по версии РейтингРунета.

Золотой Сертифицированный Партнер 1С-Битрикс .

Государственная аккредитация в области информационных технологий (№5291 Министерства связи РФ).

ПОЛУЧИТЕ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ или ОТПРАВЬТЕ ЗАПРОС

Задайте вопрос о веб-разработке, обслуживании или продвижении сайта или отправьте запрос по работам. Мы стараемся отвечать на Ваши запросы в течение 24 часов.

  • Разработка сайтов
  • Реклама и продвижение
  • Поддержка сайтов
  • Магазин готовых сайтов и ПО
  • Карта сайта
  • Главная

"ONVOLGA": Центр интернет решений и технологий . Создание сайтов, реклама в интернете, оптимизация, продвижение и обслуживание сайтов. Волгоград 2010-2024.

Волгоград , пр-т Ленина, 92, офис 517 . +7 (8442) 98 54 54 , 98 51 54 , +7 (917) 338 51 54 / Москва ул. Угрешская, 14, +7 (495) 580 30 45 / Санкт-Петербург +7 (812) 426 11 75 info@onvolga.ru

онволга.рф © Все права защищены. Перепечатка и использование материалов возможны только с обязательным указанием автора и с активной ссылкой на этот сайт веб-студии.

  • Услуги
    • Создание сайтов
    • Продвижение сайтов
    • Обслуживание сайтов
    • Кейсы
    • Работы веб-студии: создание сайтов
    • Работы веб-студии: продвижение сайтов
    • Обновлено веб-студией
    • Логотипы и фирменный стиль
    • Баннеры
    • Интерфейсы
    • Презентации
    • Другие работы web-студии
    • Клиенты веб-студии
    • Партнеры веб-студии
    • Веб-студия в прессе
    • Отзывы
    • Миссия и ценности ONVOLGA
    • Достижения и статусы
    • История веб-студии
    • Команда веб-студии
    • События, новости ONVOLGA
    • Карьера: работа в ONVOLGA
    • Корпоративный блог
    • Где мы находимся
    • Как мы работаем с регионами
    • Интернет-агентство в соцсетях
    • Бонусная программа для клиентов веб-студии
    • Онлайн: быстрая связь
    • Право в интернете: документы, консультации
    • Инструкции по работе с сайтами
    • Вопрос-ответ
    • Статьи, обзоры, публикации
    • Новости Интернета
    • Web и SEO юмор
    • Веб-словарь: интернет-термины

    Создание сайтов

    • Разработка сайта "под ключ"
    • Создание корпоративных сайтов
    • Создание интернет-магазинов
    • Сайты-визитки
    • Создание промо-сайтов
    • Создание персональных сайтов
    • Мобильные приложения
    • Дизайн и веб-дизайн
    • Готовые сайты "Быстрый старт"
    • Сайты для. Специализированные решения для компаний и магазинов
    • Обновление сайтов
    • Интеграция, верстка, CMS, модули и программирование
    • Корпоративные порталы. Облачные сервисы. Интранет и интернет-системы
    • Регистрация доменов
    • Создание сайтов: вопрос-ответ
    • Статьи о создании сайтов
    • Калькулятор цены интернет-магазина
    • Разработка личных кабинетов
    • Стоимость создания сайта
    • За что нас ещё хвалят

    Продвижение сайтов

    • Комплексное продвижение сайтов
    • Бюджетное продвижение
    • Реклама в интернете
    • Поисковое продвижение сайта
    • Оптимизация сайта
    • SEO - поисковая оптимизация
    • Контекстная реклама
    • Продвижение в соцсетях, блогах, сервисах
    • Бесплатный экспресс-аудит сайта
    • SEO-надзор: контроль за продвижением сайта
    • Продвижение и оптимизация сайтов: вопрос-ответ
    • Статьи о продвижении сайтов
    • Стоимость продвижения сайтов

    Поддержка сайтов

    • Техническое обслуживание сайтов
    • Информационная поддержка сайтов
    • Абонентское обслуживание сайта
    • Обслуживание интернет-магазина
    • SOS - Срочное обслуживание сайтов
    • Копирайтинг
    • Наполнение контентом
    • Защита сайтов
    • Обновление CMS
    • Обслуживание CMS и сайтов на CMS
    • Аудит сайтов, анализ сайтов
    • Модернизация сайтов
    • Поддержка сайтов: вопрос-ответ
    • Стоимость сопровождения сайта

    СЕГОДНЯ ЕЩЕ БОЛЬШЕ ВЫГОДЫ

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

    ПОЛУЧИТЕ МАКСИМАЛЬНУЮ ВЫГОДУ и повышенную эффективность разработки и развития со специальной Программой заботы о сайтах от ONVOLGA

    Срочное обслуживание сайтов

    Срочное обслуживание сайтов.

    Требуется удаление вирусов на сайте, обновление информации сайта, размещение новых фото или изменение структуры интернет-ресурса? Звоните: +7 917 338 51 54, 8 (800) 555 23 46

    Консультации по разработке и продвижению сайта

    "ИНТЕРНЕТУРА" - Консультации по продвижению и разработке веб-сайта.

    Мы хотим, чтобы Ваш сайт был лучшим!

    Регистрация домена при создании сайта - бесплатно!

    Регистрация домена при создании сайта бесплатно!

    Закажите создание сайта в веб-студии "ONVOLGA" и получите домен ru или рф в подарок!

    Аудит сайта бесплатно

    Аудит сайта бесплатно

    Отправьте запрос сегодня и получите бесплатный аудит сайта в подарок!

    Сайт визитка

    Сайт-визитка за 7 дней

    Магазин сайтов "Быстрый старт". Готовые сайты-визитки и лендинги + модульная программа создания корпоративных сайтов: от 9900 руб. Сайты-визитки

    • Срочное обслуживание сайтов
    • Консультации по продвижению и созданию сайтов
    • Регистрация домена при создании сайта - бесплатно!
    • Аудит сайта бесплатно
    • Сайт-визитка за 7 дней

    Новости веб-студии

    26/ 01 2024

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

    Веб-студия - в ТОПах авторитетных рейтингов. Посмотрите наши достижения

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

    Отзывы от довольных Клиентов из десяти стран мира. Почитать отзывы о веб-студии

    Продуманные решения разработки. Надежное обслуживание. Эффективное продвижение. Посмотрите кейсы и работы в портфолио веб-студии

    Отзывы о веб-студии

    Создание сайта с Центром интернет-решений и технологий "ONVOLGA" превратилось в простой процесс, приносящий удовольствие. Мы видели полную заинтересованность в создании для нас качественно сайта, соответствующего нашим требованиям. Сотрудники веб-студии были не просто равнодушными исполнителями, а активными участниками: генерировали новые идеи, творчески подходили к разработке структуры сайта, в доступной форме объясняли то, что было непонятно. На отлично оцениваем и дальнейшую консультационную и техническую поддержку. Благодарим веб-студию — мы полностью довольны работой и результатом сотрудничества.

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

    Участник программы качества внедрений Программа качества Композитный сайт от Битрикс1С интеграция

    Работы веб-студии

    Обслуживание сайта Администрации

    Создание сайта ресторана

    Создание интернет-магазина FD

    Разработка сайта Группы Компаний

    Разработка сайта производства

    Создание и продвижение сайта Сервисного Центра

    Продвижение интернет-магазина детских товаров в ТОП Москвы

    Консультация

    Помогаем сделать сайт недорого и развивать эффективно

    Есть вопросы по созданию сайта и продвижению в интернете? Планируете рекламу, оптимизацию, обслуживание, защиту сайта?

    Задайте вопросы специалистам веб-студии:

    8 (800) 555 23 46

    ТОП вопросов о продвижении и создании сайтов

    • С чего начать создание сайта?
    • Сколько стоит разработка сайта "под ключ"?
    • Как создать сайт дёшево?
    • Что делать для продвижения сайта в первые месяцы после его создания?
    • Создать самостоятельно
    • География работ
    • Избранное

    Сайт: создать и раскрутить самостоятельно

    • 10 ошибок при обслуживании сайта самостоятельно
    • Создание продающего сайта
    • SEO-оптимизация на этапе создания сайта - залог успешного продвижения сайта
    • Создание интернет-магазина. Внедрение принципов электронного мерчандайзинга

    регионы

    • Обслуживание сайтов
    • Создание сайтов
    • Реклама и продвижение

    Своевременный поиск и удаление вредоносного кода на сайте (вирусов, хакерских закладок, PHP sql-иньекций) позволит Вам избежать получения злоумышленником контроля над веб-сайтом и причинения ущерба. Часто владелец даже не подозревает о том, что его сайт взломан и контролируется удаленно. Несколько самых простых советов по защите сайта, которые позволят первоначально снизить риск взлома веб-сайта. Подробнее: Защита сайта

    Зачастую приходится искать способы создания сайта недорого. Предлагаем несколько рекомендаций, как создать сайт в условиях ограниченности бюджета. Во-первых, создать веб-сайт бюджетно позволяет использование бесплатных систем управления (CMS). Неслучайно разработка сайтов на базе бесплатных CMS Joomla, WordPress, Drupal - одно из наиболее популярных в интернете. Второй способ - экономия на дизайне. Подробнее: Как создать сайт недорого

    Яндекс – поисковая система, популярная в России, поэтому продвижение сайтов в Яндексе – одна из самых востребованных услуг на рынке интернет-рекламы. Так как около половины общего поискового трафика приходится именно на Яндекс, продвижение сайтов в ТОП этой поисковой системе считается одним из самых эффективных. Учет региона сайта делает поисковое продвижение в Яндексе ещё более эффективным при раскрутке сайта в определенном регионе (например, продвижение сайта в Волгограде, вывод в ТОП Москвы и т.д.). Подробнее: Продвижение сайтов в Яндексе

    Цена разработки / продвижения / поддержки

    Хотите быстро узнать цену работ по сайту — отправьте запрос прямо сейчас. Специалисты веб-студии подготовят и предложат Вам лучшие решения с описанием возможных для Вас вариантов. Мы стараемся отвечать на Ваши запросы в течение 24 часов.

    Как подключить шрифт css из папки

    Приветствую, Уважаемые БЭМ-пользователи! Возникла проблема с подключаемыми шрифтами, а точнее с путями при их использовании. В папке common.blocks создал блок fonts/_face и тут складываю все шрифты (font_face_roboto.eot, .ttf, .woff и файл font_face_roboto.scss в котором прописываю правило font-family для модификатора .font_face_roboto). Затем миксую к нужному блоку/элементу mix: [ < block: 'font', mods: < face: 'roboto-regular' >>]. Всё бы отлично - в стили нужный шрифт подключается, но вот пути остаются относительно файла font_face_roboto.scss, который лежит папке common.blocks создал блок fonts/_face, а стили скомпилировались в папку desktop.bundles/index/index.min.css Есть ли какие-либо способы решения данной проблемы? Чтобы пути автоматически менялись, либо нужные шрифты автоматически переносились в нужную папку. Поискав пути решения данной проблемы, так понял, что для этого есть borschik, но я использую сборку на gulp, возможно ли как-то настроить всё это дело? Спасибо!

    Комментарии: 6
    7 years ago
    7 years ago

    Нет, к сожалению не работает. И еще вопрос, есть какой-либо готовый сборщик проекта на gulp, типа вот такого https://ru.bem.info/toolbox/enb/enb-bem-techs/ Т.е. для того, чтобы подготовить проект для человека вообще не знающего про БЭМ.

    7 years ago

    Значит, рейрайт урлов для шрифтов будем чинить.

    А вопрос про подготовку проекта я не понял, нужно более подробное описание задачи.

    7 years ago

    Про подготовку проекта: например, запускаем команду gulp-build, и в это время создается папка dist/ а в ней все картинки в папке img/, все шрифты в папке fonts/, библиотеки libs/, стили css/. Может уже есть готовое решение, уже т.к. столько времени убил на такую сборку и еще куча нерешенных моментов, которые тоже потребуют немало времени.

    7 years ago

    У меня та же проблема, удалось починить? Причём проблема наблюдается только на Windows. На Mac у меня всё ок

    7 years ago

    @bonjovi текущая команда на Windows не работает, так что было бы здорово, если бы пользователи из сообщества хотя бы сформулировали конкретные issues, а в идеале — прислали пулл-реквесты с исправлениями.

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

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