Lewis Smith Lewis Smith - 4 months ago 14
Apache Configuration Question

Refreshing a webpage causes the text to become unviewable when using a font

I'm developing using the native AMP stack on a mac. This isn't really an issue, as much as a bug and annoyance. The text on my webpages becomes invisible, or the same colour as the background when I'm using css to style the font of the page. The text is still there as I can continue to select it, and then copy/paste it. I'm experiencing this issue with text in the main body of the document (either a php or html page) but not in the header which is displayed using an iframe.

This issue only presents itself when using Google Chrome, or Opera. It doesn't happen when using safari (haven't checked firefox). The only way to get the text to become visible again is to click in the address bar and press return, or to navigate away from and then back to the page. Using inspect in chrome shows that the text is still coloured as "#000000".

I believe this issue has to do with the fonts not loading, as when using inspect element in google chrome this error shows up in the console: "

Failed to load resource: the server responded with a status of 404 (Not Found)
". This is odd as I've double checked the names and locations of all the font files, and when I navigate to the fonts section of the inspect window, they both show up just fine. When I inspect the page when it first appears it show these errors in the console: "
GET http://localhost/Aller/Aller_Lt.tff test.php:1
" and "
GET http://localhost/Aller/Aller_Lt.tff header.htm:1
".

Any help or advice is appreciated. I can also post code samples, or answer any other questions to get to the bottom of this.

Edit



None of these things happen with headers using the
<h1></h1>
header tags

If I dissable this css, then my page works fine.

@font-face {
font-family: Aller;
src: url(Aller/Aller_Rg.ttf);
font-weight: normal;
}
@font-face {
font-family: Aller;
src: url(Aller/Aller_Bd.tff);
font-weight: bold;
}
@font-face {
font-family: Aller;
src: url(Aller/Aller_BdIt.tff);
font-weight: bold;
font-style: italic;;
}
@font-face {
font-family: Aller;
src: url(Aller/Aller_Lt.tff);
font-weight: lighter;
}
@font-face {
font-family: Aller;
src: url(Aller/Aller_LtIt.tff);
font-weight: lighter;
font-style: italic;
}
@font-face {
font-family: Aller;
src: url(Aller/Aller_It.tff);
font-style: italic;
}
body {
font-family: Aller;
}


Edit 2



Sometimes when loading the page for the first time, or even when reloading I get these errors instead:
GET http://localhost/Aller/Aller_Lt.tff test.php:1
,
GET http://localhost/Aller/Aller_Bd.tff test.php:1
, and
GET http://localhost/Aller/Aller_Lt.tff Aller/Aller_Lt.tff:1
I haven't been able to find a pattern to indicate when I will get one or the other.

Answer

I have solved the issue of my text disappearing when I refresh a page. The cause seems to be that I had the fonts installed and they were using the same font family as the css I was using. I removed the @font-face sections from my css and everything works perfectly. There are no errors, and the page refreshes just fine.