Solved

ttf font with CSS

Posted on 2014-09-17
12
368 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 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