• Resolved Gideon Jagged

    (@gideonjagged)


    I have several fonts embedded in my theme. After the most recent theme upgrade, these fonts are no longer displaying. I check my custom CSS and the file location on the back end – everything is in place and correct.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi GideonJagged

    Sorry to hear about the hassle. Could we check your site out so we can inspect the CSS? Please, send a link. Thanks.

    Thread Starter Gideon Jagged

    (@gideonjagged)

    alchemyoftheword.net

    Thanks.

    The only font family you’re specifying is Cardo and that is being successfully rendered.

    The following won’t render because you’re not listing their values anywhere that I can see:

    @font-face {
        font-family: 'aquilineregular';
        src: url('/wp-content/fonts/aquiline-webfont.eot');
        font-weight: 400;
        font-style: normal
    }
    @font-face {
        font-family: 'aquilinetworegular';
        src: url('/wp-content/fonts/aquilinetwo-webfont.eot');
        font-weight: 400;
        font-style: normal
    }
    @font-face {
        font-family: 'kazhiregular';
        src: url('/wp-content/fonts/kazhi-webfont.eot');
        font-weight: 400;
        font-style: normal
    }
    @font-face {
        font-family: 'bosporosuregular';
        src: url('/wp-content/fonts/bosporosu-webfont.eot');
        font-weight: 400;
        font-style: normal
    }
    @font-face {
        font-family: 'ezra_sil_srregular';
        src: url('/wp-content/fonts/sileotsr-webfont.eot');
        font-weight: 400;
        font-style: normal
    }

    Unless you’re using inline CSS to use the above. If that’s the case, please, let me know where the inline CSS is and I’ll take a look.

    Ahh ok, I see it. One moment…

    I’m no expert on web fonts but your problem might be that you’re missing several font types. I’m using OS X Chrome 45 for example, it doesn’t support EOT:

    https://caniuse.com/#feat=eot

    When you create a web font you usually land up with something like this:

    @font-face {
      font-family: 'MyWebFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
           url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
           url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

    https://css-tricks.com/snippets/css/using-font-face/

    Thread Starter Gideon Jagged

    (@gideonjagged)

    THis is the code in my custom css file

    @font-face {
    font-family: ‘aquilineregular’;
    src: url(‘/wp-content/fonts/aquiline-webfont.eot’);
    src: url(‘/wp-content/fonts/aquiline-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/aquiline-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/aquiline-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/aquiline-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/aquiline-webfont.svg#aquilineregular’) format(“svg”);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘aquilinetworegular’;
    src: url(‘/wp-content/fonts/aquilinetwo-webfont.eot’);
    src: url(‘/wp-content/fonts/aquilinetwo-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/aquilinetwo-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/aquilinetwo-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/aquilinetwo-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/aquilinetwo-webfont.svg#aquilinetworegular’) format(“svg”);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘kazhiregular’;
    src: url(‘/wp-content/fonts/kazhi-webfont.eot’);
    src: url(‘/wp-content/fonts/kazhi-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/kazhi-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/kazhi-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/kazhi-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/kazhi-webfont.svg#kazhiregular’) format(“svg”);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘bosporosuregular’;
    src: url(‘/wp-content/fonts/bosporosu-webfont.eot’);
    src: url(‘/wp-content/fonts/bosporosu-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/bosporosu-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/bosporosu-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/bosporosu-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/bosporosu-webfont.svg#bosporosuregular’) format(“svg”);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘ezra_sil_srregular’;
    src: url(‘/wp-content/fonts/sileotsr-webfont.eot’);
    src: url(‘/wp-content/fonts/sileotsr-webfont.eot?#iefix’) format(’embedded-opentype’), url(‘/wp-content/fonts/sileotsr-webfont.woff2’) format(‘woff2’), url(‘/wp-content/fonts/sileotsr-webfont.woff’) format(‘woff’), url(‘/wp-content/fonts/sileotsr-webfont.ttf’) format(‘truetype’), url(‘/wp-content/fonts/sileotsr-webfont.svg#ezra_sil_srregular’) format(“svg”);
    font-weight: normal;
    font-style: normal;

    Thread Starter Gideon Jagged

    (@gideonjagged)

    I have all the fonts formatted that way. I also have the files themselves in the /wp-content/fonts/ folder

    This is what your Custom CSS looks like after I’ve un-minfied it:

    @font-face {
        font-family: 'aquilineregular';
        src: url(/wp-content/fonts/aquiline-webfont.eot);
        font-weight: 400;
        font-style: normal
    }
    
    @font-face {
        font-family: 'aquilinetworegular';
        src: url(/wp-content/fonts/aquilinetwo-webfont.eot);
        font-weight: 400;
        font-style: normal
    }
    
    @font-face {
        font-family: 'kazhiregular';
        src: url(/wp-content/fonts/kazhi-webfont.eot);
        font-weight: 400;
        font-style: normal
    }
    
    @font-face {
        font-family: 'bosporosuregular';
        src: url(/wp-content/fonts/bosporosu-webfont.eot);
        font-weight: 400;
        font-style: normal
    }
    
    @font-face {
        font-family: 'ezra_sil_srregular';
        src: url(/wp-content/fonts/sileotsr-webfont.eot);
        font-weight: 400;
        font-style: normal
    }

    Try clearing your caching plugin’s cache and then de-activate CSS minification.

    If that doesn’t help, de-activate your caching plugin and re-test.

    Thread Starter Gideon Jagged

    (@gideonjagged)

    My code was in the wrong file. I put in in style.css and now it works fine. amateur error. derp.

    thanks for the help.

    —Gideon

    Awesome ?? Glad to hear you’re up and running and your CSS is now update safe.

    All the best with your site.

    Cheers

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘embedded fonts missing version 1.4.4’ is closed to new replies.