Solved

ttf font with CSS

Posted on 2014-09-17
12
378 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

630 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