Grow your CSS skills. Land your dream job.

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

  • # May 1, 2012 at 10:30 am

    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.


    # May 1, 2012 at 10:44 am

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

    # May 1, 2012 at 11:10 am

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

    # May 1, 2012 at 11:41 am

    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. ???

    # May 1, 2012 at 12:26 pm
    div {
    font:bold 80px 'Courier New';
    font:bold 120px 'Sketch Block';

    The first font will be ignored.

    # May 1, 2012 at 12:57 pm

    @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)….. :-/

    # May 1, 2012 at 2:13 pm

    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).

    # July 18, 2012 at 7:10 pm

    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!?

    # July 18, 2012 at 7:33 pm

    @orionrush Which browser?

    # July 19, 2012 at 12:04 am


    /* font: font-style font-weight font-size/line-height font-family; */
    font: normal bold 20px/26px Tahoma,Arial,Sans-Senff;
    # July 19, 2012 at 12:46 am

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

    # July 19, 2012 at 1:30 am

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

    font: italic bold 20px/26px Tahoma,Arial,Sans-Senff;
    # July 19, 2012 at 1:41 am

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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".