Почему мои пользовательские шрифты больше не загружаются онлайн?
Последние несколько лет я создавал собственную базу данных, каталогизирующую мою коллекцию фильмов.
Вы можете получить доступ к сайту по адресу: http://sarahsmovies.com
Для просмотра сайта необходимы имя пользователя и пароль; они есть:
Имя пользователя: Sarah'sBuddy
Пароль: тигр2
Дизайн большинства страниц вдохновлен конкретными фильмами или темами, и на каждой странице используются разные шрифты. Все было хорошо, пока чуть больше недели назад пользовательские шрифты внезапно не перестали загружаться в Интернете. Это произошло примерно в то же время, когда я получил электронное письмо от моего хостинг-провайдера GoDaddy, в котором сообщалось, что мой хостинг был перенесен, хотя несколько представителей GoDaddy заверили меня, что это не источник моей проблемы.
Для справки ниже приведены сценарии HTML и CSS для одной из моих страниц.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Sarah's Movie TYGERRSSSS - Alice in Wonderland (1951)</title>
<link rel = "stylesheet" href = "Stylesheets/Movie_Alice in Wonderland (1951).css">
</head>
<body>
<div id = "div1">
<a href = "javascript: history.go(-1)"><img id = "arrow" src = "Images/AliceInWonderland(1951)Arrow.PNG" /></a>
</div>
<div id = "div2">
<br><br>
</div>
<div id = "div3">
<a href = "index.html"><img id = "home" src = "Images/AliceInWonderland(1951)Home.PNG" /></a>
</div>
<div id = "div4">
<h1>Alice in Wonderland</h1>
</div>
<div id = "div5">
<img src = "Images/AliceInWonderland(1951).jpg" id = "poster"/>
<br><br><br>
<div id = "box2">
<p>Synopsis:</p><br>
<p>Imaginative young Alice tumbles into the whimsical world of Wonderland and must embark on a fantastical adventure to find her way home.</p>
</div>
</div>
<div id = "div6">
<div id = "box1">
<p>Year: 1951</p><br>
<p>Genre: Animation/Adventure/Family</p><br>
<p>Edition/Collection: Special Un-Anniversary Edition DVD</p><br>
<p>Rating: G</p><br>
<p>Runtime: 1 Hour & 15 Minutes</p><br>
<p>Style & Screen Ratio: 2D, Full Screen</p><br>
<p>Subtitles, Closed Captioning, & Languages:</p><br>
<p>Feature:</p><br>
<p>Original Language: English</p><br>
<p>Subtitles: French (Français) & Spanish (Español)</p><br>
<p>Captions: English for the Hearing Impaired</p><br>
<p>Alternate Languages: French (Français) & Spanish (Español)</p><br>
<p>Bonus Material:</p><br>
<p>Original Language: English</p><br>
<p>Subtitles: French (Français) & Spanish (Español)</p><br>
<p>Captions: English for the Hearing Impaired</p><br>
<p>Alternate Languages: none</p>
</div>
</div>
<div id = "bumper">
</div>
<div id = "div7">
<div class = "video-responsive">
<iframe width = "560" height = "315" src = "https://www.youtube.com/embed/vTOYL4-rz1Q?rel=0" frameborder = "0" allow = "accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id = "break">
<br><br>
</div>
<div id = "box4">
<p>Related Titles:</p><br>
<a href = "Movie_Alice in Wonderland (2010).html">Alice in Wonderland (2010)</a><br><br>
<a href = "PageUnderConstruction.html">Alice Through the Looking Glass</a><br><br><br>
<p>Lists Featuring This Movie:</p><br>
<a href = "List_DisneyMovies.html">Disney Movies</a><br><br>
<a href = "List_MoviesFromMake-BelieveLands&FantasyWorlds.html">Movies from Make-Believe Lands & Fantasy Worlds</a><br><br>
<a href = "List_MoviesProducedByWaltDisney.html">Movies Produced By Walt Disney</a><br><br>
<a href = "List_SpringMovies.html">Spring Movies</a><br><br>
<a href = "List_UnitedKingdomMovies.html">United Kingdom Movies</a><br><br>
<a href = "List_WaltDisneyAnimationStudiosMovies.html">Walt Disney Animation Studios Movies</a>
</div>
</div>
<div id = "div8">
<div id = "box3">
<p>Special Features:</p><br>
<p>Feature:</p><br>
<p><b>Bonus Features:</b></p><br>
<p>Reflections On Alice, Deleted Scene: Pig And Pepper, Virtual Wonderland Party, Adventures In Wonderland (Set Top Game), "I'm Odd" (Cheshire Cat Song), & Thru The Mirror (Mickey Mouse Animated Short)</p><br>
<p><b>Sneak Peeks:</b></p><br>
<p>Genuine Treasure: Tinker Bell, Disney Movie Rewards, Old Dogs, My Friends Tigger & Pooh: Super Duper Super Sleuths, James And The Giant Peach - Special Edition, The Black Cauldron - Special Edition, Tinker Bell And The Great Fairy Rescue, Disney Parks, On Blu-ray Disc, & Beauty And The Beast - Diamond Edition</p><br><br><br><br>
<p>Bonus Material:</p><br>
<p>"One Hour In Wonderland"</p><br>
<p>An Alice Comedy: "Alice's Wonderland"</p><br>
<p>Theatrical Trailers - Theatrical Trailer #1 & Theatrical Trailer #2</p><br>
<p>Walt Disney TV Introductions - 1954 Introduction & 1964 Introduction</p><br>
<p>"Operation Wonderland"</p><br>
<p>The Fred Waring Show (Excerpt) - Original Air Date: March 18, 1951</p><br>
<p>Abandoned Content - From Wonderland To Neverland: The Evolution Of A Song, Deleted Storyboard Concept: Alice Daydreams In The Park, & Original Song Demos (<i>"Beware The Jabberwock,"</i> <i>"Everything Has A Useness,"</i> <i>"So They Say,"</i> <i>"Beautiful Soup,"</i> <i>"Dream Caravan,"</i> & <i>"If You'll Believe In Me"</i>)</p><br>
<p>Art Gallery</p>
</div>
</div>
</body>
</html>
CSS:
@font-face {
font-family: DKJambo;
src: url(Fonts/DKJambo.ttf);
}
html {
min-height: 100%;
box-shadow: 0 0 200px rgba(22,0,43,0.9) inset;
}
body {
background-color: #31005c;
}
#div1 {
width: 15%;
float: left;
background-color: rgba(49,0,92,0);
}
#arrow {
width: 100%;
}
#div2 {
width: 70%;
float: left;
background-color: rgba(49,0,92,0);
}
#div3 {
width: 15%;
float: left;
background-color: rgba(49,0,92,0);
}
#home {
width: 100%;
}
#div4 {
width: 100%;
float: left;
background-color: rgba(49,0,92,0);
}
h1 {
color: #ffc345;
text-align: center;
font-family: "DKJambo";
font-size: 960%;
text-shadow: 3px 3px 5px #7d7c7b;
}
#div5 {
width: 38%;
float: left;
background-color: rgba(49,0,92,0);
padding: 1%;
}
#poster {
width: 100%;
box-shadow: 3px 3px 5px #7d7c7b;
}
#box2 {
float: right;
width: 94%;
margin-left: 5%;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
background-color: #4e784c;
text-align: center;
font-family: "DKJambo";
font-size: 345%;
color: #96893b;
box-shadow: 3px 3px 5px #7d7c7b;
}
#div6 {
width: 58%;
float: left;
background-color: rgba(49,0,92,0);
padding: 1%;
}
#box1 {
float: right;
width: 94%;
margin-left: 5%;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
background-color: #ffffff;
text-align: center;
font-family: "DKJambo";
font-size: 235%;
color: #4674d6;
box-shadow: 3px 3px 5px #7d7c7b;
}
#bumper {
width: 100%;
float: left;
background-color: rgba(49,0,92,0);
padding: 0.5%;
}
#div7 {
width: 58%;
float: left;
background-color: rgba(49,0,92,0);
padding: 1%;
}
.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
box-shadow: 3px 3px 5px #7d7c7b;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
#break {
width: 100%;
float: left;
background-color: rgba(49,0,92,0);
}
#box4 {
float: right;
width: 94%;
margin-left: 5%;
padding-top: 2%;
padding-bottom: 4%;
padding-left: 3%;
padding-right: 3%;
background-color: #a84190;
text-align: center;
font-family: "DKJambo";
font-size: 225%;
color: #520044;
box-shadow: 3px 3px 5px #7d7c7b;
}
a:link {
color: #520044;
text-decoration: none;
}
a:visited {
color: #520044;
text-decoration: none;
}
a:hover {
color: #ffc345;
text-decoration: underline;
}
a:active {
color: #520044;
text-decoration: none;
}
#div8 {
width: 38%;
float: left;
background-color: rgba(49,0,92,0);
padding: 1%;
}
#box3 {
float: right;
width: 94%;
margin-left: 5%;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 3%;
padding-right: 3%;
background-color: #b00300;
text-align: center;
font-family: "DKJambo";
font-size: 215%;
color: #ffffff;
box-shadow: 3px 3px 5px #7d7c7b;
}
Я попробовал следующее, чтобы исправить свои пользовательские шрифты:
Проверено, что все мои пользовательские шрифты по-прежнему работают локально.
Заменил все загруженные файлы сайта свежими копиями через FileZilla.
Обращался в службу поддержки клиентов GoDaddy (несколько раз) — каждый раз они уверяли меня, что с их сервером проблем нет и что проблема, должно быть, связана с моими скриптами.
Убедился, что все права доступа к файлу шрифта и каталогу установлены правильно (644 и 755 соответственно).
Обновлены данные @font-face для одной из моих страниц:
@font-face {
font-family: 'ElliotSans-Bold';
src: url('http://www.sarahsmovies.com/Stylesheets/Fonts/ElliotSans-Bold.ttf') format('truetype');
}
- Создан и загружен новый файл .htaccess, содержащий следующий код:
# BEGIN Basic Settings for Fonts
# Ensure the MIME types are correct for font files
<IfModule mod_mime.c>
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
AddType font/ttf .ttf
AddType font/otf .otf
</IfModule>
# Ensure CORS headers are set for font files
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
# Allow access to font files in the Fonts directory
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
Require all granted
</FilesMatch>
# END Basic Settings for Fonts
- Проверил URL-адрес одного из моих файлов шрифтов (http://sarahsmovies.com/Stylesheets/Fonts/ElliotSans-Bold.ttf) — соответствующая страница так и не загрузилась.
Я также обязательно попробовал загрузить свой сайт в нескольких браузерах и часто очищать кэш браузера.
Несмотря на все это, моя проблема остается неизменной: мой сайт будет загружаться и работать как обычно, но без моих собственных шрифтов, которые были заменены обычными буквами.
Я не уверен, какие шаги предпринять дальше. Любая помощь или понимание, которое вы можете предложить, будут очень признательны!
Всегда есть Google Fonts... fonts.google.com/specimen/figtree?stroke=Sans+Serif или fonts.google.com/specimen/Kumbh+Sans?stroke=Sans+Serif
Вы упомянули защиту паролем - может быть, она все еще применяется к некоторым каталогам? Также найдите файлы .htaccess в подкаталогах, которые могут заблокировать доступ. Попробуйте отключить все правила htaccess (например, переименовав их во что-то вроде .htaccess_bak). Вы также можете проверить, работает ли ваша текущая настройка сервера на Apache или она была перенесена, например, на IIS или nginx. В этих случаях правила htaccess не будут иметь эффекта и потребуют изменений в других местах, например, в настройках глобальной конфигурации (например, в панели управления). Вы также можете проверить, можете ли вы получить доступ к шрифтам из другого каталога (например, из вашего корневого каталога).
Спасибо вам всем! Обновление по моей проблеме: около недели назад, через несколько дней с тех пор, как я в последний раз пытался внести какие-либо изменения в свой веб-сайт, пользовательские шрифты внезапно снова начали загружаться. Затем сегодня (прошло больше недели с тех пор, как я в последний раз вносил какие-либо изменения на своем сайте) они снова перестали загружаться. Будем очень признательны за любую информацию о том, почему это могло произойти или что можно исправить!
Обновление: похоже, проблема наконец устранена (хотя мне все еще иногда приходится обновлять страницы несколько раз, прежде чем пользовательские шрифты успешно загрузятся)! Еще раз спасибо за вашу помощь!
@Сара С. Вам также следует проверить, можете ли вы обновить свой текущий план хостинга с помощью go-daddy. Особенно, если срок действия вашего первоначального контракта составляет несколько лет, его стоит обновить — вы часто получаете более мощную среду хостинга без дополнительных затрат. Звучит довольно глупо, но на самом деле это довольно распространенная практика, особенно среди бюджетных хостинг-провайдеров, - пренебрегать существующими клиентами. Я могу предположить, что ваш текущий план все еще имеет ограниченную квоту данных. В целом вы можете получить больше «удара за ошибку». Так что никаких нападок на хостеров - большинство хостеров в определенной степени мошенники;)
Ответы 1
Когда я загружаю одну из ваших страниц с фильмами на вкладке сети инспектора браузера я вижу, что запрос файла шрифта (/Stylesheets/Fonts/CloudyWithAChanceOfLove.ttf) никогда не завершается; он никогда не получает ответа. Это одинаково во всех браузерах, которые я пробовал: Chrome, Safari и Firefox. В Firefox я вижу сообщение NS_BINDING_ABORTED.
Однако когда я запрашиваю этот файл с помощью Postman, на запрос приходит ответ 200 ОК, и я получаю сведения о шрифте.
Я не знаю, что это значит, но я знаю, что одно из различий между запросом браузера и запросом Postman заключается в том, что браузеры включают информацию об источнике запроса (сайте, отправляющем запрос), который может использоваться серверами для ограничения доступ к вещам. Знакомы ли вы с CORS? Я предполагаю, что возникла проблема с конфигурацией вашего сервера, несмотря на протесты GoDaddy об обратном.
Большое спасибо за ваше понимание! Я расскажу об этом ребятам из GoDaddy и посмотрю, сможем ли мы наконец решить проблему со шрифтами!
Удачи. Если с GoDaddy слишком сложно иметь дело, возможно, сейчас самое время поискать другой хостинг для вашего сайта. Amazon S3 — отличное место для размещения статического веб-сайта.
Примерно через час общения с GoDaddy они сообщили мне, что готовы изменить конфигурацию своего сервера, чтобы (надеюсь) решить мою проблему со шрифтами; Я сообщу вердикт о том, работает ли это!
Шрифты, похоже, теперь работают, по крайней мере, на этой странице («Облачно, возможны осадки в виде фрикаделек») и страницах Аладдин.
Вы проверяли консоль в инспекторе браузера на наличие ошибок?