Custom fonts not rendering in Chrome/Safari

Question

I'm using the CSS method to render fonts from fonts.com by using the font name in a CSS class like

 .myFont h3 {
   background-color: #FFFFFF;
   color: #000000;
   font-family: "ReformaGroteskW01-Mediu";
   font-size: 40px;
   font-weight: normal;
   letter-spacing: 0.04em;
   margin: 0 auto;
   padding: 0 7px;
   text-transform: uppercase;
   width: 105px;

}

And the font is linked using this link tag provided by fonts.com, this works for Firefox but not for chome and Safari, seems like the webkit browser doesn't link something here, I would as the support at fonts.com but I have found their support to be very slow in the past.

<link type="text/css" rel="stylesheet" href="http://fast.fonts.com/cssapi/11386172-45ea-43f5-93bd-d795e60c00af.css">

Can you provide a link to a demo page? the fonts.com API will only allow that font to show on domains you have added in their web UI, so very hard to debug without being able to see a live example. — Tom Davies, Oct 23 '12 at 16:07
in Chorme's console it says "Resource interpreted as Font but transferred with MIME type text/html." GET http://fast.fonts.com/d/7e24... 403 (Forbidden) — zadubz, Oct 23 '12 at 16:17
So, to clarify, have you contacted fonts.com's support at all for this issue? — djangodude, Oct 24 '12 at 03:38
I tried using a mimetype like mentioned here but didnt seem to do anything http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts — zadubz, Oct 24 '12 at 10:27

score 7 · Answer 1 · answered Jun 05 '13 at 15:59

7

I realize this comment comes several months after the discussion on this issue; however, I just ran into this problem myself, and was looking for a solution, and landed here. The fonts served up by font.com were resolving correctly in Firefox but not in Chrome or Safari. I ultimately solved the problem by specifying both www.domainname.com AND domainname.com in font.com's domain configuration. Turns out both Chrome and Safari are sensitive to this. (Evidently font.com's domain configuration is less flexible than typekit's, where entering *.domainname.com automatically includes domain.com and www.domainname.com.) Hope this helps someone!

answered Jun 05 '13 at 15:59

carol

73
2
7

1

Or sometimes for testing purposes the ip address should also added in list:`- *.domain.com - www.domain.com - 5.100.30.10` – Silvan Dec 23 '13 at 15:53
This answer should have more upvotes :) and should be picked as the correct answer. Thank you, saved me a lot of time. – Sammy Sep 13 '16 at 17:14

score 2 · Answer 2 · answered Oct 24 '12 at 13:46

We're sorry you're having difficulty! Looking at your Fonts.com Web Fonts project, it appears that it has been published with some changes only a few hours ago (approximately four hours prior to this response, several hours after your StackOverflow post). Currently, when loading your sample link (http://www.fabricproperty.com/) in a few browsers on some of our test machines, your project's fonts are loading and displaying correctly. I will also be following up with your Fonts.com support ticket regarding this issue.

score 0 · Accepted Answer · answered Oct 23 '12 at 16:03

0

Why don't you download the font you like and put it in your files? That's way better and might solve your problem too.

Besides, don't use font-family and font-size apart. Put them together in the font tag.

answered Oct 23 '12 at 16:03

user1717526

131
1
2
14

19

There is no compelling reason to use the `font` shorthand, it has its pitfalls, and it is not related to the problem at hand. – Jukka K. Korpela Oct 23 '12 at 17:37

score 0 · Answer 4 · answered Oct 23 '12 at 18:51

You did not describe in which sense it does not work for Chrome, but it seems that you are referring to minor rendering issues: on Chrome, the font is rendered with somewhat thicker strokes. This is something that you should discuss with the provider of the font service.

The font has been loaded and is used in Chrome, as you can see by editing the CSS code by removing font-family:"ReformaGroteskW01-Mediu". So it’s a quality of font implementation issue.

score 0 · Answer 5 · answered Aug 28 '13 at 21:46

0

If you want fonts from fonts.com to work locally (no 403 errors) without needing to configure anything, you should view your site using the 'localhost' hostname which fonts.com supports by default:

http://www.fonts.com/support/faq/local-host-support

answered Aug 28 '13 at 21:46

Chris Halcrow

28,994
18
176
206

score 0 · Answer 6 · answered Jun 02 '16 at 13:45

0

I noticed the webfonts only loads when I enter EdgeCast IP (68.232.35.182) in Add & Edit Domains. Perhaps fast.fonts.net is using EdgeCast CDN and the domain check gets the CDN address instead of the origin request address.

answered Jun 02 '16 at 13:45

Mattias Axelsson

346
2
6

Custom fonts not rendering in Chrome/Safari

6 Answers6

Linked