• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 397
  • Last Modified:

ttf font with CSS

Hello,

I am trying to use a true type font with CSS. See attached HTML file (w CSS & Jquery).

The font reference does NOT work. I have confirmed that the font ttf file is in the fonts folder as indicted.

What's wrong?

Thanks
menu-testa.htm
0
Richard Korts
Asked:
Richard Korts
  • 6
  • 4
  • 2
2 Solutions
 
GaryCommented:
Is this
http://www.rkassoc.org

the same url as the website?
0
 
Dave BaldwinFixer of ProblemsCommented:
This page http://www.w3schools.com/css/css3_fonts.asp shows which fonts are supposedly supported by the different browsers.  I have found that Chrome usually supports TTF but Firefox seems to prefer WOFF.  Below is a typical CSS3 file for a font called Fanwood from Font Squirrel.  Note also that when you use fonts this way, the 'bold' <b> and 'italic' <i> tags do Not work.
@font-face {
    font-family: 'FanwoodRegular';
    src: url('Fanwood-webfont.eot');
    src: url('Fanwood-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fanwood-webfont.woff') format('woff'),
         url('Fanwood-webfont.ttf') format('truetype'),
         url('Fanwood-webfont.svg#FanwoodRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Open in new window

0
 
Richard KortsAuthor Commented:
To Gary,

The url where this stuff is is www.rkassoc.org/Davis/menu.

I put the FULL path to the font file because using '../fonts/etc' didn't work.

This is just a working place where I am trying to get this going.

Thanks
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Richard KortsAuthor Commented:
Gary,

Here is the link to the exact place:

http://rkassoc.org/Davis/menu/menu_testa.htm
0
 
Richard KortsAuthor Commented:
To Dave Baldwin,

That link at w3schools seems to me to say that TTF is supported by FireFox version 3.5 and above, which by now you would think 99% of FF users have a higher version than that.

I can't (off hand) find a .woff version of the font they want (Justis Pro) for free.
0
 
Dave BaldwinFixer of ProblemsCommented:
When I look at the headers, the font is shown as being loaded.  What browser are you using to view http://rkassoc.org/Davis/menu/menu_testa.htm ?
0
 
Richard KortsAuthor Commented:
To Dave Baldwin,

FireFox, I will try in Chrome.
0
 
Richard KortsAuthor Commented:
To Dave Baldwin,

I tried in Chrome, same result.

Note the give away to me is the Justus font DOES NOT have the Times-Roman style fancy lower case g, it has the Arial style.
0
 
Dave BaldwinFixer of ProblemsCommented:
0
 
GaryCommented:
Your url is not the same as the font url
www.rkassoc.org

is not the same as
rkassoc.org

So you are hitting the same origin policy
Either remove the www from the font path
or
Use the absolute path for your fonts.
/pathtofont/font.ttf
0
 
Richard KortsAuthor Commented:
I'm guessing that the font I got is NOT Justus Pro (emphasis on the PRO) because the link Dave Baldwin shows confirms that.

Thanks
0
 
Dave BaldwinFixer of ProblemsCommented:
Justus Pro is a block serif font.  https://www.myfonts.com/fonts/urw/justus-pro/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 6
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now