Font .woff files loaded don’t correspond to the displayed styles

  • Resolved giannit

    (@giannit)


    5 years, 5 months 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
        @font-face {
    	font-family: "Computer Modern";
    	src: url('https://localhost/sitename/wp-includes/fonts/latex/cmunrm.woff');
    	font-style: normal;
    }
    @font-face {
    	font-family: "Computer Modern";
    	src: url('https://localhost/sitename/wp-includes/fonts/latex/cmunbx.woff');
    	font-weight: bold;
    }
    @font-face {
    	font-family: "Computer Modern";
    	src: url('https://localhost/sitename/wp-includes/fonts/latex/cmunti.woff');
    	font-style: italic, oblique;
    }
    @font-face {
    	font-family: "Computer Modern";
    	src: url('https://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
        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?

Viewing 2 replies - 1 through 2 (of 2 total)

  • According to what I just read, font-face doesn’t cascade. But it does default the font-style and font-weight to normal. So it looks like you would need to specify both on each definition so you don’t get the default.

    In my experience, you just need to load the normal one and the bold and oblique will work fine.

    Thread Starter giannit

    (@giannit)

    Don’t know why but this solved the problem

    @font-face {
	font-family: "Computer Modern";
	src: url('https://localhost/matesvolta/wp-includes/fonts/latex/cmunrm.woff');
}
@font-face {
	font-family: "Computer Modern";
	src: url('https://localhost/matesvolta/wp-includes/fonts/latex/cmunti.woff');
	font-style: italic;
}
@font-face {
	font-family: "Computer Modern";
	src: url('https://localhost/matesvolta/wp-includes/fonts/latex/cmunbx.woff');
	font-weight: bold;
}
@font-face {
	font-family: "Computer Modern";
	src: url('https://localhost/matesvolta/wp-includes/fonts/latex/cmunbi.woff');
	font-weight: bold;
	font-style: italic;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Font .woff files loaded don’t correspond to the displayed styles’ is closed to new replies.