Jump to content

Having problem loading custom font


HGeneAnthony

Recommended Posts

I'm trying to use a custom font or my site.  I have it downloaded and it appeared to be working in Internet Explorer 9, Chrome, Opera, but didn't work in Firefox 12.  It was the Broadway font.  I decided to use another custom font and it wouldn't work at all in any of my browsers.  I then installed the Broadway font in my system and it started to work in Firefox.  However, when I uninstalled it didn't work in any browsers since.  What I'm wondering is how does the custom font work?  I thought it was supposed to work even if the font was not installed on the user's computer but I'm wondering now if it's referencing a font on the user's computer.  Here's my CSS:

 

@font-face {

    font-family: Broadway;

    src: url("broadway.tff");

}

 

#banner {

    font-weight: bold;

    font-size: 56px;

    font-family: "Broadway", Arial, Helvetica, sans-serif;

    text-shadow: 0px 2px 3px #E6E6FF; 

    margin-bottom: 10px;

    padding: 20px;   

}

 

The font resides in the root directory.  Is there something I'm missing?

 

 

 

Link to comment
Share on other sites

The problem with @font-face is that the browsers not recognise the same file font format.

IE supports Embedded OpenType Font format (.eot). Firefox, Chrome, Safari, and Opera support fonts of type OpenType Face (.otf) and TrueType Format (.ttf).

You should add two @font-face, for the same font, with .eot, and .ttf files.

The Font Squirrel @font-face Generator ( www.fontsquirrel.com ) takes any uploaded font and converts it into all the formats mentioned earlier as well as offers sample CSS embedding code.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.