Here is the site address: sirloinsinn2.com. I don't have time to relearn how to share my SD files with you right now as I'm on the way out the door. But I'm using the Kobe template and I simply made minor changes. One (maybe not so minor) is the font. The restaurant owner got talked into Black Chancery font for signs & banners and no one asked me if it was websafe. So I'm trying to work with what they've chosen.

On desktop you can see where I've used this font. It all looks proper on desktop. The header/site title at the top of every page ("Sir Loin's Inn" is Black Chancery and the "II" is Monkins because the capital "I" in Black Chancery looks like a backwards P) and then some H2 items on the bottom of the Index page, and then on the Contact and Hiring pages.

But all Black Chancery reverts to arial on mobile everywhere EXCEPT the header/site title at the top of every page.
I understand this may be happening because Black Chancery is not websafe (and my attempts to convert it to WOFF I guess haven't worked since CC Site Designer acts like I haven't loaded anything when I load it in the Resourses while adding "custom fonts"), but why would it be showing up correctly on the site title but reverting to arial in the other places?

I've cleared cache on my phone and no change. Surely all websites aren't relegated to having only a handfull of "websafe" fonts and therefore all looking the same as each other. Any ideas?

New project?which framework?

If it's anything other than frameworkless then check you have activated all breakpoints (default mode )in the toggle breakpoints tab

I also noticed the menu icon isn't loading you may need reupload the font icons and the CSS folders.

Hi Wayan! It's been a while since we've chatted!
It is a new project, one that started with the Kobe CC template. So it is on Foundation framework.
The breakpoints are mostly disabled while I'm working on the site, but sometimes activated when I need to do a certain thing. Are you saying I need to click on "Default Mode" before I save and export the files?
I see the hamburger menu icon on all my mobile tests. And the Black Chancery font works on the site title on mobile but not on other parts of the site on mobile. Just wondering why it would work on some parts and not others, and how I may fix that.

I cannot see anything but the index page when clicking on the URL you posted.

It's a while since I've been working with custom fonts and font-kits, but I seem to remember that it is the "woff-2" variant you need to add. And then you need to make it global in Page Manager.

Ok, here is what's really happening:
I thought the font was working on desktop and it turns out it was only working on MY desktop because I have the font's loaded on my computer. I don't do this enough to remember these elementary things!

So somehow Black Chancery IS working for everyone everywhere in the only place I used it: The site title at the top of every page.

But my other Custom Font (Monkins) is not working anywhere. Almost all H2 items are supposed to be Monkins (like the address on the Contact page). It is loaded on the site in every format. And here is what the css looks like:

/*Custom Fonts Definitions*/

@font-face {
font-family: Monkins;
src: url('../custom_fonts/MONKINS.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: Black Chancery;
src: url('../custom_fonts/BLKCHCRY.woff') format('woff');
(font-weight: normal;
font-style: normal;
}

But again, the Black Chancery works and the Monkins does not.
I went to a woff-reader site and uploaded the Monkins woff file directly from my exported site files (the ones now on the server) and it verified that I have a full and proper woff file of Monkins. So it should be working on the live site just like the Black Chancery is. But it's not.

In the main.css at the bottom, you have the references to the two fonts, Black Chancery and Monkins. The latter is referenced as a ttf. I don't think ttf can be used when importing a custom font, it has to be woff, or as I said above, woff2

Another thing I found when looking at your source code. This may cause issues:



This is the main site title wrapped in more than 10 different nested classes. I bet that at least 9 of those classes are redundant. What I would have done is select the Reset tool, get rid of all styles, and then start over with only what is needed.

All those classes may have been added if you e.g. have changed your mind a couple of times without removing the style you had before adding a new style.

It looks like Black Chancery isn't loading on mobile due to it not being web-safe. Try double-checking your font upload and CSS rules, especially for mobile using media queries. If the issue persists, consider using a web-safe alternative for mobile.