Как добавить шрифт в css html
Перейти к содержимому

Как добавить шрифт в css html

  • автор:

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

Чтобы создать неповторимый и красочный дизайн, приходится подключать свои шрифты. В этом уроке научимся подключать любой шрифт. Подключение нового шрифта осуществляется при помощи правила @font-face . В этом правиле, как вы наверно догадались, обязательно должны быть два свойства: имя шрифта и путь к файлу (к шрифту). Следующие примеры будут относительно шрифта Open Sans. Рассмотрим первый пример.

@font-face font-family: 'Open Sans'; 
src: local('Open Sans'),
url('/font/open_sans.ttf') format('truetype');
>

Свойство font-family мы применяем, чтобы указать имя шрифта (далее будем использовать его так: p ). Часть кода local(‘Open Sans’) означает проверку на наличие у пользователя этого шрифта. Если вы не хотите проверять наличие шрифта у пользователя, то можно писать как во втором примере.

@font-face font-family: 'Open Sans'; 
src: url('/font/open_sans.ttf') format('truetype');
>

Третий пример более полный и более кроссбраузерный.

@font-face font-family: 'Open Sans'; 
src: url('open_sans.eot');
src: url('open_sans.ttf') format('truetype'),
url('open_sans.woff') format('woff');
font-weight: normal;
font-style: normal;
>

Другие способы подключения шрифтов

Способ первый (например, берем шрифт с сайта Google), код вставляется в :

Способ второй (вставляется в CSS файл):

@import url('http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic');

CSS Fonts

CSS Fonts — модуль в CSS, который определяет свойства связанные со шрифтами и как шрифтовые ресурсы загружаются. Модуль позволяет вам задать стиль шрифта, вроде font-family, font-size и font-weight, lineheight и варианты отображения знаков, когда для одного доступны сразу несколько

Базовый пример

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

.

p  width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; > 
p> Three hundred years agobr /> I thought I might get some sleepbr /> I stretched myself out onna antique bedbr /> An' my spirit did a midnite creep p> 

Вывод на экран будет следующим:

Различные примеры шрифтов

Вы можете найти множество вариантов шрифтов на v-fonts.com и axis-praxis.org; так же смотрите наше руководство Variable fonts для большей информации по использованию.

Отсылки

Свойства

  • font
  • font-family
  • font-feature-settings
  • font-kerning
  • font-language-override
  • font-optical-sizing
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-variant-position
  • font-variation-settings
  • font-weight
  • line-height

@-правила

  • font-feature-settings
  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • src
  • unicode-range
  • @font-feature-values

Руководство

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

Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде ‘fi’ или ‘ffl’), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вебе специальные свойства и свойства контроля нижнего уровня font-feature-settings . В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.

Спецификации

Specification
CSS Fonts Module Level 4

Работа с шрифтами в CSS. Подключение кастомных шрифтов

Установка шрифта в CSS осуществляется с помощью свойства font-family . В качестве значения мы можем указать как один шрифт, так и несколько, перечислив их через запятую:

body { font-family: "Segoe UI", Arial, sans-serif; }

В этом примере мы для тега установили шрифты в следующем порядке:

  1. Segoe UI;
  2. Arial;
  3. sans-serif.

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

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

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

В случае, когда ни один из заданных шрифтов не найден, будет использоваться тот, который указан в настройках браузера по умолчанию. В Chrome посмотреть, какой шрифт используется по умолчанию можно в разделе «Настроить шрифты»: «Настройки» -> «Внешний вид» -> «Настроить шрифты». Кстати, здесь же его при необходимости можно изменить на другой:

Настройка шрифтов в браузере Chrome

В настройках браузера можно изменить не только общий шрифт по умолчанию, но и шрифты для некоторых общих категорий шрифтов. В основном для serif , sans-serif и monospace . Изменить дефолтный шрифт для других семейств ( fantasy , cursive и так далее) в большинстве случаев нельзя.

Пример, как в очень популярном CSS-фреймворке Bootstrap 5 выполняется установка шрифта для тега и, следовательно, по умолчанию для всех вложенных в него элементов:

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

