Google Fonts & CSS

thenickdude

You'll need to remove that whole @font-face { } block because it's now made useless by SmugMug stripping the "src" part of it out (if Buda is your theme font then the @font-face block could even be breaking that).

ChancyRat

thenickdude! I was going to not reply on this thread, but maybe I should, because you did? I didn't see that you did because you landed on p. 2.
So - what code DO I put in my site-wide CSS? For what it's worth, I removed the @font-face section, and then I changed fonts in the options list and in fact the site can and does (now) show different google fonts from Smugmug's list. But - Buda breaks. I want Buda. The Smugmug help folks wrote me this:

1. The specific browser you use substitutes the font. Hence it may work in Chrome but not Firefox, as was discussed in that DGrin thread.
   [Note, the thread she's referring to is this one: https://dgrin.com/discussion/comment/2082081]
2. Your OS does not have the font in your font book. An update to your OS may have caused that to be lost.
   If you have Buda specified in your CSS, and there's no conflicting code that interferes with it, then those would be the reasons for the font not being displayed.

My site: JoinRats.com
The problem: I've lost Buda on the site after many years of Buda working.

Thanks, and I will kick myself a lot for posting the problem on 2 different threads.

thenickdude

It's weird because if you view-source on your homepage, the fonts that SmugMug is trying to load are these:

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?subset=latin-ext&family=Roboto%3A100%2C300%2C400%2C500" >
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?subset=latin-ext&family=Fredericka+the+Great%3A400%7CArapey" >

That's Roboto, Fredericka the Great and Arapey, with Arapey being the one that's applied to your body text. There's no Buda at all, SmugMug isn't even trying to load it. Are you sure it's saved as your body font in your theme settings?

ChancyRat

No, Nicholas I removed Buda and changed to another one. I put in several different fonts as tests, one after the other, and all worked except Buda. I really could not stand Roboto so I had to put in something while trying to figure out Buda. Should I put it back so that you can see the code?

EDIT: NEVER MIND. The message to approve the extension to access content on my site had appeared in my secondary monitor, which I didn't see. It's working now! {While I have you, I also just installed (fresh install on new computer) your Chrome extension, and I cannot enable it. I mean, it's active and live, but clicking the "Enable" link does nothing at all. Which is funny because I also installed it on a work computer recently and used it successfully there. Now at home I get nothing. How should I contact you or what should I do?}

thenickdude

Yes, please put that Buda font back and I'll take a look.

ChancyRat

Done, Nicholas. Thank you so much.

thenickdude

Okay, it looks like the problem is with SmugMug's integration with Google Fonts. SmugMug is using this URL to load your fonts:

https://fonts.googleapis.com/css?subset=latin-ext&family=Fredericka+the+Great:400|Buda

If you visit that link though you'll notice that Buda isn't mentioned anywhere. If you remove Fredericka you can see why:

https://fonts.googleapis.com/css?subset=latin-ext&family=Buda

Shows the error "The requested font families are not available. Requested: Buda (style: normal, weight: 400)".

The problem is that Buda is only available in weight 300, but SmugMug is requesting weight 400. SmugMug will need to fix this for you to be able to use Buda.

ChancyRat

AHHH, insanity averted. Thank you! So - I can go with Arapey for now. Should I tell Smugmug, or who would, or how?

Editing to add that there are other fonts in Smugmug's list that don't work. Maybe that list needs some overall updating?

thenickdude

Yeah, let SmugMug support know that any Google fonts that don't have a "normal" weight variant available are currently broken. They can probably update their system to request Light variants when Normal variants are not available.

richW

@thenickdude said:
Yeah, let SmugMug support know that any Google fonts that don't have a "normal" weight variant available are currently broken. They can probably update their system to request Light variants when Normal variants are not available.

thenickdude, I'll make sure the engineers and product team is aware of the issue.
Thanks for the report.

leftquark

We had a few engineering interns start this week and ironically one of them picked up this issue and has a fix for it that’s waiting on the QA team. Buda and several other fonts should be working again in a few days. We’ll post back here when it’s done.

-Aa

richW

@leftquark said:
We had a few engineering interns start this week and ironically one of them picked up this issue and has a fix for it that’s waiting on the QA team. Buda and several other fonts should be working again in a few days. We’ll post back here when it’s done.

-Aa

The fix for this was pushed last night.

ChancyRat

I'm not sure this fix was put through. When I choose Buda, the message shows me 400. But as Nick pointed out, Buda is only available in 300.

EDIT: Sorry, my error. It's my other font, Fredericka the Great that is 400. Buda does come through just fine. THANKS.

dideo

> @thenickdude said:
> You'll need to remove that whole @font-face { } block because it's now made useless by SmugMug stripping the "src" part of it out (if Buda is your theme font then the @font-face block could even be breaking that).

Hello,

I try to use a google font called Poppins, whic is not in the smugmug list. So I've followed all your instructions to generate the code necessary. But I don't understand what you mean by removing whole @font-face {} block.
What should be finally the code ?

I've this now and it works some places, other not.

didieroberson.smugmug.com

@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrFJM.woff) format('woff'),
url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrFJPUdVNF.woff) format('woff');
}

@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'),
url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7V1hvEv-L.woff) format('woff');
}

What should I change, or remove ?

And how to apply this font family for whole site ? Should I list all the style ?

Thanks for help

Didier

Hikin' Mike

@dideo said:

Nick hasn't been here in almost 2 years.

You need to put your custom CSS in your Theme's custom CSS section: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

Then you should be able to add this:

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src:  url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2'),
        url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrFJM.woff) format('woff'),
        url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrFJPUdVNF.woff) format('woff');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src:  url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format('woff2'),
        url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7V1g.woff) format('woff'),
        url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7V1hvEv-L.woff) format('woff');
}

.sm-nui,
.sm-user-ui body,
.sm-user-ui select,
.sm-user-ui input,
.sm-user-ui button,
.sm-user-ui textarea,
.sm-user-ui .yui3-g [class*="yui3-u"],
.sm-user-ui .yui3-g-r [class*="yui3-u"],
.sm-user-ui h1,
.sm-user-ui h2,
.sm-user-ui h3,
.sm-user-ui h4,
.sm-user-ui h5,
.sm-user-ui .sm-title-xl,
.sm-user-ui .sm-h1,
.sm-user-ui .sm-h2,
.sm-user-ui .sm-h3,
.sm-user-ui .sm-h4,
.sm-user-ui .sm-h5,
.sm-user-ui .sm-heading {font-family: 'Poppins'}

dideo

Thank you Mike for your help, but it seems that some class are missing in the list you have to apply the right font to all texts.

I will check to complete the list. It's a tedious job.
Smugmug could update his fonts list.

Have a good day
Didier