Не подлючается шрифт Dymaxion Script

[SnowSilver]

Почему браузер не отображает шрифт 'Dymaxion Script' ?    Скачивал несколько, но безуспешно

@font-face {
            font-family: 'Dymaxion Script';
            src: url('../fonts/DymaxionScript.ttf');
        }
        div {
            font-family: 'Dymaxion Script';
            font-size: 50px;
        }

 

DymaxionScript.ttf

[Димитрий]

  On 11/12/2017 at 11:51 AM, SnowSilver said:

Почему браузер не отображает шрифт 'Dymaxion Script' ?    Скачивал несколько, но безуспешно

@font-face {
            font-family: 'Dymaxion Script';
            src: url('../fonts/DymaxionScript.ttf');
        }
        div {
            font-family: 'Dymaxion Script';
            font-size: 50px;
        }

 

DymaxionScript.ttfFetching info...

Expand  

Так пробуй:

 

@font-face {
  font-family: 'Dymaxion Script';
  src: url('../fonts/DymaxionScript.ttf') format('truetype');
}

 

[Hasiev]

Может быть путь неправильный? Что в консоли пишет?

[SnowSilver]

  On 11/12/2017 at 2:14 PM, Димитрий said:

Так пробуй:

 

@font-face {
  font-family: 'Dymaxion Script';
  src: url('../fonts/DymaxionScript.ttf') format('truetype');
}

Попробовал, не помогло

 

  On 11/12/2017 at 3:00 PM, Hasiev said:

Может быть путь неправильный? Что в консоли пишет?

Expand  

Путь правильный, в консоли ничего

 

Expand  

 

DymaxionScript.ttf

index.html

[Hasiev]

У Вас ошибка, в div-блоке был указан шрифт - 'DymaxionScript', а в @font-face, - 'Dymaxion Script' .. Исправление не привело к успеху, консоль выдает: 

  Reveal hidden contents

Failed to decode downloaded font
OTS parsing error: overlapping tables

 

Если кто-то знает, подскажите в чем проблема. 

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

Edited November 12, 2017 by Hasiev

[Димитрий]

тогда тут посмотри: https://toster.ru/q/267732

[SnowSilver]

  On 11/12/2017 at 6:29 PM, Димитрий said:

тогда тут посмотри: https://toster.ru/q/267732

Expand  

попробовал сконвертировать шритф здесь: http://www.font2web.com/

и действительно, заработало, ура!!! НО...

после конвертации "dymaxionscript.ttf" мне в архиве выгрузилось аж в 4 форматах этот шрифт: otf, svg, ttf, woff

там даже html файл демонстрация есть шрифта, после конвертации...

 

в css файле следующее:

 