Шрифты, в названии которых имеется хотя один пробел, должны быть заключены в кавычки. Наприпер: «Segoe UI», «Helvetica Neue» и так далее.

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

Кроме этого в начале указано ключевое слово system-ui . Какой шрифт оно обозначает? Чтобы это понять, рассмотрим какие вообще имеются основные ключевые слова, которые могут использоваться для указания общих семейств шрифтов:

  • system-ui – общее семейство системных шрифтов; оно указывает, что в качестве шрифта будет использоваться системный шрифт операционной системы, но так как разные операционные системы используют разные системные шрифты, то в Windows это будет «Segoe UI», в macOS – «San Francisco», в Android – «Roboto».
  • -apple-system – обозначает, что на устройствах Apple (iPhone, iPad и Mac) нужно использовать системный шрифт операционной системы.
  • serif – шрифт с засечками. Например: Georgia, Times New Roman.
  • sans-serif – шрифт без засечек. Например: Arial, Tahoma, Trebuchet MS, Verdana, San Francisco, Segoe UI.
  • monospace – моноширинный шрифт, то есть такой у которого все символы (глифы) имеют одинаковую ширину. Например: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New.
  • cursive – шрифты, имитирующие почерк. Например: Comic Sans MS, Comic Sans, Apple Chancery, Bradley Hand, Snell Roundhand.
  • fantasy – декоративные шрифты, которые в основном используются для названий, заголовков и так далее. Например: Impact, Luminari, Chalkduster, Jazz LET, Stencil Std.
  • emoji – шрифты, специально предназначенные для отображения эмодзи. Например: Apple Color Emoji, Segoe UI Emoji.

Свойство font-family является наследуемым. Это значит, что при его установке некоторому элеиенту, оно по цепочке вложенности передаётся всем его потомкам.

Наследование свойства font-family

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

body { font-family: Arial, sans-serif; } h1, h2, h3 { font-family: "Times New Roman", serif; }

Размер шрифта (font-size)

В CSS установка размера шрифта осуществляется с помощью свойства font-size .

Например, назначим для

размер шрифта, равный 18px:

p { font-size: 18px; }

Задавать размеры шрифта можно в различных единицах измерения:

  • px – в пикселях;
  • em – относительно размера шрифта родителя;
  • rem – относительно размера шрифта элемента ;
  • % – относительно размера шрифта родителя; аналогично em , только значение указывается в процентах;
  • vw , vh , vmin , vmax – относительно viewport;

Другие единицы измерения ( mm , cm , pt , pc ) сейчас практически не используются.

Кроме использования единиц измерения, задавать размер тексту можно ещё с помощью следующих ключевых слов:

  • xx-small (9px);
  • x-small (10px);
  • xx-small (13px);
  • medium – начальное значение font-size (обычно 16px);
  • large (18px);
  • x-large (24px);
  • xx-large (32px);
  • xxx-large (48px).

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

Кроме этих ключевых слов имеются ещё два: smaller и larger . Они позволяют сделать размер шрифта немного меньше или больше, чем у родителя.

Насыщенность шрифта (font-weight)

Установка насыщенности шрифту (толщины букв) в CSS осуществляется с помощью свойства font-weight :

/* установим жирный текст для всех элементов с классом title */ .title { font-weight: bold; }

Задать толщину тексту можно с помощью числа или ключевого слова. Список значений от самого тонкого до самого жирного начертания:

  • 100 – тонкое;
  • 200 – сверхсветлое;
  • 300 – светлое;
  • 400 или normal – стандартное (значение по умолчанию);
  • 500 – среднее;
  • 600 – полужирное;
  • 700 или bold – жирное;
  • 800 – сверхжирное;
  • 900 – тяжёлое.

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

Например, установим заголовкам стандартное начертание текста:

h2 { font-weight: normal; }

На этом рисунке приведены начертания стандартного шрифта «Segoe UI» от 100 до 900.

Управление насыщенностью шрифта в CSS с помощью свойства font-weight

Как видите, от 100 до 300 этот шрифт имеет одинаковое начертание. Также оно не отличается в диапазонах: 500-600 и 800-900.

Например, установим заголовкам внутри .card среднюю толщину букв тексту:

.card h2 { font-weight: 500; }

