Jump to content
Lizard Wizard Coding Club

Problem implementing @font-face in phpMyDirectory


Recommended Posts

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... :)

Link to post
Share on other sites

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.

Link to post
Share on other sites

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....

Link to post
Share on other sites

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;
}

Link to post
Share on other sites

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...

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...