@ font-face не работает

Question

Не знаю почему, но шрифт не отображается. Пожалуйста, помогите.

CSS (в папке css): style.css:

@font-face { 
 font-family: Gotham;
 src: url(../fonts/gothammedium.eot);
 src: local('Gotham-Medium'),
 url(../fonts/Gotham-Medium.ttf) format('truetype'); 
} 

a { 
 font-family:Gotham,Verdana,Arial; 
}

Answer 1

Двойной период (..) означает, что вы поднимаетесь на одну папку и затем ищете папку за косой чертой. Например:

Если ваш index.html находится в папке html/files, а шрифты - в html/fonts, то все нормально (потому что вам нужно вернуться на одну папку назад, чтобы перейти к /fonts). Если ваш index.html в html, а ваши шрифты в html/fonts, то вы должны использовать только один период.

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

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

Редактировать: Забудьте .eot часть, я пропустил файл .ttf в вашем CSS.

Попробуйте следующее:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

Answer 2

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

Во-вторых, поскольку каждый браузер ожидает другой тип шрифта, я бы использовал Font Squirrel для загрузки вашего шрифта, а затем сгенерировал дополнительные файлы и необходимые CSS.http://www.fontsquirrel.com/fontface/generator

И, наконец, версии Firefox и IE не позволяют загружать шрифты между доменами.Вам может потребоваться изменить конфигурацию Apache или .htaccess (заголовок Access-Control-Allow-Origin "*")

Answer 3

У меня возникла такая же проблема, и я решил поделиться своим решением, так как не видел, чтобы кто-то специально решал эту проблему.

Проблема была в том, что я не использовал правильный путь. Мой CSS выглядел так:

@font-face {
font-family: 'sonhoregular';
src: url('fonts/vtkssonho-webfont.eot');
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
     url('fonts/vtkssonho-webfont.woff2') format('woff2'),
     url('fonts/vtkssonho-webfont.woff') format('woff'),
     url('fonts/vtkssonho-webfont.ttf') format('truetype'),
     url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;

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

@font-face {
font-family: 'sonhoregular';
src: url('../fonts/vtkssonho-webfont.eot');
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'),
     url('../fonts/vtkssonho-webfont.woff2') format('woff2'),
     url('../fonts/vtkssonho-webfont.woff') format('woff'),
     url('../fonts/vtkssonho-webfont.ttf') format('truetype'),
     url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg');
font-weight: normal;
font-style: normal;

Надеюсь, это кому-нибудь поможет!

Answer 4

Используя оператор .., вы продублировали путь к папке - и получите что-то вроде этого: /wp-content/themes/wp-content/themes/twentysixteen/fonts/.

Используйте консоль в своем браузере, чтобы увидеть эту ошибку.

Answer 5

У меня недавно была эта проблема, и проблема была в том, что мой веб-сервер не был настроен для обслуживания woff-файлов. Для IIS 7 вы можете выбрать свой сайт, затем выбрать значок MIME Types. Если .woff отсутствует в списке, его необходимо добавить. Правильные значения

File name extension: .woff
MIME type: application/font-woff

Answer 6

Необходимо указать имя файла шрифта / путь в кавычках.
Например.

url("../fonts/Gotham-Medium.ttf")

или

url('../fonts/Gotham-Medium.ttf')

, а не

url(../fonts/Gotham-Medium.ttf)

Также @FONT-FACE работает только с некоторыми файлами шрифтов.: o (

На всех сайтах, где вы можете загружать шрифты, никогда не говорите, какие шрифты работают, а какие нет.

Answer 7

Я разрабатывал для арабского клиента, и у меня возникла такая же проблема после использования генератора шрифтов для создания моих шрифтов.Ни один из шрифтов, которые я генерировал, не работал.

Оказалось, что в «Расширенных настройках» генератора был параметр, который мне нужно было выбрать, который бы использовал не только глифы западного языка (предварительно выбранный параметр).

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

Приветствия

Answer 8

попробуйте поместить ниже HTML в заголовок тега. Это сработало для меня.

 <title>ABC</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 9

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

Полное описание и пример решения этой проблемы можно найти здесь: - http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Answer 10

Не знаю точно, в чем ваша проблема, но попробуйте следующее:

1. Существуют ли файлы шрифтов?
2. Вам нужны кавычки вокруг URL-адресов?
3. Используете ли вы браузер с поддержкой CSS3 ?

Проверьте здесь для примеров, если они не работают для вас, то у вас есть другая проблема

Edit:

У вас есть куча повторных объявлений в вашем источнике, это работает?

@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); }

a { font-family:Gotham,Verdana,Arial; }