Forums

Senff

So my site is using some "font-family" here and there (for main title and post titles):

font-family: 'SketchBlockBold';
font-size: 120px;
font-weight: normal;

Now I've come across the situation where this whole font-family thing is not supported (Opera Mini), so I want to have a little fallback. It's easy to include a fallback font type, but is it also possible to change the font size and weight in case the browser is not able to use the "Sketch Block Bold" font?

So what I basically want is to have a default font Sketch Block Bold, 120px, normal, but if that can't be shown, have Courier New, 80px, bold.

Possible?

djrolstad

Can't you use Font Squirrel and generate js so you can use any font on any browser?

Senff

Yea, I did use Font Squirrel, but Opera Mini doesn't seem to support display of that. That's the whole issue.

djrolstad

Maybe you could use css media queries, since its a mobile browser. Set the size and make sure to include both the handheld and screen media types. ???

Hompimpa

div {
  font:bold 80px 'Courier New';
  font:bold 120px 'Sketch Block';
}

The first font will be ignored.

Senff

@djrolstad: I don't want to change it for all mobile browsers. I only want to change it for browsers that don't support the font-family property (which just happens to be Opera Mini). iPhone's Safari Mobile should still show the regular font type.

@Hompimpa : simple enough, I'll try that. However I also need to change the line-height and some other stuff that is not directly in the font-property (height, line-height, margins)..... :-/

TheDoc

If you find a solution, I'd love to see it - I've faced this in the past as well, but just ended up saying 'oh well' (personal sites).

orionrush

I'll second this - I have a heading font that I've put through fontsquirrel that actually doesn't look very right 'bold' –– However all the fallback fonts would need to inorder to render appropriately for headings. What to do -- what to do!?

chrisburton

@orionrush Which browser?

Hompimpa

@Senff:

/* font: font-style font-weight font-size/line-height font-family; */
font: normal bold 20px/26px Tahoma,Arial,Sans-Senff;

chrisburton

@Hompimpa If the typeface is already bold, you don't want to set the font-weight bold. Instead set it to normal.

Hompimpa

@ChristopherBurton: font-style:italic and font-weight:bold

font: italic bold 20px/26px Tahoma,Arial,Sans-Senff;

chrisburton

@Hompimpa My fault. Initially I didn't see the @username reply to senff. I thought you were responding to orionrush.

treehouse : what would you like to learn today?

Forums

How to change font size/weight when font-family not supported