Connecting different font files of the same font to the corresponding CSS styles

Question

On myfonts.com I purchased the Didot font which comes in regular, bold, italics and bold italics (one separate file for each of these styles). When my WordPress users write articles with bold and italic characters, I want the corresponding font style to be used. But so far, it is always the regular font which is used, even for italics or bold. As a result, the italics that I see on my site seem to be an "italics version" of my regular font. But this result is different from the real italics that is advertized on myfonts.com. Their customer service is unable to help with these "development issues" in their own words. How can the proper font file be used for each style on my WordPress site? Here is the code to add in CSS that myfonts.com provides with the files: ``` @import url("//hello.myfonts.net/count/xxxxx"); @font-face {font-family: 'LinotypeDidoteTextPro';font-weight: normal;font-style: normal;src: url('webfonts/xxxxxxx1.eot');src: url('webfonts/xxxxxxx1.eot?#iefix') format('embed…

Accepted Answer

Your @font-face declarations are all the same. you need them to each be different(LinotypeDidoteTextPro-normal, LinotypeDidoteTextPro-bold-italic, LinotypeDidoteTextPro-italic, LinotypeDidoteTextPro-bold) in order to use the declarations in your css. Also using classes like "bold" and "italic" instead of elements like "b" and "i" allow you to use the bold italic font properly, otherwise you have to choose which one to use.

CSS File should be:

```
@font-face {font-family: 'LinotypeDidoteTextPro-normal'; src: url('webfonts/xxxxxxx1.eot');src: url('webfonts/xxxxxxx1.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx1.woff') format('woff'),url('webfonts/xxxxxxx1.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro-bold-italic'; src: url('webfonts/xxxxxxx2.eot');src: url('webfonts/xxxxxxx2.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx2.woff') format('woff'),url('webfonts/xxxxxxx2.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro-italic'; src: url('webfonts/xxxxxxx3.eot');src: url('webfonts/xxxxxxx3.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx3.woff') format('woff'),url('webfonts/xxxxxxx3.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro-bold'; src: url('webfonts/xxxxxxx4.eot');src: url('webfonts/xxxxxxx4.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx.woff') format('woff'),url('webfonts/xxxxxxx4.ttf') format('truetype');}

body{
    font-family: "LinotypeDidoteTextPro-normal";
    font-weight: normal;
    font-style: normal;    
}
i,
.italic{
    font-family: "LinotypeDidoteTextPro-italic";   
}
b,
.bold{
    font-family: "LinotypeDidoteTextPro-bold";   
}
b i,
i b,
.bold.italic{
    font-family: "LinotypeDidoteTextPro-bold-italic";    
}
```

As @Albert pointed out (reference: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) you can work better with the browsers and be forced to override less if you use font-style and font-weight in your font-face declarations. So an optimized version would be:

```
@font-face {
    font-family: 'LinotypeDidoteTextPro';
    src: url('webfonts/xxxxxxx1.eot');
    src: url('webfonts/xxxxxxx1.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx1.woff') format('woff'),url('webfonts/xxxxxxx1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'LinotypeDidoteTextPro';
    src: url('webfonts/xxxxxxx2.eot');
    src: url('webfonts/xxxxxxx2.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx2.woff') format('woff'),url('webfonts/xxxxxxx2.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;}

@font-face {
    font-family: 'LinotypeDidoteTextPro';
    src: url('webfonts/xxxxxxx3.eot');
    src: url('webfonts/xxxxxxx3.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx3.woff') format('woff'),url('webfonts/xxxxxxx3.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;}

@font-face {
    font-family: 'LinotypeDidoteTextPro';
    src: url('webfonts/xxxxxxx4.eot');
    src: url('webfonts/xxxxxxx4.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx.woff') format('woff'),url('webfonts/xxxxxxx4.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;}

body{
    font-family: "LinotypeDidoteTextPro";
    font-weight: normal;
    font-style: normal;    
}
i, .italic{ font-style: italic; }
b, .bold{ font-weight: bold; }
```

Connecting different font files of the same font to the corresponding CSS styles

Solution

Problem