This question already has an answer here: @font-face doesn't work (1 answer) Closed 5 years ago.

Since my theme's font doesn't support my language, I add this code to style.css to change the font. It does work:

@font-face {
    font-family: 'new-baskerville';
    font-style: normal;
    src: url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot');
    src: local('new-baskerville'), url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot') format('embedded-opentype'), url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.woff') format('woff');
}

.new-baskerville{font-family: 'new-baskerville' !important;}

        body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a, #menu-main-menu li a, #menu-main-menu li span, font-size: 20 em;{
    font-family: 'new-baskerville' !important;
}

However, the font-size attribute doesn't work. Even if I set it as 20 em, it still the same size. Why does this happen?

^{(That code is generated by Use Any Font plugin)}

This question already has an answer here: @font-face doesn't work (1 answer) Closed 5 years ago.

Since my theme's font doesn't support my language, I add this code to style.css to change the font. It does work:

@font-face {
    font-family: 'new-baskerville';
    font-style: normal;
    src: url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot');
    src: local('new-baskerville'), url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot') format('embedded-opentype'), url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.woff') format('woff');
}

.new-baskerville{font-family: 'new-baskerville' !important;}

        body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a, #menu-main-menu li a, #menu-main-menu li span, font-size: 20 em;{
    font-family: 'new-baskerville' !important;
}

However, the font-size attribute doesn't work. Even if I set it as 20 em, it still the same size. Why does this happen?

^{(That code is generated by Use Any Font plugin)}

• css
• fonts

Share Improve this question asked Aug 26, 2019 at 9:19 OokerOoker 33244 silver badges2323 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

I don't want to sound too critical, but you might want to review how to properly introduce a new font, and apply font styles content. The declaration that you presented appears to have a couple of issues:

• Using ".new-baskerville" would cause everything with the class "new-baskerville" (and ONLY those with that class) to appear with font-family of new-baskerville.
• Using "!Important" in this context can cause issues. It should really only be used to override a locally defined, or "inline" style.

• The following line is completely malformed:

  body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a, #menu-main-menu li a, #menu-main-menu li span, font-size: 20 em;{
      font-family: 'new-baskerville' !important;
  }
  

• I believe you were trying to do something more like the following code example, but that is still problematic, because it applies the same font-size to everything:

  body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a, #menu-main-menu li a, #menu-main-menu li span{
      font-size: 20 em;
      font-family: "new-baskerville",helvetica, san-serif; /* providing fallbacks for browsers that may not be able to interpret new-baskerville */
   }
  

Instead, individual items should have their own relative font-sizes. Also, "em" sizes are relative. So, you might start by applying a default font size to the body. This will cause all the other font-size declarations ("em", "rem", etc) to adjust "relative to" the body's default. I would recommend changes similar to this:

@font-face {
    font-family: 'new-baskerville';
    font-style: normal;
    src: url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot');
    src: url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.eot') format('embedded-opentype'), 
        url('/wp-content/uploads/useanyfont/190811081519New-Baskerville.woff') format('woff');
    }

/* Provide a base font size for the entire page */
body { 
    font-family: 'new-baskerville',garamond,san-serif;
    font-size: 14px; 
}

h1 { font-size: 2em; font-weight: bold; }
h2 { font-size: 1.75em; font-weight: bold; }
h3 { font-size: 1.5em; font-weight: bold; }
h4 { font-size: 1.45em; font-weight: bold; font-style: italic;}
... etc...

EDIT: Something you might want to follow up on ... Not all web servers are setup with mime types configured for eot, woff, woff2, etc. You might need to setup mime types for your server. BTW ... the author doesn't mention woff2. That mime type is font/woff2.

Hope this helps!

You have at least one syntax error in your code. Start by changing this part:

body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a, #menu-main-menu li a, #menu-main-menu li span, font-size: 20 em;{
    font-family: 'new-baskerville' !important;
}

To this:

body, h1, h2, h3, h4, h5, h6, p, blockquote, li, a, #menu-main-menu li a, #menu-main-menu li span {
    font-family: 'new-baskerville' !important;
    font-size: 20 em;
}

The styles have to be inside the brackets. The font-size style was outside the brackets in the list of elements to target. The syntax error (probably from the ;) caused everything inside the bracket fail.