[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

apply external font in CSS

Posted on 2010-04-07
11
Medium Priority
?
1,002 Views
Last Modified: 2012-05-09
I have an open type external font file and i want to apply it to the whole page.
It is getting applied properly in Ff and google chrome but in IE7 it is not taking effect

have attached the code i have added in the css
@font-face {
font-family: NewBaskervilleStd;
src:url(/jusin/style/NewBaskervilleStd-Roman.otf) format("opentype");
}

@font-face {
font-family: NewBaskervilleStd;
src:url(/jusin/style/NewBaskervilleStd-Bold.otf) format("opentype");
font-weight:bold;
}

@font-face {
font-family: NewBaskervilleStd;
src:url(/jusin/style/NewBaskervilleStd-BoldIt.otf) format("opentype");
font-weight:bold;
font-style:italic;
}

@font-face {
font-family: NewBaskervilleStd;
src:url(/jusin/style/NewBaskervilleStd-Italic.otf) format("opentype");
font-style:italic;
}

Open in new window

0
Comment
Question by:Desire2change
  • 4
  • 2
  • 2
  • +3
11 Comments
 
LVL 22

Expert Comment

by:remorina
ID: 30091816
You'll need to provide an eof extension and format for IE

In order to achieve @font-face to work properly cross-browser, you need to provide all formats (eot, woff, otf and svg)

refer to http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ for more information
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 30092197
IE requires different code.  Look here for info: http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ .  MSDN says the same thing, IE only supports 'eot' font files.
0
 

Author Comment

by:Desire2change
ID: 30093746
i have otf files is it possible to convert it to eot files ?
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.

 
LVL 22

Expert Comment

by:remorina
ID: 30094174
There are some programs that can convert them but most of them you'll have to buy or they're limited
You can try this link which describes how to easily convert to ttf then back to eot
http://circuitbomb.com/index.php/2009/09/easy-oft-to-eot-conversion-for-font-face-css3-and-internet-explorer/
0
 

Expert Comment

by:supershackle
ID: 30099931
Why don't you use Cufon for those special fonts? http://cufon.shoqolate.com/generate/
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 30106553
I've been using the font squirrel generator for a while.  It gives you all of the fonts for full and true cross browser compatibility.
http://www.fontsquirrel.com/fontface/generator 
0
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 30122012
I like sIFR myself. If you own Flash you should be able to make use of this, and it's totally cross-browser and you don't need to worry about converting or embedding fonts:

explanation: http://www.mikeindustries.com/blog/sifr
download: http://www.mikeindustries.com/blog/files/sifr/2.0/sIFR-2.0.7.zip
example: http://www.mikeindustries.com/blog/files/sifr/2.0/
docs and tutorials: http://wiki.novemberborn.net/sifr/
0
 
LVL 30

Expert Comment

by:LZ1
ID: 31300706
Any updates???
0
 
LVL 30

Expert Comment

by:LZ1
ID: 31746026
Bump
 
0
 
LVL 30

Expert Comment

by:LZ1
ID: 32346181
Any updates???
0
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 32346882
Doesn't look like it. I would recommend not touching this thread any further so it can be flagged to a moderator in 22 days.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

590 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