Тёмный

How to use custom fonts in WordPress & Elementor with Astra and any other theme 

WPLovers — Wordpress simple & with love
Подписаться 44 тыс.
Просмотров 33 тыс.
50% 1

When you use custom font in WordPress you're opening more space for creativity. Especially when you use the #Elementor page builder. Typography is an important part of the design and people will read the texts on the site if they looks good. You can connect the font in #WordPress in several ways. Two of them are just described in the video.
1. Using the Custom Fonts plugin and it works only with #Astra theme
2. Using the #plugin Font Organizer.
Resources from video:
Google Fonts - fonts.google.com/
Collection of web-fonts - fontstorage.com/en/
Notepad ++ - notepad-plus-plus.org/
Custom Fonts plugin - wordpress.org/plugins/custom-...
Font Organizer plugin - wordpress.org/plugins/font-or...
Join:
Website - wplovers.pw
VK - wplovers
Facebook - wplovers1
Telegram - t.me/wplovers
Twitter - / wplovers2

Наука

Опубликовано:

 

6 окт 2017

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 107   
@DigitalAlex
@DigitalAlex 6 лет назад
Нравятся видео о WordPress и Elementor? Поддержите выпуск новых! wplovers.pw/donate/ Друзья, я очень стараюсь делать хорошие, понятные уроки и это занимает целую прорву времени. В то время, пока я записываю и монтирую видео, я мог бы заниматься другой работой, но так я помогаю очень малому количеству людей. Записывая уроки для массовой аудитории, я получаю возможность помочь сразу большому количеству людей и это здорово! Поддержать WPlovers wplovers.pw/donate/ Более того, хочется делать больше обзоров на платные плагины и темы. К сожалению, но не все разработчики соглашаются предоставить их для теста бесплатно и приходится выделять деньги из собственного кармана. Я буду очень признателен, если вы поддержите проект WPlovers. Поможет любая, даже малая сумма. Спасибо! wplovers.pw/donate/
@user-xn6jf8ul1r
@user-xn6jf8ul1r 6 лет назад
Спасибо , супер все понятно.
@mrgreen2933
@mrgreen2933 5 лет назад
Плагин font organizer закрыт как год. Можно обновленное видео?
@noiseless6800
@noiseless6800 5 лет назад
Для тех кто как я смотрит это в 2019. Работает уже не только с темой Astra и плагин раскачали уже, запрос Custom Fonts сразу находит.
@GOzALLzOUT
@GOzALLzOUT 4 года назад
Огромное спасибо за инструкцию! Намучалась с шрифтами, не понимала почему в Elementor свои шрифты, хотя поставила настройки)
@vladimiralexandrovich6615
@vladimiralexandrovich6615 4 года назад
font-organizer - Этот плагин закрыт 18.03.2019 и более не доступен для загрузки. Причина: Проблема безопасности. Как быть?
@vadimspriggan
@vadimspriggan 5 лет назад
Спасибо, всё очень подробно и без воды
@riksonvd3524
@riksonvd3524 6 лет назад
Отличный канал, как раз сегодня начал пользоваться Elementor'oм и попал на Вас. Подписался, буду ждать новых видео. )
@DigitalAlex
@DigitalAlex 6 лет назад
Вот и хорошо. По Elementor есть целый плейлист с парой десятков видео. Смотрите все =)
@Savchuk71
@Savchuk71 6 лет назад
Это пока единственный и лучший канал по элементору, а элементор лучший конструктор.Понятность контента канала 12 балов(выше не бывает)
@DigitalAlex
@DigitalAlex 6 лет назад
Игорь, благодарю вас за поддержку =)
@hasdas161
@hasdas161 4 года назад
Очень нужная информация! Спасибо!
@user-wm6zo5or9o
@user-wm6zo5or9o 5 лет назад
спасибо за сэкономленное мне время!)
@kiseleff2013
@kiseleff2013 6 лет назад
От души, огромное спасибо дружище!!!
@corallall
@corallall 3 года назад
5:24 о! Если клиент захочет ..поиграть шрифтами.. надо его сюда посылать 😉😉😉😂
@user-ht7on6ed6g
@user-ht7on6ed6g 6 лет назад
Видео уроки просто супер, спасибо большое)
@DigitalAlex
@DigitalAlex 6 лет назад
Благодарю, тёзка =)
@VasiliyKolpaxidis
@VasiliyKolpaxidis 4 года назад
Кратко, понятно и по делу. +1 палец вверх )))
@ThePavdon
@ThePavdon 5 лет назад
Ну ты молодец!!! ЧЕЛОВЕК!!!)
@stasysky4763
@stasysky4763 6 лет назад
Спасибо за ролик!
@user-em3yi6zr7b
@user-em3yi6zr7b 5 лет назад
Супер ! Спасибо большое!
@yuliashor1391
@yuliashor1391 3 года назад
спасибо большое!
@stanislavprokopev
@stanislavprokopev 4 года назад
Есть ли альтернатива плагина Font Organizer???
@Rayder690
@Rayder690 5 лет назад
Супер!
@SCPfan2004
@SCPfan2004 Год назад
А вы знаете почему, может быть такое. 8:53 у меня нету этой вкладки, да и типографики там нету и остальных функций тоже. Почему может быть так?
@antonfedotov6125
@antonfedotov6125 2 года назад
Добрый день. Подскажите, пожалуйста, можно ли в теме Neve подключать шрифты?
@user-ze4wr7gk6g
@user-ze4wr7gk6g 3 года назад
Всем привет! Использую WP+Astra+Elementor/ Сталкиваюсь с проблемой: при загрузке главной страницы происходит подгрузка левого шрифта с последующей сменой на заданный в конструкторе. Кто сталкивался, подскажите, где копать)
@beautygirl2226
@beautygirl2226 6 лет назад
css файл ведь тоже нужен а как его создавать если с компа шрифт хочется добавить?
@alextitomirov7518
@alextitomirov7518 4 года назад
Только если включаешь HTTPS шрифты больше не работают!! что делать?
@tajnaya_doktrina
@tajnaya_doktrina 4 года назад
как Art-Nouveau 1895 шрифт закачать если его нет в гугл фонтс, кастом фонтс?
@vasiliy_pimenov_art
@vasiliy_pimenov_art 2 года назад
Вопрос: Font organaizer был удален из списка плагинов в 2019 году по причине того, что был дырявый и представлял опасность. Я добавил через плагин custom fonts нужные мне шрифты, но они не работают в Elementor. Почему?
@lula3908
@lula3908 3 года назад
Менять шрифто можно только на про версии? У меня вообще нет пункта шрифт при настройке элемента. (Пытаюсь верхнее меню настроить), выравнивание тоже не работает(((
@makellaa
@makellaa 2 года назад
спасибі велике
@user-jv7qd8be7d
@user-jv7qd8be7d 9 месяцев назад
6:40 методы подключения шрифтов
@wsmith13
@wsmith13 5 лет назад
Увы, Font Organizer разработчики закрыли ((
@user-lu4go1oi6t
@user-lu4go1oi6t 6 лет назад
Отличное видео. 1) Но еще хотелось бы узнать возможность подключить шрифт для любой темы, без использование сторонних плагинов. Просто подключить шрифт в style.css делал, но сам elementor его не видит. 2) И еще когда подключаются сторонние шрифты, при загрузке страницы долго появляются шрифты, а вот с шрифтами от google все быстро отобразилось.
@DigitalAlex
@DigitalAlex 6 лет назад
Тарас, я подключал шрифты через font-face в дочерней теме (или собственной, как вариант) и всё работало в Elementor. Записал себе в план, буду делать видео. Значит Google отдаёт файлы шрифтов быстрее, чем хостинг. Тут, как говориться тестировать нужно. Если точнее, то открывается YSlow или Gtmetrix, смотрятся и сравниваются "водопады" загрузки файлов.
@user-bi9pv6il6w
@user-bi9pv6il6w 3 года назад
Font Organizer сейчас закрыт для скачек. Есть какие либо альтернативы?
@Ilya_Severov
@Ilya_Severov 4 года назад
Custom Fonts работает с темой Nave
@Hope-hl9rn
@Hope-hl9rn 5 лет назад
или просто цветной фон сделать ? Благодарю
@DigitalAlex
@DigitalAlex 5 лет назад
На вкладке стиль на секции или колонке делается. Отправил серию уроков, осваивайте.
@gorgodzovski3180
@gorgodzovski3180 6 лет назад
Спасибо за видео :) Есть вопрос. Решил сделать все по простому. Установил Астру. Элементор Про. Сижу и пишу первую статью (запись на блог) в Элементоре. Не могу понять, откуда виджет "текстовый редактор" наследует шрифты? В самой теме у меня стоит шрифт Ubuntiu а основной текст Roboto. Так вот именно в этом виджете выставляю заголовки H1 H2, H3 а они все одного (маленького размера) и Ubuntiu и высота еще не регулируется ((( А виджет "заголовок" отображается как надо )
@gorgodzovski3180
@gorgodzovski3180 6 лет назад
Отбой вопросу :) Психанул и так поклецал, что разобрался :) что где и как выставлять )
@DigitalAlex
@DigitalAlex 6 лет назад
А в глобальных шрифтах копались? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-c6wNDgS3ugw.htmlm58s
@gorgodzovski3180
@gorgodzovski3180 6 лет назад
Да, но не обратил внимание ). Я менял настройки в теме а в конструкторе были свои. И я никак не мог понять, почему ничего не происходит. Пока не установил в конструкторе по умолчанию. Теперь все работает как надо :) Спасибо еще раз )
@DigitalAlex
@DigitalAlex 6 лет назад
Да, можно либо наследовать шрифты из темы, либо задавать глобальные в Elementor. Хорошо, что теперь всё понятно.
@mr.goodman9309
@mr.goodman9309 5 лет назад
Спасибо большое за информацию! Очень полезный плагин, и очень подробный урок в Вашем исполнении. Вот только есть проблемка.. Почему то установленный шрифт не отображается у других пользователей на их ПК и девайсах. Плюс я смортю в Яндекс.Метрике Вебвизор - там тоже почему то появляется какая то "ерунда с засечками". Может так быть, что шрифт не скачивается другим пользователям, у которых этого шрифта по умолчанию нет?
@DigitalAlex
@DigitalAlex 5 лет назад
О каком из плагинов идёт речь?
@mr.goodman9309
@mr.goodman9309 5 лет назад
@@DigitalAlex о первом варианте вашего урока.
@DigitalAlex
@DigitalAlex 5 лет назад
@@mr.goodman9309 Специально перепроверил на шрифте, которого нет в системе. Всё работает. И на компьютере и на смартфоне.
@mr.goodman9309
@mr.goodman9309 5 лет назад
@@DigitalAlex спасибо за ваше участие. Все таки после некоторых тестов, я делаю вывод что дело в кривом отображении вебвизора Яндекс метрики. Он не отображает стили почему то иногда
@TheYad8
@TheYad8 4 года назад
Да, font-organizer закрыт, но скачал Custom Fonts и загрузил левый шрифт. Тема НЕ Astra!
@Hope-hl9rn
@Hope-hl9rn 5 лет назад
Класс!! как поставить фоновые фотки?
@DigitalAlex
@DigitalAlex 5 лет назад
Ну здрасьте приехали. Смотрим базу! Серия уроков: секции, ряды и колонки 1) Структура макета Elementor ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2xW5MMIMd8s.html 2) Настройка макета Elementor ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TCoKT31iMcg.html 3) Стили макета Elementor ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-U1sDOzkAhSw.html 4) Расширенные параметры макета Elementor ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nouEooGK8zs.html
@Hope-hl9rn
@Hope-hl9rn 5 лет назад
Благодарю
@Evilasivle
@Evilasivle 5 лет назад
У меня проблема с применением информации, установил Custom Fonts (стоит Astra) и когда жму на ссылку Custom Fonts в разделе Внешний Вид, меня кидает в просто Страницы и всё, то есть собственно с плагином даже поработать не получается. Не сталкивались с подобным?
@DigitalAlex
@DigitalAlex 5 лет назад
Давно не тестировал этот плагин. Пользуюсь другими способами подключения шрифтов.
@Evilasivle
@Evilasivle 5 лет назад
другими - это которые указаны в этом и других видео по поводу шрифтов?@@DigitalAlex
@DigitalAlex
@DigitalAlex 5 лет назад
@@Evilasivle Да, либо средствами Elementor Pro, либо вообще руками.
@dancegomel
@dancegomel 5 лет назад
Приветствую! то есть получается, что этот плагин уже может не работать?
@Evilasivle
@Evilasivle 5 лет назад
@@dancegomel приветствую! У меня он таки заработал, был конфликт с другим плагином, и я удалил другой плагин, который мне в принципе был не нужен.
@Busyaqek
@Busyaqek 5 лет назад
Error uploading the file: Извините, этот тип файла недопустим по соображениям безопасности. Плагин Font orzanizer. Подскажите как это исправить
@DigitalAlex
@DigitalAlex 5 лет назад
Нужно добавить расширение файла шрифта с помощью этого плагина ru.wordpress.org/plugins/wp-add-mime-types/ и будут загружаться.
@Nikita9555
@Nikita9555 5 лет назад
@@DigitalAlex скачал плагин, проверил форматы, они в нем есть, стало быть должно работать но не работает
@Nikita9555
@Nikita9555 5 лет назад
@@DigitalAlex понял, нужно все равно было добавить эти форматы в плагин, в белое поле введите ttf= font/ttf woff2= font/woff2 woff=font/woff
@DigitalAlex
@DigitalAlex 5 лет назад
@@Nikita9555 хорошо, что разобрались.
@gudok62
@gudok62 5 лет назад
​Никита, спасибо за уточнение. Александр, спасибо за подробный и полезный урок, посмотрев сохранил кучу времени. У меня ещё вопрос. Если с помощью разрешений WP Add Mime Types шрифты удачно загружены и больше не требуется никаких новых, можно плагин WP Add Mime Types деактивировать/удалить?
@LapushkinK
@LapushkinK 5 лет назад
У Астры есть недоработка с Гугл-шрифтами - в fontface не прописывается кириллический субсет. Из-за этого в IE11 кириллица в шрифте не работает. Решается через function.php
@DigitalAlex
@DigitalAlex 5 лет назад
Написал разработчикам.
@LapushkinK
@LapushkinK 5 лет назад
Я немного неточно выразился. Не в сам fontface, а вот тут: подстрока "subset=cyrillic" - это моя дописка, которой не хватает
@DigitalAlex
@DigitalAlex 5 лет назад
@@LapushkinK Да, я понял так как знаю как google шрифты подключаются )) Elementor, кстати, подключает. Похоже на язык WordPress ориентируется. Задал вопрос Астра'навтам. В понедельник ответят.
@VeniaminOberemok
@VeniaminOberemok 6 лет назад
Раньше все время подключал кастомные шрифты через css, решил попробовать плагин Font Organizer - обрадовался, меньше мороки с кодом - но не завелось это дело :( Видео твое посмотрел и все сделал, так сказать, по инструкции - отключил глобальные шрифты в настройках Элементов и все такое... Тема Астра и плагины все такие же. Странно. В чем причина может быть? В идеале, я бы, конечно воспользовался плагином Custom Fonts (ведь я юзаю Астру), но мне надо подключить 2 кастомных шрифта для заголовков и один для основного текста, но я не хочу каждый раз прописывать классы (у них только 2 шрифта можно подключить без танцев с бубном). Хотел, было облегчить себе жизнь, но видимо придется вернуться к ручному методу. Юзал еще потенциально классный плагин Font I Want (достался мне бесплатно от Envato), но тоже почему-то не завелся (( Установлен свежий вордпресс, не на локалке. Я аж прям озадачился не на шутку
@DigitalAlex
@DigitalAlex 6 лет назад
Да, ситуаций может быть масса. Порой удивляет, что всё вроде одинаково, но в одном месте работает, в другом - нет. С Font Organizer ведь тоже класс придётся использовать, если это не "H" и "p". Я с ним тоже немного повозился прежде чем с кэшем нашёл у них руководство. К коде если разбираешься, попробуй отключить кэш-плагины и посмотреть, создаёт ли плагин свой CSS. Там должен Font Face быть прописан и класс с font-family. Хотя бы с этого начни. Возможно, что плагин вообще его не создаёт. Если создаёт, значит нужно дальше копать, а именно: что перебивает его. Возможно, где-то important мешает.
@VeniaminOberemok
@VeniaminOberemok 6 лет назад
У меня чистый вордпресс, никаких кэш плагинов не установлено. Можно, конечно, этим всем заморочится, но не проще ли тогда загрузить шрифты в нужную папку и прописать код в custom css? Риторический вопрос :)
@DigitalAlex
@DigitalAlex 6 лет назад
Вот и я про тоже. C font-face гарантия 100%, что всё будет работать.
@DigitalAlex
@DigitalAlex 6 лет назад
Я нашёл способ подключить шрифты без плагинов (не считая simple css конечно). Немного больше возни, но ничего сложного. Скоро будет видео.
@VeniaminOberemok
@VeniaminOberemok 6 лет назад
Круто, ждем видео )
@user-kn4yw4cb9u
@user-kn4yw4cb9u 6 лет назад
Здравствуйте! мне интересно как сменить шрифт при использовании Элементор и включенной Буквицы! prntscr.com/jq8bha Мне нужны какие нибудь красивые первые буквы буквицы! Спасибо
@DigitalAlex
@DigitalAlex 6 лет назад
Здравствуйте. А в чём проблема для буквицы шрифт выбрать на вкладке Стиль?
@user-yj2bn2ue5q
@user-yj2bn2ue5q 6 лет назад
WP обновлен до последней версии, а шрифты все равно не подгружаются
@DigitalAlex
@DigitalAlex 6 лет назад
Алексей, кэш чистили? Есть ещё способ. Он сложнее, зато 100% работает везде. Ждите видео у меня в план уже записано.
@rich-content
@rich-content 4 года назад
Как удалить неиспользуемые google шрифты, что бы они не подгружались вместе со страницей? А оставить только нужные
@user-xt3gt2kn7d
@user-xt3gt2kn7d 2 года назад
13:00
@2meloff
@2meloff 3 года назад
Вместо ctrl+shift+del можно юзать ctrl+shift+r, так быстрее
@user-kk5ng2px7h
@user-kk5ng2px7h 6 лет назад
Шрифты на сайте больше не скачиваются для сайта..
@DigitalAlex
@DigitalAlex 6 лет назад
Павел, вы имеете в виду этот сайт fontstorage.com/ru/ ? У меня всё скачивается, только что проверил. Однако одно время тоже были проблемы с загрузками из Казахстана. Написал разработчикам и они со временем всё поправили так как было много жалоб.
@user-kk5ng2px7h
@user-kk5ng2px7h 6 лет назад
все, заработало
@dancegomel
@dancegomel 5 лет назад
Доброе время суток! У меня всё только начинается (в вордпресс), поэтому приходится использовать обычную версию и Elementor и Astra. Всё выполнял по этому видео. И всё поставилось. Шрифты загрузились, отобразились. Но я использую не два, а 3 шрифта. И вот тут проблема. Так как я могу использовать в обычных настройках 2 шрифта, то я решил через css использовать третий. прописал как указано CSS шрифты. Но, например, тот же beer-money к нужному тексту в расширенных в элементор в css классы указываю, но это не даёт никакого результата. Текст как был так и остаётся не изменённым по виду. Уже не работает такой способ "это ли не чудо", который Вы описали в видео? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xFfoFEbQe8c.html
@DigitalAlex
@DigitalAlex 5 лет назад
Здравствуйте, Александр! А почему третий шрифт не получается загрузить?
@dancegomel
@dancegomel 5 лет назад
Александр, на самом деле, времени не было написать ответ на свой же вопрос. В целом всё подключилось. Единственное, когда я прописываю css в теме астра по шрифтам, они не работают, когда я их уже в css классы ставлю в elementor. Но как я понял, там поменялось само расположение выбора шрифтов в elementor. И теперь я могу выбирать все шрифты темы астра в типографике блока текстов в elementor. Хотя вставкой названия в css класс было бы быстрее, но для меня главное, что я всё же могу выбрать другой (трений и любой другой) шрифт всё-таки. Благодарю, Александр, за ваши видео!
@user-hh7gg3xi5s
@user-hh7gg3xi5s 6 лет назад
Кнопка upload не работает((( Как поступить?
@DigitalAlex
@DigitalAlex 6 лет назад
В каком плагине делаете, уточните пожалуйста?
@user-hh7gg3xi5s
@user-hh7gg3xi5s 6 лет назад
Elementor. Я попытался вставить три файла шрифта, но кнопка upload просто не работает.
@DigitalAlex
@DigitalAlex 6 лет назад
Для загрузки шрифтов какой плагин?
@user-hh7gg3xi5s
@user-hh7gg3xi5s 6 лет назад
Custom fonts
@DigitalAlex
@DigitalAlex 6 лет назад
Хм, странно, даже не знаю, что подсказать. Проверил и на локальном и в сети, всё работает. Остальные файлы загружаются нормально? Изображения например.
@FusnikS
@FusnikS 5 лет назад
Я не понимаю, зачем объяснять людям про CSS стили. Перед тем, как лезть в веб-разработку, надо выучить хотя-бы язык разметки HTML, и язык веб-стилей CSS
@PoulFly
@PoulFly 5 лет назад
20 минут воды, омг бро в эленемторе есть раздел для загрузки шрифтов, а не костыли те которые показывал ты. elementor.com/blog/custom-fonts/
@mocaronin7548
@mocaronin7548 5 лет назад
жаль только, что платная это услуга
@ByDK
@ByDK 5 лет назад
И этот раздел был добавлен уже после выпуска ролика. Этот ролик вообще уже не актуален, просто прошло время и всё изменилось
@excelmultik
@excelmultik 4 года назад
Плагин Custom Fonts. Этот плагин закрыт 20.04.2020 и более не доступен для загрузки. Причина: Проблема безопасности. Как быть?
Далее
МОЯ НОВАЯ МАШИНА🤍КАК ВАМ?😍
01:01
Main filter..
0:15
Просмотров 1,4 млн
Новая материнка без USB!!
0:39
Просмотров 33 тыс.
iPhone 12 socket cleaning #fixit
0:30
Просмотров 23 млн