Web Fonts – ‘Faux’ Bold and Italic

I have talked about web fonts before, but I ran into a new issue that made me revisit the topic.

The problem came from using a @font-font kit from Font Squirrel. What happened was that I ended up getting “Faux” bold and italics on my web-page. The solution suggested from the Demo.html page that comes from the kit is truly unacceptable if you want your CSS to be sanely maintainable.

What it comes down to is you would need to specify unique font-family anywhere you want bold or italics. You lose the ability for “cascading” and inheritance – some of the things that make CSS nice.

See the screen cast for more information. Here is a Table of Contents in case you don’t need the intro to web fonts that I provide in the beginning:

0:00 to 2:55 Using Google Web Fonts
2:55 to 4:55 Getting fonts from FontSquirrel
4:55 to 6:15 Adding fonts to CSS and showing the ‘Faux’ problem
6:15 to end Solving the ‘Faux’ problem and setting up different weights of your font

See my Github repository for the solution and demo code.

Here is the important snippet of the CSS defining the fonts.

The trick is to call all the definitions the same name. Then specify with “font-weight” or “font-style” the weight and style you want it to represent.

It is quite simple once you “get” it. I would never have thought to do this if I hadn’t found this article to explain the solution.

By the way, on this website I use Myriad Pro hosted by TypeKit. When you use a service like this, just like with Google, they handle the bold and italics better, so you don’t need to worry about this issue.

10 thoughts on “Web Fonts – ‘Faux’ Bold and Italic

  1. Thanks for this tip! I’ve always wondered how to solve this but didn’t even know what keywords to search for in Google. I’m doing your Step-by-Step SASS course and enjoying it btw 🙂

  2. I will just say, that this solution unfortunatly have not worked for me using Chrome. The solution seem to be, that you should declaire a new fontfamily (that when you have a fx. bold font) when you requere a, well, bold font.

    Sorry for my English..


    @font-face {
    font-family: ‘OpenSans’;
    src: url(‘fonts/OpenSans-Regular-webfont.eot’);
    src: url(‘fonts/OpenSans-Regular-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/OpenSans-Regular-webfont.woff’) format(‘woff’),
    url(‘fonts/OpenSans-Regular-webfont.ttf’) format(‘truetype’),
    url(‘fonts/OpenSans-Regular-webfont.svg#OpenSansRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    @font-face {
    font-family: ‘OpenSans-Italic’;
    src: url(‘fonts/OpenSans-Italic-webfont.eot’);
    src: url(‘fonts/OpenSans-Italic-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘fonts/OpenSans-Italic-webfont.woff’) format(‘woff’),
    url(‘fonts/OpenSans-Italic-webfont.ttf’) format(‘truetype’),
    url(‘fonts/OpenSans-Italic-webfont.svg#OpenSansItalic’) format(‘svg’);
    font-weight: normal;
    font-style: italic;

    Please note the rename in the font-family – from just ‘OpenSans’ to ‘OpenSans-Italic’

    Then you will have to script all ‘s to use the “Font-family: ‘OpenSans-Italic’;”

    And to make things even more complicated – you should shift the order of requsting the fonts, so that the .svg comes second – in that way you will have no ‘jagged’ letters using Chrome.

    All Good To All 🙂

    Kind regards, David

    1. Hi David,

      I’m not sure I understand the problem you are having. I am not doing what you said in your comment. The code you put in your comment is what you should NOT do. For this solution to work, you need to make sure that the font-family name, or the first line of the each definition, is the same on all of them. I’m not sure if you watched the video, but I try to explain why it doesn’t work in there.

      I am misunderstanding you, please clarify and I’ll try to help. This solution definitely should work in Chrome.

      ~ Lisa

  3. hey lisa i just watched your faux bold tutorial thank you – i have had that problem on a page of mine and even after adjusting to the correct styles the browser still “faux-bolds” it:


    my font css (only one font style exists)

    }@font-face {
    font-family: ‘amarillousa’;
    src: url(‘amarurgt-webfont.eot’);
    src: url(‘amarurgt-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘amarurgt-webfont.woff’) format(‘woff’),
    url(‘amarurgt-webfont.ttf’) format(‘truetype’),
    url(‘amarurgt-webfont.svg#amarillousafregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;


    my body css

    body {

    background: url(http://toddheymandirector.com/Images/common_jsh2013/noisebg.jpg) repeat; background-color:#0d0d0d;
    font-family: amarillousa;
    font-size: 15px;
    color: #333333;
    letter-spacing: 1px;

    any ideas? its driving me crazy.

    thanks todd

    1. Hi Todd,

      Looking at your code (thanks for providing link to actual website) it seems like this is not really a Faux Bold issue.

      If you are talking about the paragraph text on the About page, I don’t see that it is using a font-weight of bold anywhere in there. It is just styling it with the normal weight.

      I think the problem is just the font you are using. It is more of a display font and won’t be that readable at smaller text size.

      If you are talking about something else and not the paragraph text on the about page, let me know.

      I enjoyed looking at your website!

      ~ Lisa

      1. thanks lisa
        that is a bold display font but the browser is making it bolder. its also happening on a new site I’m putting up. this font is news gothic condensed and its definitely not bold but appears that way


        its easy to miss so i took a screen movie of the browser making both these pages bold.. you can actually see it happening here


        thanks for enjoying the website. i taught myself web design so i could have a good showcase for my directing work. now I’m obsessed about getting it right 😉


        1. Hi Todd,

          I looked at your video and I see what you are saying. The font style seems to change after the page is rendered.

          However, I still don’t think it is a “Faux Bold” issue (which is why trying my solution doesn’t work.) It is possible because you are using web fonts that the fonts just take a minute to render properly.

          I actually am not getting that flash on either of the websites.

          Do you know how to use the Web Developer Tools in your browser? If you inspect the paragraphs on both sites, they are not styled as “bold”. The font-weight is “normal”.

          You can change the weight to “bold” and see that the styles become more bold when I do that. And that is a “faux” bold since you don’t have a true bold font of the font you chose.

          It looks like you are using Safari. Did you try looking at your website in other browsers? I am looking at them in Chrome on a Windows machine and the font on JayStreet Industries does render pretty nicely for me. The font on your website it not as clean.

          I made a quick video showing me looking at both websites with Developer Tools on. Neither site is styling the text as bold. When I override the style sheets and set the paragraphs to bold, you can see a clear difference in how the font looks.

          http://youtu.be/nKJYntxiAVE (Make sure you view video in full screen and HD to see the font clearly.)

          So, I still think the issue is the font you are using and not that it is making it bold. And also the fact that web fonts will render differently on different browsers and different computers (Mac vs. Windows.)

          I hope that helps.

  4. thank you so much lisa for doing that – ironically that browsers isn’t even rendering the correct font – thats serif and the font is sans serif so I’m not sure whats going on – i might be at a wall with this issue

Leave a Reply

Your email address will not be published. Required fields are marked *