Перейти к содержанию
Nat7

[РЕШЕНО] Проблемы с @font-face, слетают все настройки стиля

Рекомендуемые сообщения

Пытаюсь сделать, чтобы нестандартные шрифты отображались на мобильных.

Сгенерировала их через http://www.fontsquirrel.com/, создала в каталоге template папку fonts, кинула туда шрифты

 

Вставляю в stylesheet.css

@font-face {

    font-family: 'lucida_sans_unicoderegular';
    src: url('../fonts/l_10646-webfont.eot');
    src: url('../fonts/l_10646-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/l_10646-webfont.woff2') format('woff2'),
         url('../fonts/l_10646-webfont.woff') format('woff'),
         url('../fonts/l_10646-webfont.ttf') format('truetype'),
         url('../fonts/l_10646-webfont.svg#lucida_sans_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;

В итоге весь стиль сайта слетает  =(

Как только удаляю строчку @font-face {, все становится норм, но шрифты все равно не отображаются

post-687940-0-94896000-1413378144_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

может так:

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А скобку закрываете? В стилях указываете шрифт где он используется?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Шрифт используется в шапке для номера телефона

вот так в целом выглядит

#big_mobile {
font-size: 19px;
color: #ff524c;
@font-face {
    font-family: 'lucida_sans_unicoderegular';
    src: url('../fonts/l_10646-webfont.eot');
    src: url('../fonts/l_10646-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/l_10646-webfont.woff2') format('woff2'),
         url('../fonts/l_10646-webfont.woff') format('woff'),
         url('../fonts/l_10646-webfont.ttf') format('truetype'),
         url('../fonts/l_10646-webfont.svg#lucida_sans_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

попробуйте вот так:

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


#big_mobile {
font-size: 19px;
color: #ff524c;
font-family: "lucida_sans_unicoderegular";
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

font-face вставьте в самое начало файла, если вставляете как указано выше.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

#big_mobile {

 

скобка не закрыта

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

в самое начало файла еще хуже, уже пробовала

а вот вставить перед  #big_mobile {  - кажется сработало, спасибо!

сейчас все проверю и отпишусь

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

в самое начало файла еще хуже

вы разберитесь со скобками сначала.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

вы разберитесь со скобками сначала.

со скобками у меня все в порядке, в чем я должна разобраться?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

судя по куску кода который Вы показали - явно не порядок, я писал выше

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

попробуйте вот так:

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


#big_mobile {
font-size: 19px;
color: #ff524c;
font-family: "lucida_sans_unicoderegular";
}

 

Нет, так тоже не работает.

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

Ничего не понимаю, в чем проблема?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Дайте ссылку на ваш сайт

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

нет в стилях @font-face

я убрала @font-face и вернула как было, пока не разобралась как сделать

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

я убрала @font-face и вернула как было, пока не разобралась как сделать

 Плохо, что вы убрали!!! 

 

С кодом вроде бы все правильно, возможные варианты по моему мнению:

  1. Пропишите абсолютные пути к вашим шрифтам
  2. Попробуйте вставить не в css,  а непосредственно в Хедер <slyle> Ваш код </style> (посмотрите что получится)
  3. Возможно браузер просто игнорирует этот код

Я так понял Вам нужен нестандартный шрифт к мобильному телефону в шапке сайта, можно пойти по другому пути:

В хедер вставляем 

<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' rel='stylesheet' type='text/css'>

В CSS вставляем:

#big_mobile {
font-family: 'Lobster', cursive;
font-size: 30px;
}

И по моему ни какой головной боли...

 

Потом можно гугл шрифт заменить на другой ваш

Вот что получилось

post-683955-0-43681100-1413464642_thumb.jpg

 

Вот код подключения этого шрифта из гугл CSS

/* cyrillic */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), url(http://fonts.gstatic.com/s/lobster/v10/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

Ссылка на гугл шрифты http://www.google.com/fonts/#

 

Вот шрифт http://fonts.gstatic.com/s/lobster/v10/c28rH3kclCLEuIsGhOg7evY6323mHUZFJMgTvxaG2iE.woff2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 Я так понял Вам нужен нестандартный шрифт к мобильному телефону в шапке сайта, можно пойти по другому пути:

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

Спасибо за предложенное решение, буду пробовать!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Спасибо за предложенное решение, буду пробовать!

ЧЁТО я ничего уже не понимаю, захожу на ваш сайт с мобильно всё работает, или вы хотите чтобы те шрифты отображались только при заходе с мобильного телефона, а если  заходить на сайт с компа, то шрифты обычные?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ЧЁТО я ничего уже не понимаю, захожу на ваш сайт с мобильно всё работает, или вы хотите чтобы те шрифты отображались только при заходе с мобильного телефона, а если  заходить на сайт с компа, то шрифты обычные?

Чет я тоже уже не понимаю) я заходила с 2х разных мобильных, отображается обычный шрифт Arial везде, никакими Lucida, Dotum и др. не пахнет. Странно. У меня разница очевидна - телефон, меню, цена. И телефон в шапке к тому же вместо красного становится голубым - я так понимаю, это проделки айфона, он его преобразует в ссылку и видимо это не исправить никак. 

Я хочу, чтобы мой сайт одинаково выглядел на всех устройствах, вот и все)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

ЧЁТО я ничего уже не понимаю, захожу на ваш сайт с мобильно всё работает, или вы хотите чтобы те шрифты отображались только при заходе с мобильного телефона, а если  заходить на сайт с компа, то шрифты обычные?

 

post-687940-0-58909600-1413470158_thumb.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Прикрепленные изображения

А где вы этот скрин взяли? у меня все нармально, шрифты такие как и на сайте

 

ВОт скрин с эмулятора оперы мини post-683955-0-13282300-1413471132_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А где вы этот скрин взяли? у меня все нармально, шрифты такие как и на сайте

 

ВОт скрин с эмулятора оперы мини attachicon.gifImage 3.jpg

это скрин с моего айфона

ндааа, я так понимаю у вас даже на компе не отображаются шрифты((  поэтому вы и не видите разницы

у меня это выглядит вот так (сорри за качество, разница вроде видна)

post-687940-0-03771700-1413480085_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

это скрин с моего айфона

ндааа, я так понимаю у вас даже на компе не отображаются шрифты((  поэтому вы и не видите разницы

у меня это выглядит вот так (сорри за качество, разница вроде видна)

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

post-683955-0-46871600-1413488841_thumb.jpg

 

Даже интересно, буду наблюдать за темой, если в голову что придет дельное отпишусь )))

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну вот смотрите у вас в CSS стилях прописано font: 14px Dotum;

#menu a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: inline-block;
padding: 12px 10px;
margin: 0 5px 0 3px;
font: 14px Dotum;
letter-spacing: 1px;
text-transform: uppercase;
}

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

#menu a {
font-size: 13px;
color: #FFF;
text-decoration: none;
display: inline-block;
padding: 12px 10px;
margin: 0 5px 0 3px;
/* font: 14px Dotum; */
font-family: 'Lobster', cursive;
letter-spacing: 1px;
text-transform: uppercase;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.