@font-face {
    font-family: 'Conv_dymaxionscript';
    src: url('fonts/dymaxionscript.eot');
    src: local('☺'), url('fonts/dymaxionscript.woff') format('woff'), url('fonts/dymaxionscript.ttf') format('truetype'), url('fonts/dymaxionscript.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

НО, если я закомментирую "url('fonts/dymaxionscript.woff') format('woff')", то отображение текста будет стандартным шрифтом... Почему??? я это стал проверять, чтобы убедиться, что в формате "ttf" - который изначально не работал, заработал... Да и "svg" шрифт получается тоже не работает, браузер даже не подгружает эти шрифты

И еще, там есть подключение src: url('fonts/dymaxionscript.eot'); - этого файла не оказалось, может ошибка какая возникла при конвертации и поэтому его нет...

 

 

[Димитрий]

  On 11/19/2017 at 6:50 AM, SnowSilver said:

попробовал сконвертировать шритф здесь: http://www.font2web.com/

и действительно, заработало, ура!!! НО...

после конвертации "dymaxionscript.ttf" мне в архиве выгрузилось аж в 4 форматах этот шрифт: otf, svg, ttf, woff

там даже html файл демонстрация есть шрифта, после конвертации...

 

в css файле следующее:

 

@font-face {
    font-family: 'Conv_dymaxionscript';
    src: url('fonts/dymaxionscript.eot');
    src: local('☺'), url('fonts/dymaxionscript.woff') format('woff'), url('fonts/dymaxionscript.ttf') format('truetype'), url('fonts/dymaxionscript.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

 

НО, если я закомментирую "url('fonts/dymaxionscript.woff') format('woff')", то отображение текста будет стандартным шрифтом... Почему??? я это стал проверять, чтобы убедиться, что в формате "ttf" - который изначально не работал, заработал... Да и "svg" шрифт получается тоже не работает, браузер даже не подгружает эти шрифты

И еще, там есть подключение src: url('fonts/dymaxionscript.eot'); - этого файла не оказалось, может ошибка какая возникла при конвертации и поэтому его нет...

 

 

Expand  

 

 

Их на сколько я знаю нужно проверять на своем браузере (то есть что поддерживается).
Вот тут глянь: 

Если я правильно понимаю: 
svg - для старых apple продуктов
woff - для новых браузеров 
eot - для ie начиная 6 версии
ttf - для старых Android

 

Я этим генератором пользуюсь: 
https://www.fontsquirrel.com/tools/webfont-generator

Еще этим сайтом: (чтобы узнать поддержку)
https://caniuse.com/

 

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

Edited November 19, 2017 by Димитрий

[SnowSilver]

  On 11/19/2017 at 7:31 AM, Димитрий said:

 

 

Их на сколько я знаю нужно проверять на своем браузере (то есть что поддерживается).
Вот тут глянь: 

Если я правильно понимаю: 
svg - для старых apple продуктов
woff - для новых браузеров 
eot - для ie начиная 6 версии
ttf - для старых Android

 

Я этим генератором пользуюсь: 
https://www.fontsquirrel.com/tools/webfont-generator

Еще этим сайтом: (чтобы узнать поддержку)
https://caniuse.com/

 

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

Expand  

Спасибо за информацию. Тогда понятно почему не работает:) Исходник приложил еще раз. 

И еще попутно вопрос про шрифты. Я правильно понимаю, что правильнее подключать шрифты для разных начертаний?

Например для DymaxionScript

• обычный
•  полужирные
•  курсив
•  полужирные 

не зря же делают шрифту разные начертания отдельно, которые подключаются отдельно

так то по идеи можно было просто подгрузить один(например DymaxionScript c обычным начертанием) и свойсвами font-weight, font-italic задавать нужное начертание

я как то через font-face подключил нестандартный шрифт, задал ему font-weight: bold и применил свойство  -webkit-text-stroke для задания контура тексту. И заметил, что полужирность в хроме и мазиле сильно отличаются.

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

Edited November 19, 2017 by SnowSilver

[Димитрий]

  On 11/19/2017 at 4:56 PM, SnowSilver said:

Спасибо за информацию. Тогда понятно почему не работает:) Исходник приложил еще раз. 

И еще попутно вопрос про шрифты. Я правильно понимаю, что правильнее подключать шрифты для разных начертаний?

Например для DymaxionScript

• обычный
•  полужирные
•  курсив
•  полужирные 

не зря же делают шрифту разные начертания отдельно, которые подключаются отдельно

так то по идеи можно было просто подгрузить один(например DymaxionScript c обычным начертанием) и свойсвами font-weight, font-italic задавать нужное начертание

я как то через font-face подключил нестандартный шрифт, задал ему font-weight: bold и применил свойство  -webkit-text-stroke для задания контура тексту. И заметил, что полужирность в хроме и мазиле сильно отличаются.

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

Expand  

Для каждой начертании (font-style: normal/italic), и даже насыщенности (font-weight: 100-900) нужен свой шрифт (то есть отдельный файл). 

Насчет отличии в Firefox и Chrome - каждый браузер по своему все делает.
Сайты не должны отображаться в каждом браузере одинаково!

 

 

Edited November 19, 2017 by Димитрий
Для твоего шрифта не нашел других начертаний, по этому сделал на примере шрифта roboto (тут скачай посмотри) http://rgho.st/7sZbfsK5t чего не понятно спрашивай, а лучше кинь ник с скайпа, если есть микро, и желание продолжать учится.