I created the webfont kits using Font Squirrel and they are working perfectly. To address an issue with aliasing in Chrome, I reordered the fonts by moving SVG fonts to the top of the order.
Usually, everything loads perfectly and looks great. However, there are times when I load the page and the fonts appear without any padding, causing them to stick together. Here is a screenshot of my menu during one such occurrence:
https://i.sstatic.net/48sbb.png
Under normal circumstances, the menu does not look distorted like that.
Upon inspecting the Chrome developer console, I noticed the following errors:
GET http://localhost/mysite/css/fonts/typetogether_adelle-regular-webfont.svg 404 (Not Found) coveralls-overalls-c-21.html:1
GET http://localhost/mysite/css/fonts/typetogether_adelle-bold-webfont.svg 404 (Not Found) coveralls-overalls-c-21.html:1
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
FB.getLoginStatus() called before calling FB.init(). all.js:56
GET http://localhost/mysite/css/fonts/typetogether_adelle-regular-webfont.woff 404 (Not Found) coveralls-overalls-c-21.html:1
GET http://localhost/mysite/css/fonts/typetogether_adelle-bold-webfont.woff 404 (Not Found) coveralls-overalls-c-21.html:1
GET http://localhost/mysite/css/fonts/typetogether_adelle-regular-webfont.ttf 404 (Not Found) coveralls-overalls-c-21.html:1
GET http://localhost/mysite/css/fonts/typetogether_adelle-bold-webfont.ttf 404 (Not Found) coveralls-overalls-c-21.html:1
The directory links seem to be correct.
If I refresh the page multiple times, eventually it returns to normal appearance.
Here is the CSS for the fonts:
@charset utf-8;
@font-face {
font-family: 'allerbold';
src: url('fonts/typetogether_adelle-bold-webfont.eot');
src: url('fonts/typetogether_adelle-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/typetogether_adelle-bold-webfont.svg#allerbold') format('svg'),
url('fonts/typetogether_adelle-bold-webfont.woff') format('woff'),
url('fonts/typetogether_adelle-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Additional font-face rules here */
In the image provided, you can see that the font is being displayed but the padding/margin appears affected.
Once the page is refreshed and the fonts display correctly, the errors disappear from the console as well.