Solved

Font Face

Posted on 2010-11-18
10
861 Views
Last Modified: 2012-06-21
Hey guys, i have a problem, i am pulling fonts from the sever, here is my code:

@font-face
{
 font-family: 'MyCustomFont';
 src: url('../Fonts/calibri-webfont.eot');
 src: local('Calibri'), local('Calibri'), url('../Fonts/calibri-webfont.woff') format('woff'), url('../Fonts/calibri-webfont.ttf') format('truetype'), url('../Fonts/calibri-webfont.svg#webfonthsJxRxCf') format('svg');
}

the problem is that the fonts look different in firefox and IE? why?
can any one help me and show me how to use font face to pull fonts and dislpay it in different browser?

In FireFox and google Chrome the smaller fonts seems to be gramed up, but i did use :

font-size-adjust: 0.47;

but it does not seem to look right, can someone please help me so i can display to fonts in all browser the same?
0
Comment
Question by:JCWEBHOST
10 Comments
 
LVL 16

Expert Comment

by:Vikram Singh Saini
Comment Utility
End user make their browser's font and size set according to their preference. So in your case that could be hurdle.
0
 
LVL 3

Expert Comment

by:boraganesh
Comment Utility
Yes there is some diffrence in rendering fonts in Mozzila and IE

As compare to IE mozzila shows blured fonts. but no need to worry about it as its a browser issue
0
 

Author Comment

by:JCWEBHOST
Comment Utility
but how do i fix that blured fonts?
0
 
LVL 3

Expert Comment

by:boraganesh
Comment Utility
no.its not under our control...its browsers issue. same like OS windows and linux..
linux shows nice fonts as compared to windows.
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
>>linux shows nice fonts as compared to windows.

What in the world does that mean?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 29

Expert Comment

by:Badotz
Comment Utility
boraganesh: While we're at it, you state:

"As compare to IE mozzila shows blured fonts. but no need to worry about it as its a browser issue" (sic)

Upon what is this based?
0
 
LVL 6

Expert Comment

by:kmead6
Comment Utility
You could try calling a different style for Mozilla by including in your <head> tags:
<style type="text/css">
            @-moz-document url-prefix() {
                p {
                        font-size-adjust: 1;
                  }
            }
</style>

or whatever needs to be adjusted since we don't have a link or any other html/css to go off of. A link is always helpful to be able to see the problem.
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 500 total points
Comment Utility
"can someone please help me so i can display to fonts in all browser the same?"

The only way I know of getting all browsers to render a font identically is to use the STANDARD fonts that are installed in these OSs, like --

ARIAL, TAHOMA, VERDANA, Times New Roman -- etc.

Those are the standards for all browsers.  When you pull fonts from a server with encoding that may not match what the browser on a particular OS interprets the encoding to be, you will get bad font rendering, and each browser rendering it differently.  Hence you are stuck with the standard ones.
0
 
LVL 3

Expert Comment

by:boraganesh
Comment Utility
yes..right scrathcyboy:

we have no options otherwise stucking with browsers standards..:)
0
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
boraganesh: You have not answered my questions...
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
This article discusses four methods for overlaying images in a container on a web page
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…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now