Troubleshooting Custom Font Issues

What CSS are you using to specify the font family and face? How have youi added th fonts? There seem to be some errors related to a CSS file:

Aha! @sterndata, thank you! I hadn’t seen any errors until now. Not sure exactly what I’m seeing there, in your screenshot, but to answer your questions:

Yes, I’ve uploaded 12 font files and a .css file to a “fonts” folder at the top level of my theme folder.

I’ve added the fonts using the @font-face method.

The added .css file, entitled sample_stylesheet.css, contains the @font-face declarations:

@font-face {
    font-family: 'mreavessanot-reg';
    src: url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-reg-webfont.woff2) format('woff2'),
         url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-reg-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'mreavessanot-regitalic';
    src: url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-regitalic-webfont.woff2) format('woff2'),
         url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-regitalic-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'mreavessanot-bold';
    src: url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-bold-webfont.woff2) format('woff2'),
         url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-bold-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'mreavessanot-bolditalic';
    src: url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-bolditalic-webfont.woff2) format('woff2'),
         url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-bolditalic-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'mreavessanot-heavy';
    src: url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-heavy-webfont.woff2) format('woff2'),
         url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-heavy-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'mreavessanot-heavyitalic';
    src: url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-heavyitalic-webfont.woff2) format('woff2'),
         url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-heavyitalic-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;

}

I have also tried putting that css in the “Custom CSS” section of my theme, which is a child theme based on Mantra, but that had no effect.

I also tried
putting just the font file name in the url, in ‘single quotes.’
putting the entire url/path in quotes, both single and double

And neither of those moves had any effect.

Interesting what you say about there being an error related to a CSS file. Note, I also tried adding this,
<link rel="stylesheet" href="sample_stylesheet.css" type="text/css" charset="utf-8" />

as an HTML snippet, site-wide in the header, using the WP Code plug-in, but this also had no effect in terms of the font being viewable to other computers.

Does that info help at all? See any suspects?

My previous reply is being reviewed, which has answers to your questions, @sterndata. Meanwhile just wanted to say that now I see those css-related errors in my browser, using the dev tools. Not sure what to DO with them yet, but I see them. ; )

Hm. I tried removing the sample_stylesheet.css file and putting its contents in “Custom CSS” via Mantra’s Text Settings panel, and that yielded an interesting error related to http vs https, so I modified all the url’s to begin with https, but that just created a display delay on my dev computer, and the fonts still don’t appear to other computers.

I don’t see any reference to those fonts on your site. HOw are they currently added?

I’m seeing the font mreavessanot-bold used on your blog page.

Hm. They are uploaded to my theme’s directory, and I thought I had added them to my site by using that @font-face declaration, since it makes them appear on my site but on my local computer. Baffled that you don’t see any reference. You can’t see the @font-face lines that I added in CSS? I’m so confused. ; )

Oh thanks @gappiah! But they should be on other pages as well.

@gappiah I tried to do a fancy screenshot like yours but it got too complex. This is a page with different variants of the font, showing what the bold looks like. Clearly different from what your computer is showing: https://www.emigre.com/Fonts/Mr-Eaves-Sans-and-Modern

I decided to keep the urls to “https,” and this gets rid of a good number of “Mixed Content” errors. But I still have the original problem, that I only see the fonts on my dev computer, and on none of my other computers, i.e., over the Internet, and I get a whole slew of error messages that I’m not sure what to do with, even after looking them up.

@sterndata, @gappiah, and anyone else who might have dug into this, I’m going to clean up my site until I get this resolved and I’m putting the new-custom-fonts experiment over here. On this page you should be able to see two fonts, Mr. Eaves Heavy Italic, and Mr. Eaves Bold.

This is what it looks like, so far, only on my machine, and I’m trying to get it to look that way on yours. : )

The company got back to me, and led me to a fix!

Instead of
src: url(https://www.davidweiss.net/wp-content/themes/mantra-child/fonts/mreavessanot-regitalic-webfont.woff2)

It should be
src: url('/wp-content/themes/mantra-child/fonts/mreavessanot-regitalic-webfont.woff2')

That is, it needs

The directory structure, but not the domain
A leading /
And it needs to be surrounded by ‘single quotes.’

Thanks much @sterndata and @gappiah for digging into this! : )