Google Fonts & CSS

2»

Comments

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins

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

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins

    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.

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited June 7, 2019

    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?

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited June 8, 2019

    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?}

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins

    Done, Nicholas. Thank you so much.

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited June 8, 2019

    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&amp;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.

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited June 8, 2019

    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?

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins

    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.

  • richWrichW Registered Users Posts: 941 Major grins

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

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    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

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • richWrichW Registered Users Posts: 941 Major grins

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

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited June 14, 2019

    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.

  • dideodideo Registered Users Posts: 2 Beginner grinner
    > @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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'}
    
  • dideodideo Registered Users Posts: 2 Beginner grinner
    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
Sign In or Register to comment.