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

Question

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?

The CMS shouldn't be determining fonts, the site's template and stylesheet should. Things like bold an italics are not font-dependent. — Diodeus - James MacFarlane, Mar 28 '12 at 20:32
Read this: http://stackoverflow.com/questions/2436749/how-to-define-bold-italic-using-font-face — David Nguyen, Mar 28 '12 at 20:32
So is your question, what font does a browser use if the non-standard font I specify has no italics? — j08691, Mar 28 '12 at 20:33
@j08691 - Quite. But I believe it's more like the link provided by David. — DriftingSteps, Mar 28 '12 at 21:02
@DavidNguyen - So, I have to give the same font-family name to all the (a)font-face, but define the font-style/weight according the font I'm linking? — DriftingSteps, Mar 28 '12 at 21:02

score 2 · Accepted Answer · answered Mar 30 '12 at 16:29

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.

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

1 Answers1