Проблема с подключением веб-шрифта

[CrystalCrystal]

Привет, друзья. Я тут это... с новой просьбой о помощи 😊.

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

Ошибок в коде не вижу, и валидацию проходит с возгласами "Congratulations". Если загрузить шрифт в директорию сайта и указать на него относительным путем - браузер реагирует корректно. В чем же проблема тогда?

Собственно, код: https://jsfiddle.net/m657ywdt/

[Full-R]

26 минут назад, CrystalCrystal сказал:

Привет, друзья. Я тут это... с новой просьбой о помощи 😊.

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

Ошибок в коде не вижу, и валидацию проходит с возгласами "Congratulations". Если загрузить шрифт в директорию сайта и указать на него относительным путем - браузер реагирует корректно. В чем же проблема тогда?

Собственно, код: https://jsfiddle.net/m657ywdt/

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

Это скорее всего CORS, который подставил всех. 

Для Apache можно сделать вот так:

Header set Access-Control-Allow-Origin "*"

Для этого в .htaccess нужно добавить код выше.

Чтобы это заработало запустите локальный сервер Скачать / Open Server Panel (ospanel.io)

Если вы работаете с Node.js - то я не подскажу вам как это решить. Там nginx, который обычно садится на Apache и ни чего не делает. По этому его до сих пор ни один нормальный человек не ставит и настраивать не умеет.

В данном конкретном случае, в последнее время, стоит не брать сторонние шрифты так как они не только доставляют неудобства в разработке, но и не поддерживают весь UTF-8.

Достаточно подключить просто TTF или формат взять OTF(смотрите онлайн конвертеры). Поскольку Mozilla Firefox со своей ненавистью к проприетарному по подохла - можете смело удалить WOFF и оставить только TTF.

[CrystalCrystal]

Full-R

Мне сразу стоило уточнить, что это упражнение с учебника по HTML/CSS. Задача конкретно в том, чтобы подключить шрифты посредством двух предоставленных ссылок в книге. Серверную часть пока не изучаю.

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

31 минуту назад, Full-R сказал:

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

В таком случае, как мне лучше продемонстрировать код?

Edited February 3, 2021 by CrystalCrystal

[Full-R]

4 минуты назад, CrystalCrystal сказал:

Full-R

Мне сразу стоило уточнить, что это упражнение с учебника по HTML/CSS. Задача конкретно в том, чтобы подключить шрифты посредством двух предоставленных ссылок в книге. Серверную часть пока не изучаю.

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

В таком случае, как мне лучше продемонстрировать код?

Я вам написал почему. Браузер с недавнего времени блокирует все подключения к внешним ресурсам, если не они не перечислены в специальных заголовках сервера. Это сделано для защиты от XSS. 

Значит на production сервере не подключает ресурсы к CDN, а делайте себе по относительной ссылке. Разбираться с этим придется в любом случае(там много нюансов).

Код лучше продемонстрировать вот так(скачать быстрее, чем ждать пока фидлы загрузятся):

example.zip

[CrystalCrystal]

35 минут назад, Full-R сказал:

Значит на production сервере не подключает ресурсы к CDN, а делайте себе по относительной ссылке. Разбираться с этим придется в любом случае(там много нюансов).

Да, пожалуй, укажу относительной ссылкой и двину по книге дальше. Спасибо.

[Full-R]

22 минуты назад, CrystalCrystal сказал:

Да, пожалуй, укажу относительной ссылкой и двину по книге дальше. Спасибо.

Пожалуйста. Но с сервером лучше разберитесь. Если вы это не просто так делаете, а хотите развиваться - пора сразу определяться с back-end стеком c которым у вас будет симбиоз. Там и шаблонизаторы и реактивность(шаблонизаторы), работа сервера в кратце, кэширование, обработка предварительных данных сгенерированных сервером. Свой велосипед сразу не создать так как нет опыта в сравнении с другими велосипедами, а развиваться просто версталой не интересно и даже не выгодно.

Edited February 3, 2021 by Full-R

[CrystalCrystal]

Full-R

Пока смотрю в сторону front-end направления, все-таки разработка визуальной составляющей мне несколько ближе. Но понимаю, что на данный момент слишком мало знаю о веб-разработке в целом, чтобы определится окончательно.

[Full-R]

1 час назад, CrystalCrystal сказал:

Full-R

Пока смотрю в сторону front-end направления, все-таки разработка визуальной составляющей мне несколько ближе. Но понимаю, что на данный момент слишком мало знаю о веб-разработке в целом, чтобы определится окончательно.

Вы смотрите просто на разработку web или вам интереснее направление именно анимации и приложений? Web разный.

Для кого-то предел мечтаний клепать SPA сайты на одну страничку, знать HTML, CSS и немного JavaScript.

Для кого-то перспективнее осмыслить 3D контекст и поверить в то что на том же JavaScript в браузере можно делать даже игры. Но это уже не HTML и CSS - это другое понимание.

Кто-то начинает ждать легкости и удачи от того, что применит один стек на все. Например, научится клиентскому JavaScript и вклинится с этим на сервер(таких сейчас большинство). Fullstack такого рода все же уступает другим fullstack так как JavaScript плохо работает с базами данных и BigData.

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

3D\2D интересно, но нужен несколько иной склад ума, а отрасль пока не столь популярна, но уже перспективы появляются.

Backend нужен. Он требуется на любой работе почти всегда. А это как минимум интеграция верстки в систему. Такие знания никогда не бывают лишними.

 

Edited February 3, 2021 by Full-R

[CrystalCrystal]

Full-R

17 часов назад, Full-R сказал:

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

Вот ну не поверю, что UX/UI дизайнеры больше не требуются в большинстве серьезных проектов.

[Full-R]

5 часов назад, CrystalCrystal сказал:

Full-R

Вот ну не поверю, что UX/UI дизайнеры больше не требуются в большинстве серьезных проектов.

Всегда требовались и будут требоваться. Направление неплохое. Я еще много чего не перечислил 😉