For the past few years, I have been building a custom database cataloging my movie collection.
You can access the site at: http://sarahsmovies.com
A username and password are required to view the site; they are:
Username: Sarah'sBuddy
Password: tiger2
The designs of most pages are inspired by specific movies or themes, and each page uses different custom fonts. All was well until a little over a week ago, when the custom fonts abruptly stopped loading online. This occurred around the same time I received an email from my hosting provider, GoDaddy, letting me know that my hosting had been migrated, although multiple representatives from GoDaddy have assured me this is not the source of my problem.
For reference, below are the HTML and CSS scripts for one of my pages.
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;
}
I have tried the following to fix my custom fonts:
Verified that all of my custom fonts still work locally
Replaced all my uploaded website files with fresh copies via FileZilla
Contacted GoDaddy customer service (multiple times) - each time, they assured me there were no problems with their server and that the issue must be with my scripts
Ensured all my font file and directory permissions are correctly set (to 644 and 755, respectively)
Updated @font-face details for one of my pages to:
@font-face {
font-family: 'ElliotSans-Bold';
src: url('http://www.sarahsmovies.com/Stylesheets/Fonts/ElliotSans-Bold.ttf') format('truetype');
}
# 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
I have also been sure to try loading my site in multiple browsers and to flush my browser caches frequently.
Despite all this, my problem remains consistent: My site will load and function as normal - but without my custom fonts, which have been replaced with generic lettering.
I am not sure what steps to take next. Any help or insight you can offer would be tremendously appreciated!
When I load one of your movie pages I can see in the network tab of my browser inspector that the request for the font file (/Stylesheets/Fonts/CloudyWithAChanceOfLove.ttf) never completes; it never receives a response. This is consistent across the browsers I have tried, which is Chrome, Safari and Firefox. In Firefox I see the message NS_BINDING_ABORTED.
However, when I request this file using Postman, the request receives a 200 OK response and I receive the font details.
I don’t know what this means, but I know that one of the differences between a browser request and a Postman request is that the browsers include information about the request origin (the site making the request) which can be used by servers to restrict access to things. Are you familiar with CORS? My guess is that there is a problem with your server configuration, despite the protests of GoDaddy to the contrary.