Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

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?

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 years ago.

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?

• css
• fonts

1 Answer 1

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;
}