[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • 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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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