Кроме абсолютных значений у font-weight имеются ещё относительные: lighter и bolder . С помощью них мы можем установить соотвественно более тонкое или толстое начертание шрифту, чем то, которое имеется у его родителя:

/* в элементах , расположенных непосредственно в 

, текст будет на один уровень меньше по жирности, чем у родительского элемента */ p > span { font-weight: lighter; }

На практике относительные значения bolder и lighter практически не используются.

Стиль шрифта (font-style)

С помощью свойства font-style мы можем установить начертание шрифта:

  • normal – обычное (значение по умолчанию);
  • italic – курсивное;
  • oblique – наклонное;
  • oblique 14deg – с указанием угла наклона текста.

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

Допустимые значения — это градусы от -90deg до 90deg включительно.

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

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

По факту в font-family мы указываем не сам шрифт, а его семейство. Семейство – это полный набор стилей, а стиль – это отдельный и конкретный шрифт в этом семействе. Например, семейство «Roboto» состоит из следующих стилей (шрифтов):

Список шрифтов из которых состоит семейство шрифтов Roboto

Поэтому, когда браузер применяет стиль, ему нужно знать не только семейство, но и такие свойства как font-style (начертание) и font-weight (насыщенность).

Кроме этого, стоит отметить про новый шрифтовой формат — вариативные шрифты (variable fonts). До их появления каждый стиль реализовывался как отдельный файл шрифта. В случае вариативных шрифтов все стили могут содержаться в одном файле. Кроме этого, описание вариативных шрифтов может сопровождаться кроме font-style и font-weight ещё другими свойствами. Например, font-variant , font-stretch и так далее. Но эти шрифты не так популярны и в этой теме мы их рассматривать не будем.

Пример подключения шрифта «Roboto» к странице и установка его по умолчанию в качестве базового шрифта для сайта:

/* подключение шрифта Roboto */ @font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("/assets/fonts/roboto-regular.woff2") format("woff2"); } /* установка Roboto в качестве основного шрифта */ body { font-family: Roboto, sans-serif; }

Деректива @font-face должна обязательно содержать следующие два свойства:

  • font-family – семейство шрифтов, к которому относится этот вариант шрифта (при этом данное название необязательно должно соотвествовать настоящему имени шрифта);
  • src – один или несколько источников, из которых браузер может взять данный шрифт.

Свойство font-family нужно для того, чтобы мы могли потом использовать этот шрифт по данному имени. Как например, мы это сделали в .

В свойстве src источник можно определять с помощью функции local() и url() . Функция local() предназначена для поиска шрифта на устройстве пользователя по его имени, а url() – для загрузки шрифта из файла по указанному URL-адресу. Этот файл в данном формате должен быть доступен по указанному адресу.

Очень часто local() и url() используют вместе. Это позволяет, если доступен шрифт на устройстве поользователя, то использовать его. Если его нет, то загрузить его с сервера по указанному URL:

@font-face { font-family: "Roboto"; /* браузер сначала попробует найти шрифт на устройстве пользователя по имени Roboto */ src: local("Roboto"), /* если не получилось, то попробует найти его на устройстве пользователя по имени Roboto-Regular */ local("Roboto-Regular"), /* если не получилось, то загрузит его с сервера по указанному URL */ url("/assets/fonts/roboto-regular.woff2") format("woff2"); }

В этом примере с помощью format() мы указали формат этого шрифта. В данном случае «woff2» – Web Open Font Format. Данный формат поддерживают все современные браузеры. Использовать какие-то другие форматы не нужно. Но, если нужна поддержка старых браузеров, то тогда нужно добавить другие форматы шрифтов, которые они поддерживают. Например, woff, ttf или ещё какие-то другие:

@font-face { font-family: "Roboto"; src: local("Roboto"), local("Roboto-Regular"), url("/assets/fonts/roboto-regular.woff2") format("woff2"), /* если шрифт не доступен или не подерживается woff2, то загрузит woff */ url("/assets/fonts/roboto-regular.woff") format("woff"), /* если шрифт не доступен или не подерживается woff, то загрузит ttf */ url("/assets/fonts/roboto-regular.ttf") format("ttf"), }

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

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

