Solved

ttf font with CSS

Posted on 2014-09-17
12
356 Views
Last Modified: 2014-09-17
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
Comment
Question by:Richard Korts
  • 6
  • 4
  • 2
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40328633
Is this
http://www.rkassoc.org

the same url as the website?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40328673
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
 

Author Comment

by:Richard Korts
ID: 40328719
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:Richard Korts
ID: 40328729
Gary,

Here is the link to the exact place:

http://rkassoc.org/Davis/menu/menu_testa.htm
0
 

Author Comment

by:Richard Korts
ID: 40328740
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40328752
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
 

Author Comment

by:Richard Korts
ID: 40328763
To Dave Baldwin,

FireFox, I will try in Chrome.
0
 

Author Comment

by:Richard Korts
ID: 40328775
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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 300 total points
ID: 40328829
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 200 total points
ID: 40328836
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
 

Author Closing Comment

by:Richard Korts
ID: 40328851
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40328860
Justus Pro is a block serif font.  https://www.myfonts.com/fonts/urw/justus-pro/
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question