Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

Can't get fonts to read in Chrome

Related to http://www.experts-exchange.com/Q_28498047.html (still an unsolved mystery)

I have several pages. In all of them, in describing the paragraphs (either through the CSS or through the paragraph tags, I call for a specific font to be used.

The CSS:
body {margin: 0; padding: 0; line-height: 1.5em; font-family: Meta OT, Arial, helvetica, sans-serif; font-size: 14px; text-align:left; color:#000;}

Open in new window


A typical paragraph:
<p style="font-size: 17px; margin: 10px 0 15px 0; line-height: 1.5em;">

Open in new window

but I've also tried
<p style="color: #F47833; font: 17px Meta OT, Arial, helvetica, sans-serif; margin: 10px 0 10px 0; line-height: 1.5em;">

Open in new window


Everything renders fine in IE 11 and Firefox 31. However, when I look at it in Chrome, it only uses the default sans-serif typeface -- which is a little wider typeface, so by the end of a longish set of paragraphs, type is running over the bottom of a <div> or some other nonsense.

I'm open to suggestions except for wrapping the Meta OT in apostrophes, because I've tried that and it had no effect in any browser.
0
Eric AKA Netminder
Asked:
Eric AKA Netminder
  • 8
  • 3
1 Solution
 
viseeraCommented:
You can try font auto-hinting.

http://makandracards.com/makandra/2605-improve-web-font-rendering-in-windows-by-autohinting-fonts

This site would provide you better details in it.
You may have to convert your font to auto-hinted ttf, eot and svg.

links are provided in the site.

Seetharaman.N
0
 
RobOwner (Aidellio)Commented:
Hi ericpete,

Can you please post the same relevant screenshots as I have below:

1) go to your fonts folder - is the font in question hidden (faded) or shown
screenshot
2) Double click the font and it should show all the variations
screenshot
Right click the font, properties
screenshot
The title is what you need to use in CSS
screenshot
0
 
RobOwner (Aidellio)Commented:
From your other question:
Changing it to Meta OT -- the name listed in the fonts folder -- does work, but it will only show one of four weights of the font (Normal, Medium, Book and Bold), and it defaults to the first version alphabetically (Bold) instead of the one I want (Normal).

In CSS you need to specify exactly the name as it appears in the title so you will have to create 4 versions of the file as Gary had indicated with the @font-face tag.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
RobOwner (Aidellio)Commented:
From memory (which isn't good) different browsers will load fonts differently.  I think Firefox and IE use the windows subsystem but Chrome may load the fonts outside of this.  Doesn't help much other than to reinforce the need to specify the full font name in the CSS (enclosed by quotes if there's spaces).
0
 
Eric AKA NetminderAuthor Commented:
Rob,

Wouldn't the @fontface tag alluded to just be repetitive? In other words, the suggestion was
@font-face {
font-family: Meta OT;
src: url("c:\Windows\Fonts\MetaOT-Bold.otf") format("opentype");
}

Wouldn't just changing the path to (for example) c:\...MetaOT-Norm.otf just overwrite the previous tag?
0
 
RobOwner (Aidellio)Commented:
Not sure on that one. Why not try calling it something random like "ericpete"with the same url and then reference that font name as "ericpete", at least as a test
0
 
Eric AKA NetminderAuthor Commented:
Okay... I'll give that a shot. It'll have to wait until tomorrow, though -- won't be at my computer until then.
0
 
RobOwner (Aidellio)Commented:
This part

src: url("c:\Windows\Fonts\MetaOT-Bold.otf") format("opentype");

Has put my antennas up. Can you copy the font to the same directory as the html file? And then reference it by just the file name (no path)

There is the possibility of cross domain issues and this will at least rule that out
0
 
RobOwner (Aidellio)Commented:
this works with chrome

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style>
	@font-face {
		font-family: myfont;
		src: url(file:///C:/windows/fonts/Grad_Regular.otf);
	}
	#results {
		font-family: myfont;
	}
</style>

</head>
<body>
<div id='results'>this is a test of the berlin sans FB</div>
</body>
</html>

Open in new window

0
 
Eric AKA NetminderAuthor Commented:
Thanks, Rob... don't know what I'll do with this regarding their server (I'm pretty sure it's a Linux box), but I'll worry about that later.

ep
0
 
RobOwner (Aidellio)Commented:
Just means you'll need to have the font in an accessible place like /var/www/html/fonts/Grad_Regular.otf and you can either add or change the path in the code above to suit.  I think you can have two paths and as long as the browser finds the font it doesn't care but i'll test that theory.
0
 
RobOwner (Aidellio)Commented:
Ok so it only works having the one path per font type (ttf, otf, eot etc) but relative paths work
e.g.
src: url(../../../../../windows/fonts/Grad_Regular.otf);

So include the font when submitting the html forms and have them in the same folder and reference it like:

src: url(Grad_Regular.otf);

** Much like you would in the print industry, supplying the fonts with the job
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now