When changing theme’s font, why does font-size attribute not work? [duplicate]

Question

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!

Related Posts: