Fontproblem with custom font mostly under Windows

Hi,
Thanks for the link to your site, I see that you are getting an error on your site for the cooper-hewitt font: Failed to decode downloaded font and your Custom Font Manager is showing the MACOSX folder that is inside of the font zip, so try deleting both of the cooper-hewitt fonts in the Custom Font Manager to start fresh, then try the font zip linked below which I removed the MACOSX folder from. I tested this on my demo site and it seems to work correctly on Windows in Chrome when I assign the font in the advanced styling options.

Best regards,
Mike

Hi,
Very good, we will leave this open to hear back from you, enjoy your holidays.

Best regards,
Mike

Hi,
Thanks for your feedback, I tested the cooper-hewitt zip that I linked above on my demo site closer and it seems that each of the font files have the same font-weight of 400, which is odd, so I believe that when you try to use bold by changing the font-weight to 700 it was making it blurry, I believe this was also messing up the way the font manager works, if you see our documentation on Managing font variants the font family should show with its variants like this:

but this font was not, so I tried zipping each variant on it’s own and uploading them one at a time as shown in our documentation on File Structure, note in this screenshot that they all have the same font-weight:

then I created a test page with spans and custom classes to test the fonts:

<span class="cooperhewitt-thin">Cooper Hewitt - thin</span>
<span class="cooperhewitt-light">Cooper Hewitt - light</span>
<span class="cooperhewitt-book">Cooper Hewitt - book</span>
<span class="cooperhewitt-medium">Cooper Hewitt - medium</span>
<span class="cooperhewitt-semibold">Cooper Hewitt - simibold</span>
<span class="cooperhewitt-bold">Cooper Hewitt - bold</span>
<span class="cooperhewitt-heavy">Cooper Hewitt - heavy</span>

and added this css for the custom classes:

.cooperhewitt-thin {
	font-family: 'cooperhewitt-thin-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-light {
	font-family: 'cooperhewitt-light-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-book {
	font-family: 'cooperhewitt-book-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-medium {
	font-family: 'cooperhewitt-medium-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-semibold {
	font-family: 'cooperhewitt-semibold-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-bold {
	font-family: 'cooperhewitt-bold-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}
.cooperhewitt-heavy {
	font-family: 'cooperhewitt-heavy-webfont';
	font-weight: 400;
	font-size: 70px;
	line-height:70px;
	color: #000;
}

and this is the result:

please give this a try.

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out, and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

Best regards,
Rikard