On this wiki, I have installed four special fonts:
You can see the files here .
My issue is that I can't get these files to work properly. You can see the CSS I've implemented on our MediaWiki:Wikia.css page under the "FONTS" section. My wikia-hosted files only seem to work for Lacabeza and kiddySans. But since I am a chrome user, that may mean only one of the files work out of .ttf, .woff, and .eot . For SF Beaverton and Josefin Sans, I have to use files hosted elsewhere.
Example: I have linked to my SF Beaverton files like so:
@font-face
{
font-family: 'SfbeavertonLight', Arial; /* Local */
src: url('Sfbeavertonlight.eot?#iefix') format('embedded-opentype'),
url('Sfbeavertonlight.woff') format('woff'),
url('Sfbeavertonlight.ttf') format('truetype'),;
}
But then font-family:SfbeavertonLight doesn't display properly. So instead I have to use font-family:SF_Beaverton imported from an external url:
@font-face
{
font-family: 'SF Beaverton', Arial; /*Webfont */
src: url('http://www.mediafont.com/storage/contents/7391/font.eot'); /* IE */
src: local('SF Beaverton'), url('http://www.mediafont.com/storage/contents/7391/SF Beaverton Medium.ttf'); /* non-IE */
}
You can see I have an .eot and .ttf link. (For Josefin Sans, I used a Google Fonts link.) However, I feel this is less stable than using wikia-hosted files. From what I can tell, my SF Beaverton font only loads correctly about half the time in Firefox. The rest of the time, it is replaced by Times New Roman, even though I specified Arial above.
Since these fonts were originally .ttf, I used the fontsquirrel font converter to get the .eot and .woff files. The problem could be that they didn't convert properly? But I have tried different converters and re-uploading the fonts to wikia a couple times, and they still don't work unless I use the external host.
If anyone can help me, please comment. If you read this post at all, please at least comment below and tell me if you can see the four fonts above properly and what browser you're using. Thank you!