Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/40: Рейтинг темы: голосов - 40, средняя оценка - 4.88
2 / 2 / 1
Регистрация: 12.08.2017
Сообщений: 110

Не отображаются Google Fonts шрифты на мобильном устройстве

01.05.2018, 20:00. Показов 9152. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Появилась следующая проблема. Подключаю шрифт, поддерживающий кириллицу. На десктопе все выглядит нормально, при изменении размера экрана так же все отображается правильно. Но вот на всех мобильных устройствах, во всех браузерах отображаются не все шрифты от Googl'a. В чем может быть проблема и можно ли ее исправить?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
01.05.2018, 20:00
Ответы с готовыми решениями:

В опере не отображаются шрифты google fonts
Сейчас обнаружил такую проблему первый шрифт в опере работает нормально, а второй вообще не работает <!--шрифты--> <link...

Не работает шрифты Google Fonts
Добрый день. Подскажите, пожалуйста, почему не подключатся шрифты от Google Fonts? В чём проблема? Заранее спасибо. Адрес сайта:...

Как заставить плагин WP Google Fonts отображать кириллические шрифты?
Привет. Как заставить плагин WP Google Fonts отображать кириллические шрифты? Нашел только эту статью ...

8
 Аватар для Амурский
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303
02.05.2018, 05:55
Как подключаете? Локально или с Google?
0
2 / 2 / 1
Регистрация: 12.08.2017
Сообщений: 110
02.05.2018, 10:31  [ТС]
Амурский, @import url("https://fonts.googleapis.com/css?family=PT+Serif+Caption:400,400i")
CSS Stylesheets
0
 Аватар для Амурский
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303
02.05.2018, 11:26
Посоветую подключать в head так:
HTML5
1
<link href="https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif+Caption:400,400i" rel="stylesheet">
0
2 / 2 / 1
Регистрация: 12.08.2017
Сообщений: 110
02.05.2018, 13:03  [ТС]
Амурский, я пробовал хоть как подключать - все равно проблема остается
0
1030 / 682 / 297
Регистрация: 04.04.2013
Сообщений: 2,751
02.05.2018, 13:15
Возможно это связано с тем, что РКН заблокировал множество ip гугла. Сейчас такие проблемы на многих сайтах. Найдите нужный вам шрифт в интернете, сгенерируйте его через web font generator и подключите его локально через font-face.
0
 Аватар для Амурский
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303
02.05.2018, 15:13
https://google-webfonts-helper... com/fonts/
Здесь все шрифты Google можно скачать и подключить локально.

Добавлено через 34 секунды
Плюс CSS сниппет для подключения генерит
0
 Аватар для Mailo
178 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,313
04.05.2018, 01:40
Не зря видать я свою библиотеку шрифтов собираю и только с fontface работаю, кстати как это подключить гуглшрифт локально, а не из интернета?
0
 Аватар для Амурский
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303
04.05.2018, 08:22
Ссылка выше, чтобы настроить и скачать шрифты. Важно, если нужна поддержка кириллических шрифтов, в настройках чебокс отметить.

В итоге генерится код. Остается только создать в корне сайта папку fonts и распаковать скачанный архив. Предполагается, что файл стилей находится в папке css. Естественно путь можно свой прописать.

Вот и локальное подключение.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* open-sans-regular - cyrillic_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-cyrillic_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-cyrillic_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-cyrillic_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-cyrillic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-cyrillic_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - cyrillic_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-cyrillic_latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-cyrillic_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-cyrillic_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-cyrillic_latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-cyrillic_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-cyrillic_latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
04.05.2018, 08:22
Помогаю со студенческими работами здесь

Фон на мобильном устройстве
Добрый день. Проблема: фон на мобильном сильно увеличивается и размазывается. На пк все ок. Где поправить?

Данные о мобильном устройстве
Добрый день! Для статистики заходов на страничку, необходимо получить версию OS мобильного устройства, и Ip. И шикарно было бы...

post на мобильном устройстве
скрипт не вылаживаю так он как и все остальные формы пост-отправки да и в браузере нормально работает , а вот если на этот сайт зайти с...

Отображение на мобильном устройстве
Есть вот такой скрпит для отсчета времени(с использованием PHP): &lt;script type='text/javascript'&gt; function timer() { var...

Обычный сайт на мобильном устройстве
Вот этот сайт...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru