Problem implementing @font-face in phpMyDirectory

[Susie]

URL of the directory: http://tinyurl.com/4clortv

URL of the main site: http://tinyurl.com/4k92ofa

 

I am trying to make the directory, which is powered by phpMyDirectory, match the main site design. I'm almost there, but I'm having trouble with the navigation font.

 

I used the Font Squirrel @font-face generator. In the main site (powered by WordPress), I added a fonts folder to the theme folder and then added the following to my CSS:

 

@font-face {
   font-family: 'LeagueGothicRegular';
   src: url('fonts/league_gothic-webfont.eot?') format('eot'),
        url('fonts/league_gothic-webfont.woff') format('woff'),
        url('fonts/league_gothic-webfont.ttf') format('truetype'),
        url('fonts/league_gothic-webfont.svg#webfontwcR6rlLx') format('svg');
   font-weight: normal;
   font-style: normal;

}

 

It works perfectly for WordPress, but not so much for the directory. Firefox is not even acknowledging the new font. Chrome & Safari have the font, but the whole navigation is misplaced. IE is just plain messed up (though the new font does show). Opera, on my computer, seems to be the only one playing nicely.

 

Can someone help me sort this out? I'd be so grateful...

[shelfimage]

There may be some server restriction not allowing the site using the IP address to fetch a file referenced in the CSS file that originates on a different server. But, you can try using an absolute URL with the domain in the path where the font is located.

[Susie]

Thanks, John.

 

I tried using an absolute path in the CSS but that didn't work (I just added the absolute path back in so you can see). Plus, I figure if it was a server issue, the other browsers wouldn't show the new font would they? So confused....

[Wickham]

I use Font Squirrel but my css file is different from your's. It has a strange character after the .eot format. The .eot format is for IE (I think) and the others after the strange character are for other browsers. I believe the strange character is important, but I don't know why. It obviously separates the styles into two sections.

@font-face {
font-family: 'MatchbookMatchbook';
src: url('Matchbook-webfont.eot');
src: local('☺'), 
url('Matchbook-webfont.woff') format('woff'), 
url('Matchbook-webfont.ttf') format('truetype'), 
url('Matchbook-webfont.svg#webfontilT7vtqy') format('svg');
font-weight: normal;
font-style: normal;
}

[Susie]

I know they've recently changed the CSS syntax: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax I wonder if what you're using is the previous version.

[Susie]

I changed the doctype for the directory and that fixed the IE issues. Now all browsers except Firefox show the new font but the navigation is misplaced. Firefox doesn't play nice at all. Hmmm...