Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то пригодится, то берите, мне не жалко.
Google font Open Sans
//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
Google font Roboto
//Добавляем к body или к нужному элементу font-family: 'Roboto', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
Google font Ubuntu
//Добавляем к body или к нужному элементу font-family: 'Ubuntu', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
Google font Montserrat
//Добавляем к body или к нужному элементу font-family: 'Montserrat', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
Google font Cuprum
//Добавляем к body или к нужному элементу font-family: 'Cuprum', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@400;700&display=swap');
Подключить несколько шрифтов можно так:
//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; font-family: 'Roboto', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:ital,wght@0,700;1,300&display=swap');
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….
В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…
Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…
Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица…
Как подключить полный шрифт?
Добрый день, не могу понять почему font-weight работает только в двух режимах: Хотя из этого же браузера открываю google fonts (откуда я его и взял) демонстрацию шрифта и у них все значения работают: Подключаю шрифт в css так:
1. Находите нужный вам шрифт или ближайший, похожий к нему, предварительно можете отфильтровать и выбрать только Cyrillic.
2. Нажимаете на окошко с нужным шрифтом:
3. Нажимаете на кнопку с плюсиком
4. Копируете ссылку:
5. И добавляете ее в плагин «Свой код», в поле «Перед «.
Как добавить?
Чтобы добавить скрипт, перейдите в раздел «Плагины»
Выберите плагин “Свой код”
Код добавляете в поле Код перед
Аналогично предыдущему коду, добавляете код из инструкции ниже в HEAD, сразу после предыдущего скрипта, но предварительно данное CSS свойство нужно добавить в специальные тэги и добавить !important для повышения приоритета собственных стилей.
В итоге получится такая конструкция (Код из Google Fonts + код из инструкции):
Пример в плагине инструкции с шрифтом: ‘Reggae One’, обратите внимание, что у вас будет свое название шрифта в параметре font-family: ‘Название вашего шрифта’ , получить его можно там же, где и код в шаге 4 (cм скриншот ниже). Например смотрим название для шрифта Merriweather
Меняем в коде строчку: font-family: ‘Reggae One’, cursive !important;
на font-family: ‘Merriweather’, cursive !important;
6. Сохраняете изменения в настройках сайта и переходите в редактор нужной страницы. В редакторе, например, у виджета «Текст», указываете класс myFonts.
Публикуете станицу или же выполняете предпросмотр. В результате у текста начинает отображаться выбранный вами шрифт.
Если вы сделали все шаги, но шрифт так и не изменился, в конце инструкции есть самые частые ошибки, которые допускаются в процессе настройки.
Добавить шрифт со стороннего сервиса
Переходим на сайт, который предоставляет шрифты и открываем понравившийся шрифт
На странице шрифта находим ссылку на сам шрифт и открываем его
Копируем все что начинается с @font-face
Теперь добавляем скопированный код в плагин Свой код — Код перед
Как добавить?
Чтобы добавить скрипт, перейдите в раздел «Плагины»
Выберите плагин “Свой код”
Код добавляете в поле Код перед
/*Сначала код который вы скопировали В скопированном коде в поле url нужно заменить http на https */ @font-face < font-family: 'Planet Benson 2'; font-style: normal; font-weight: 400; src: local('Planet Benson 2'), local('PlanetBenson2-Regular'), url(https://allfont.ru/cache/fonts/planet-benson-2_1c08304ee051caae9a4f9ae0611d882e.woff) format('woff'), url(https://allfont.ru/cache/fonts/planet-benson-2_1c08304ee051caae9a4f9ae0611d882e.ttf) format('truetype'); >/*Меняете название 3dumb на название из кода который вы добавили выше, сейчас это будет Planet Benson 2 */ .myFonts *, .myFonts
5. Сохраняете изменения в настройках сайта и переходите в редактор нужной страницы. В редакторе, например, у виджета «Текст», указываете класс myFonts.
Столкнулись с трудностями при подключении?
Все сделал по инструкции, но шрифт не поменялся
Обратите внимание на код плагина, иногда при копировании можно случайно добавить спецсимволы, которые повлияют на работу кода, достаточно их просто удалить или скопировать код предварительно в текстовый блокнот:
Все настроил, а в редакторе шрифт не поменялся
Шрифт загружается на опубликованной странице, проверять нужно на ней, в редакторе он останется таким же
Добавил новый текст в редакторе, а он без установленного шрифта
Не забывайте, что шрифт срабатывает по ранее настроенному классу, каждому текстовому виджету нужно прописать класс если он должен быть с вашим шрифтом.
Как изменить толщину шрифтов через код
Как подключить полный шрифт?
Добрый день, не могу понять почему font-weight работает только в двух режимах: Хотя из этого же браузера открываю google fonts (откуда я его и взял) демонстрацию шрифта и у них все значения работают: Подключаю шрифт в css так:
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Добавлю для себя быстрое подключение шрифтов Google (Open Sans, Roboto, Ubuntu, Montserrat, Cuprum), просто потому что надоело постоянно брать их с сайта fonts.google.com. Если кому-то пригодится, то берите, мне не жалко.
Google font Open Sans
//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
Google font Roboto
//Добавляем к body или к нужному элементу font-family: 'Roboto', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
Google font Ubuntu
//Добавляем к body или к нужному элементу font-family: 'Ubuntu', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
Google font Montserrat
//Добавляем к body или к нужному элементу font-family: 'Montserrat', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
Google font Cuprum
//Добавляем к body или к нужному элементу font-family: 'Cuprum', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@400;700&display=swap');
Подключить несколько шрифтов можно так:
//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; font-family: 'Roboto', sans-serif; //Добавляем в //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:ital,wght@0,700;1,300&display=swap');
Например, нам нужно к кнопке добавить класс fancybox-inline, чтобы кнопка вызывала форму в поп-ап окне….
В этой статье мы создадим офф-скрин меню с помощью CSS переходов. Изначально меню будут скрыты…
Чтобы любое видео подстраивалось под размеры окна браузера, добавим пару правил в CSS и один…
Больше текста напишу позже, а пока: добавьте в файл скриптов: Добавьте в файл стилей: Таблица…
Команда font-face — подключение пользовательского шрифта
Команда @font-face предназначена для отображения текста на веб-страницах, загружаемых с удаленного сервера или с локального компьютера пользователя. Если в команде объявлена функция local , то поиск шрифта будет проводиться в первую очередь на данном локальном компьютере. Если же шрифт не найден, будет использоваться шрифт, указанный в функции url .
Синтаксис
Пример
Давайте найдем шрифт на нашем локальном компьютере:
