4 font files added but only 2 styles displayed

Question

I'm trying to manually add a custom font to my localhost installation of WP, what I did so far:

download the font (Computer Modern) from fontsquirrel in .woff format
take the 4 files needed (Serif): Roman (cmunrm), Bold (cmunbx), Oblique (cmunti), Bold Oblique (cmunbi)
put the 4 files in the folder C:\xampp\htdocs\sitename\wp-includes\fonts\latex
write the following in style.css

CSS code

@font-face {
    font-family: "Computer Modern";
    src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunrm.woff');
    font-style: normal;
}
@font-face {
    font-family: "Computer Modern";
    src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbx.woff');
    font-weight: bold;
}
@font-face {
    font-family: "Computer Modern";
    src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunti.woff');
    font-style: italic, oblique;
}
@font-face {
    font-family: "Computer Modern";
    src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbi.woff');
    font-weight: bold;
    font-style: italic, oblique;
}
body {
    font-family: "Computer Modern", serif;
}

write the following in the WP editor

HTML code

This is normal text
<strong>This is bold text</strong>
<em>This is oblique text</em>
<em><strong>This is bold and oblique text</strong></em>

but the result is this

It seems that only Bold and Oblique have been loaded, in fact by replacing cmunti with cmunrm (Oblique with Roman) and cmunbi with cmunbx (Bold Oblique with Bold) in the CSS file this is showed

What is this due to, and how to solve it?

score 1 · Answer 1 · answered Sep 14 '19 at 15:00

1

Does it help to be explicit with font-weight and font-style in each definition? That's what this answer does. It also adds css that makes strong/em associated to font-weight/font-style explicitly (which may be unneeded).

answered Sep 14 '19 at 15:00

Jack Humbert

129
2
9

I tried all combinations of `font-weight` and `font-style` until I found the right one, see my answer – sound wave Sep 14 '19 at 23:43
1

Ah, it might have been the `oblique`. Glad you got it figured out! – Jack Humbert Sep 15 '19 at 12:42

score 0 · Accepted Answer · answered Sep 14 '19 at 23:42

Don't know why but this solved the problem

@font-face {
    font-family: "Computer Modern";
    src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunrm.woff');
}
@font-face {
    font-family: "Computer Modern";
    src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunti.woff');
    font-style: italic;
}
@font-face {
    font-family: "Computer Modern";
    src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbx.woff');
    font-weight: bold;
}
@font-face {
    font-family: "Computer Modern";
    src: url('http://localhost/sitename/wp-includes/fonts/latex/cmunbi.woff');
    font-weight: bold;
    font-style: italic;
}

4 font files added but only 2 styles displayed

2 Answers2