DavidSortOf

Ok thanks for that, especially with the warning and background. I figured it would involve something like this. I’m going to leave things alone regarding this. ; )

George, that’s it! I had a feeling I was missing something obvious. It’s a post, not a page. And yes, .postid-64 did the trick. Thanks much! : )

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! : )

@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. : )

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.

@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

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

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. ; )

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.

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. ; )

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?

Rock n’ roll; works well! Thank you so much! : )

Update: I just randomly checked the page and the margin changes took effect. Very strange, but all set now; thanks again!

Hi Mark, actually I do have a question:

I added this

.wp-block-embed-soundcloud iframe {
height: 100px;
margin-top: -17px;
margin-bottom: -17px;
}

Which works, in the preview pane, but after I Publish, only the height parameter takes effect. I tried shift-refreshing the browser but that didn’t work. Theme is Twenty Thirteen if that makes any difference. Thanks!

Hey, thanks Mark! I ended up using the embedpress plug-in, which lets me change the size, but I’ll try your code, since this would be sans plug-in.

• This reply was modified 3 years, 2 months ago by DavidSortOf.