Typophile

Weights - How to deal with it!?

damian5000

It's driving me absolutely crazy. I want to use Open Sans 400 for most everything and Open Sans 800 for forum subjects/topics/forum names. But the only browser to render it properly is Chrome. Every other browser gets completely mixed up and seems to default to Open Sans 800 even when Open Sans 400 is called.

I've tried making Open Sans 400 weight 800 through CSS, but it's a totally different deal than true Open Sans 800 font type.

Any ideas? Chrome is fine. All other browsers have no idea how to handle it. That includes Firefox, Opera, Explorer. I wish I had some samples to show what I mean, but this is an issue from a while back, and I just decided to settle on 'sans caption' for what I really want to be open sans 800.

Nick Curtis

Since the Apache license appears to allow modifications, the simplest solution would be to give the fonts different names...

damian5000

Can you give me an example of how that would be done? Changing the name of the font...

Reynir Heiðberg...

The following is largely an excerpt from what I have on my bedroom LAN server. Perhaps it'll help...

@font-face {
	font-family: 'Open Sans';
	font-weight: normal;
	font-style: normal;
	src: local('Open Sans'), local('OpenSans'),
	     url('OpenSans-Regular.woff') format('woff'),
	     url('OpenSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-weight: normal;
	font-style: italic;
	src: local('Open Sans Italic'), local('OpenSans-Italic'),
	     url('OpenSans-Italic.woff') format('woff'),
	     url('OpenSans-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-weight: bold;
	font-style: normal;
	src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
	     url('OpenSans-Semibold.woff') format('woff'),
	     url('OpenSans-Semibold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-weight: bold;
	font-style: italic;
	src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'),
	     url('OpenSans-SemiboldItalic.woff') format('woff'),
	     url('OpenSans-SemiboldItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans XBold';
	font-style: normal;
	src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'),
	     url('OpenSans-ExtraBold.woff') format('woff'),
	     url('OpenSans-ExtraBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans XBold';
	font-style: italic;
	src: local('Open Sans Extrabold Italic'), local('OpenSans-ExtraboldItalic'),
	     url('OpenSans-ExtraBoldItalic.woff') format('woff'),
	     url('OpenSans-ExtraBoldItalic.ttf') format('truetype');
}
damian5000

okay. thanks. i figured out, i just needed to change font-family in css. I can call it whatever i want, then associate that with the uploaded ttf file.

example:
@font-face
{
font-family: myFirstFont;
src: url(http://www.mysite.com/forum/fonts/OpenSans-Bold.ttf);
}

I thought I had to manually change the font name within the file, which I found out how to do with typograf, but turns out i didn't need to do that.

Thanks again for the reply.

Captured from web.archive.org on 3 Aug 2014. view this capture