Search code examples
cssfont-face

Can a single font style defined in <body> produce other font styles when the content is edited?

Let's say that I'm using a non-system font (ex., PT Sans) for a CMS website. So what I do is, I'll include the font family of different styles (say, Regular, Italic and Bold) using @font-face. Then I would define the font-family of body as PT Sans Regular. All is well till now.
Then, my client for example, edits some text content in the website. He gives different font-styles to the text - like he boldens an important message and italicizes the name of locations. So altogether, he stylizes the content the way he likes. No problem with that too.
But, what the real question is, how will the website know that if there's a italicized text, it should use PT Sans Italic instead of the regular version of the font, even if the body's font is PT Sans Regular?

I've been thinking about this for a while, but I can't find a solution for it.
Is there a possible solution for situations like this?

Solution

  • This is absolutely possible. Here's how you do it:

    @font-face {
    font-family: 'PTSans';
    src: url('pts55f-webfont.eot');
    src: url('pts55f-webfont.eot?#iefix') format('embedded-opentype'),
         url('pts55f-webfont.woff') format('woff'),
         url('pts55f-webfont.ttf') format('truetype'),
         url('pts55f-webfont.svg#PTSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PTSans';
    src: url('pts56f-webfont.eot');
    src: url('pts56f-webfont.eot?#iefix') format('embedded-opentype'),
         url('pts56f-webfont.woff') format('woff'),
         url('pts56f-webfont.ttf') format('truetype'),
         url('pts56f-webfont.svg#PTSansItalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'PTSans';
    src: url('pts75f-webfont.eot');
    src: url('pts75f-webfont.eot?#iefix') format('embedded-opentype'),
         url('pts75f-webfont.woff') format('woff'),
         url('pts75f-webfont.ttf') format('truetype'),
         url('pts75f-webfont.svg#PTSansBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'PTSans';
    src: url('pts76f-webfont.eot');
    src: url('pts76f-webfont.eot?#iefix') format('embedded-opentype'),
         url('pts76f-webfont.woff') format('woff'),
         url('pts76f-webfont.ttf') format('truetype'),
         url('pts76f-webfont.svg#PTSansBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;

}

    When you define the @font-face fonts, make sure that all your font-family names are the same. Then set the font-weight and font-style correctly for each font. So if a font is bold, set font-weight: bold. etc.

    Then in your CSS you can do:

    body {
    font-family: 'PTSans';
}

    And the various tags <strong> <em> etc will pick the correct font that matches.