Например, для того чтобы браузер для отрисовки курсивного текста ( font-style: italic ) с насыщенностью 400 ( font-weight: 400 ) использовал соотвествующую версию шрифта нужно добавить ещё один @font-face :

/* шрифт Roboto для стандартного начертания */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(/assets/fonts/roboto-regular.woff2) format('woff2'); } /* шрифт Roboto для курсива */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: local('Roboto Italic'), local('Roboto-Italic'), url(/assets/fonts/roboto-italic.woff2) format('woff2'); }

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

Если мы хотим, чтобы для жирного начертания браузер тоже использовал соотвествующую версию шрифта, то её также необходимо добавить с помощью @font-face к уже 2 имеющимся:

/* для жирного начертания */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(/assets/fonts/roboto-bold.woff2) format('woff2'); }

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

Google Fonts – это бесплатный сервис, с помощью которого можно очень просто подключить на страницу нестандартный шрифт. Google Fonts содержит более 1500 семейств шрифтов и все они имеют открытый исходный код.

Наиболее популярными семействами на этом сервисе являются: Roboto, Open Sans, Noto Sans, Montseratt, Lato, Poppins, Inter, Oswald и так далее.

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

Выбор необходимых начертаний в нужных семействах в бесплатном сервисе Google Fonts

После этого скопировать сгенерированный HTML-код и вставить его раздел :

Теперь выбранные шрифты можно использовать в свойстве font-family :

/* по умолчанию для основного текста */ body { font-family: 'Roboto', sans-serif; } /* для заголовков */ h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

Если перейти по ссылке, которую нам даёт Google Fonts, то мы увидим ничто иное как CSS-код, содержащий множество @font-face для подключения каждого конкретного выбранного варианта шрифта.

Содержимое URL-адреса, которую нам даёт Google Fonts

Из интересных свойств, которые мы ещё не рассматривали – это font-display и unicode-range .

Свойство font-display предназначено для настройки поведения текста на странице во время загрузки шрифта. Этому свойству можно установить одно из следующих значений:

  • auto – определяется браузером; в большинстве своём он близок к block ;
  • block – если в течение 3 секунд нужный шрифт не загрузился, браузер его покажет невидимым запасным шрифтом; после загрузки отображение текста будет переключено на него;
  • swap – если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после того как нужный шрифт будет загружен текст будет переключен на него;
  • fallback – если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после этого, если в течение 3 секунд нужный шрифт загрузился, то текст будет переключен на него; но если этого не произошло, текст останется на запасном шрифте;
  • optional – похож на fallback , но в отличие от него здесь период для замены 3 секунды не задан; поэтому решение переключать отображение текста или нет на нужный шрифт остаётся за браузером.

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

Например, такой диапазон символов Unicode используется в Google Fonts для поддержки кириллицы:

/* киррилица */ font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

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

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

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

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

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

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

@font-face // название шрифта(чтобы не запутаться лучше указать название папки со шрифтом)
font-family: «RalewayRegular»;
// адрес шрифта и тип
src: url(«../fonts/RalewayRegular.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
>

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

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

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

@font-face font-family: «RalewayRegular»;
src: url(«../fonts/RalewayRegular.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
>

@font-face font-family: «RalewayBold»;
src: url(«../fonts/RalewayBold.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
>

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

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

@font-face
font-family: «RalewayRegular»;
src: url(«../fonts/RalewayRegular/RalewayRegular.eot»);
src: url(«../fonts/RalewayRegular/RalewayRegular.eot?#iefix») format(«embedded-opentype»),
url(«../fonts/RalewayRegular/RalewayRegular.woff») format(«woff»),
url(«../fonts/RalewayRegular/RalewayRegular.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт за 2 минуты!

Без программистов и дизайнеров, на конструкторе Moguta.CLOUD от 1 850р. в месяц

Доступен перенос сайта на ваш хостинг, при покупке редакции Moguta.CMS «Гипермаркет» с сохранением всех настроек, контента и даже позиций в поисковой выдаче!

Комментарии (10)

Т. 13.02.2023 20:53

Этот способ не работает при попытке подключать шрифты для сайтов/приложений на андроиде. Андроиду нужны полные ссылки!

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

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