Google Fonts & CSS

adiadidas15adiadidas15 Big grinsPosts: 10Registered Users Big grins
edited March 27, 2014 in SmugMug Customization
Hello,
I am using my own HTML element as a header to my homepage. I'd like to use a special font for this element. I have followed Google Fonts "use" instructions by adding the following CSS:
font-family: 'Tangerine', cursive;
For some reason only the cursive font seems to be taking effect (not Tangerine). I am using Firefox 23. Any idea why Tangerine isn't working? I also tried adding the html which Google suggests (as below) to my html header element, but when I save my changes and then go back in to edit this element, the line of code is gone...
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
«1

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited September 9, 2013
    Try using the "@import method" instead of the link. Just paste that in the top of your site-wide CSS.
    @import url(http://fonts.googleapis.com/css?family=Tangerine);
    
  • adiadidas15adiadidas15 Big grins Posts: 10Registered Users Big grins
    edited September 9, 2013
    Hikin' Mike,
    That didn't work either, but I am not 100% sure I understood your instructions. I went to my Active Theme's settings, clicked the Advanced tab, then Edit my Custom CSS. I added your line of code to the top. Is this what you meant? Thanks for your help.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited September 9, 2013
    Yep, that's what I meant, but I guess Smugmug doesn't support the @import in CSS any more.
  • adiadidas15adiadidas15 Big grins Posts: 10Registered Users Big grins
    edited September 9, 2013
    Thanks anyway. By the way, I like your site!
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited September 9, 2013
    Thanks! Sorry it didn't work. Maybe SM can add that to their list.
  • leftquarkleftquark SmugMug Product Team Posts: 3,465Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited September 10, 2013
    I had asked SmugMug Support Heroes about this ... currently there's no way to load more fonts than the 2 that are imported for your main/body sections on the site. It's a big bummer :(
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • thenickdudethenickdude Software developer Posts: 1,292Registered Users Major grins
    edited September 10, 2013
    The reason this isn't currently possible is that you can't load CSS from an external resource, and all the default Google Fonts work that way. However, you *can* load a font-face from an external resource. So with a little hackery to serve the right font to the right browser (especially IE9), you can add this to your CSS:
    @font-face {
    	font-family: 'Tangerine';
    	font-style: normal;
    	font-weight: 400;
    	src: 
    		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'),
    		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'),
    		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
    }
    

    Now Tangerine should be available for use. Tested & working in IE9, IE10, Firefox latest, Chrome latest, Safari latest.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited September 10, 2013
    Lamah wrote: »
    The reason this isn't currently possible is that you can't load CSS from an external resource, and all the default Google Fonts work that way. However, you *can* load a font-face from an external resource. So with a little hackery to serve the right font to the right browser (especially IE9), you can add this to your CSS:
    @font-face {
        font-family: 'Tangerine';
        font-style: normal;
        font-weight: 400;
        src: 
            url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'),
            url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'),
            url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
    }
    
    Now Tangerine should be available for use. Tested & working in IE9, IE10, Firefox latest, Chrome latest, Safari latest.

    Didn't even think about using @font-face. I used that on another site (non-SM) I run. Thanks! thumb.gif
  • adiadidas15adiadidas15 Big grins Posts: 10Registered Users Big grins
    edited September 10, 2013
    Thanks Lamah!
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited September 11, 2013
    Lamah wrote: »
    The reason this isn't currently possible is that you can't load CSS from an external resource, and all the default Google Fonts work that way. However, you *can* load a font-face from an external resource. So with a little hackery to serve the right font to the right browser (especially IE9), you can add this to your CSS:
    @font-face {
        font-family: 'Tangerine';
        font-style: normal;
        font-weight: 400;
        src: 
            url([B]http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix[/B]) format('embedded-opentype'),
            url([B]http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff[/B]) format('woff'),
            url([B]http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf[/B]) format('truetype');
    }
    
    Now Tangerine should be available for use. Tested & working in IE9, IE10, Firefox latest, Chrome latest, Safari latest.

    I have a question. Where did you get the URLs for the font?
  • leftquarkleftquark SmugMug Product Team Posts: 3,465Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited September 11, 2013
    Lamah wrote: »
    The reason this isn't currently possible is that you can't load CSS from an external resource, and all the default Google Fonts work that way. However, you *can* load a font-face from an external resource. So with a little hackery to serve the right font to the right browser (especially IE9), you can add this to your CSS:
    @font-face {
    	font-family: 'Tangerine';
    	font-style: normal;
    	font-weight: 400;
    	src: 
    		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'),
    		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'),
    		url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
    }
    

    Now Tangerine should be available for use. Tested & working in IE9, IE10, Firefox latest, Chrome latest, Safari latest.

    Also, as an FYI: If you want to embed multiple fonts, just do additional @font-face { blah } lines. You can use these in any CSS. For example:
    @font-face {
    	font-family: 'Tangerine';
            ...
    }
    @font-face {
    	font-family: 'Roboto Condensed';
            ...
    }
    @font-face {
    	font-family: 'Open Sans';
            ...
    }
    
    h1 { font-family: 'Tangerine'; }
    h2 { font-family: 'Roboto Condensed'; }
    .sm-whatever-div-you-want { font-family: 'Open Sans'; }
    
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 3,465Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited September 11, 2013
    I have a question. Where did you get the URLs for the font?

    Go to www.google.com/fonts and find the font you want. Click "use". It gives you a link to the style sheet. For Tangerine, for example, it gives: "http://fonts.googleapis.com/css?family=Tangerine";

    Paste that stylesheet link into IE and you get a CSS file that looks like:
    @font-face {
      font-family: 'Tangerine';
      font-style: normal;
      font-weight: 400;
      src: url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot);
      src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'),
             url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }
    

    You can see the first one gives you the .EOT file path ... and hte last one gives you the .woff file path.

    To get the TTF URL is a bit more complicated. I followed the directions here to spoof my Firefox browser as if it was Safari 5.1.4. Loading the stylesheet then gave me the URL for the ttf file.
    http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited September 11, 2013
    leftquark wrote: »
    Go to www.google.com/fonts and find the font you want. Click "use". It gives you a link to the style sheet. For Tangerine, for example, it gives: "http://fonts.googleapis.com/css?family=Tangerine";

    Paste that stylesheet link into IE and you get a CSS file that looks like:
    @font-face {
      font-family: 'Tangerine';
      font-style: normal;
      font-weight: 400;
      src: url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot);
      src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'),
             url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
    }
    
    You can see the first one gives you the .EOT file path ... and hte last one gives you the .woff file path.

    To get the TTF URL is a bit more complicated. I followed the directions here to spoof my Firefox browser as if it was Safari 5.1.4. Loading the stylesheet then gave me the URL for the ttf file.
    http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html

    I'm not using 'Tangerine'. I'm using another font (Muli and Open Sans Condensed Bold), so I need that URL. I went and generated my own @font-face using "Font Squirrel Generator" and uploaded them to my other (non-SM) site. I'm still curious about the URL.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited September 11, 2013
    I just read your link. Sounds like a pain to do that, so I'll just keep my fonts loaded on my other site.
  • leftquarkleftquark SmugMug Product Team Posts: 3,465Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited September 11, 2013
    I'm not using 'Tangerine'. I'm using another font (Muli and Open Sans Condensed Bold), so I need that URL. I went and generated my own @font-face using "Font Squirrel Generator" and uploaded them to my other (non-SM) site. I'm still curious about the URL.

    I just listed tangerine as an example so you could replicate it, then do it using your own fonts... It's up to you to pull the URLs you want but here's something to get you started:

    Download a "User Agent Switcher" for Chrome or Firefox.
    1) Type the following links into your browser (first left at default Chrome or Firefox).
    2) Grab the woff link it gives you in the CSS file that loads.
    3) Change your User Agent to IE and reload
    4) Grab the eot link it gives in the CSS file
    5) Change your User Agent to Safari 5.1.4 and reload
    6) Grab the ttf link it gives in the CSS.
    7) Take the 3 links you grabbed and generate your CSS as defined above.

    For Muli: http://fonts.googleapis.com/css?family=Muli
    For Open Sans Condensed Bold: Repeat with http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700

    I got those URLs by going to https://www.google.com/fonts and typing in "Muli" in search, then click on "Quick-Use", then scrolling down to the "3. Add this code to your website" section and getting the URL from either "Standard" or "@import";.

    It certainly is a pain :)
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • thenickdudethenickdude Software developer Posts: 1,292Registered Users Major grins
    edited September 15, 2013
    If you're using the Exo body font, SmugMug only loads the Thin and Regular weight variants, so you can't make Bold or Italic text. Here's the CSS code which loads those Bold or Italic variants for Exo, using the same method described by leftquark above:
    @font-face {
    	font-family: 'Exo';
    	font-style: normal;
    	font-weight: 700;
    	src:
    		url(http://themes.googleusercontent.com/static/fonts/exo/v1/OqFmJmsFlYjHnwejpSKkeA.eot?#iefix) format('embedded-opentype'),
    		url(http://themes.googleusercontent.com/static/fonts/exo/v1/2Qm7q1bJBA_zQozsmNjYk-vvDin1pK8aKteLpeZ5c0A.woff) format('woff'),
    		url(http://themes.googleusercontent.com/static/fonts/exo/v1/EzuTFo66hFh-uPBO_c4r-OvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');
    }
    
    @font-face {
    	font-family: 'Exo';
    	font-style: italic;
    	font-weight: 400;
    	src:
    		url(http://themes.googleusercontent.com/static/fonts/exo/v1/j5-A0SDRUMMsVNSIuqr_tg.eot?#iefix) format('embedded-opentype'),
    		url(http://themes.googleusercontent.com/static/fonts/exo/v1/BOSU_kNwP2WleVy2r3VgP6CWcynf_cDxXwCLxiixG1c.woff) format('woff'),
    		url(http://themes.googleusercontent.com/static/fonts/exo/v1/tnTyh-_bPF08fC7p1nvHmKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
    }
    

    You'll also need to add CSS to allow em/i/strong/b tags to choose those fonts again (the default theme disables them):
    i, em {
    	font-style: italic;
    }
    
    b, strong {
    	font-weight: bold;
    }
    

    Just posting in case somebody else finds it useful! If I have to do this too many more times, I'll make a tool which automatically generates the CSS for a given Google font :).
  • LiveAwakeLiveAwake Major grins Posts: 263Registered Users Major grins
    edited March 26, 2014
    Just posting in case somebody else finds it useful! If I have to do this too many more times, I'll make a tool which automatically generates the CSS for a given Google font :).

    Let us all know if you do that!! This is a real pain, esp. for we who don't really know our way around coding anyway. I can't believe the lame fonts we are locked into by SM without this very complicated process! Why SmugMug??

    I'm trying to get 'Cantata One' but I feel a little lost with all the user agent switching and code compiling. :cry
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited March 26, 2014
    LiveAwake wrote: »
    Let us all know if you do that!! This is a real pain, esp. for we who don't really know our way around coding anyway. I can't believe the lame fonts we are locked into by SM without this very complicated process! Why SmugMug??

    I'm trying to get 'Cantata One' but I feel a little lost with all the user agent switching and code compiling. :cry

    How about this:
    @font-face {
        font-family: 'Cantata One';
        font-style: normal;
        font-weight: 400;
        src:url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZWfQcKutQXcIrRfyR5jdjY8.eot'),
            url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZWfQcKutQXcIrRfyR5jdjY8.eot?#iefix') format('embedded-opentype'), 
            url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZYbN6UDyHWBl620a-IRfuBk.woff') format('woff'),
            url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZZ0EAVxt0G0biEntp43Qt6E.ttf') format('truetype');
    }
    
  • LiveAwakeLiveAwake Major grins Posts: 263Registered Users Major grins
    edited March 26, 2014
    How about this:
    @font-face {
        font-family: 'Cantata One';
        font-style: normal;
        font-weight: 400;
        src:url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZWfQcKutQXcIrRfyR5jdjY8.eot'),
            url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZWfQcKutQXcIrRfyR5jdjY8.eot?#iefix') format('embedded-opentype'), 
            url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZYbN6UDyHWBl620a-IRfuBk.woff') format('woff'),
            url('http://themes.googleusercontent.com/static/fonts/cantataone/v3/Ur66QXTDfN1RjqAm41DRZZ0EAVxt0G0biEntp43Qt6E.ttf') format('truetype');
    }
    

    You are amazing. bowdown.gif

    One last thing - can someone tell me the code to make this (or any) font the default for plain text on my site? I figured out how to do it for headers, but what about just normal text?

    THANK YOU!!
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited March 27, 2014
    LiveAwake wrote: »
    You are amazing. bowdown.gif

    One last thing - can someone tell me the code to make this (or any) font the default for plain text on my site? I figured out how to do it for headers, but what about just normal text?

    THANK YOU!!

    If you've changed the header font, then under that you'll see 'Body Font'. If your using 'Cantata One' on either Header or Body font then you don't need to use the @font-face CSS.
  • LiveAwakeLiveAwake Major grins Posts: 263Registered Users Major grins
    edited March 27, 2014
    If you've changed the header font, then under that you'll see 'Body Font'. If your using 'Cantata One' on either Header or Body font then you don't need to use the @font-face CSS.

    I apologize, but you lost me. Where will I see "Body Font"? I don't see anywhere that SmugMug allows me to choose fonts in text boxes (just size using the heading/normal selector).

    I managed to use the code you gave me inside an HTML/CSS block to get the headers to show up in Cantata One by adding the code below, but I don't know the tag for the body text so it still shows as the ugly default font.
    h1 {
      font-family: 'Cantata One';
    }
    
    h2 {
      font-family: 'Cantata One';
    }
    
    h3 {
      font-family: 'Cantata One';
    }
    
    h4 {
      font-family: 'Cantata One';
    }
    
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited March 27, 2014
    LiveAwake wrote: »
    I apologize, but you lost me. Where will I see "Body Font"? I don't see anywhere that SmugMug allows me to choose fonts in text boxes (just size using the heading/normal selector).

    I managed to use the code you gave me inside an HTML/CSS block to get the headers to show up in Cantata One by adding the code below, but I don't know the tag for the body text so it still shows as the ugly default font.
    h1 {
      font-family: 'Cantata One';
    }
    
    h2 {
      font-family: 'Cantata One';
    }
    
    h3 {
      font-family: 'Cantata One';
    }
    
    h4 {
      font-family: 'Cantata One';
    }
    

    There is no selection on individual HTML blocks. If you want to your headers and body fonts to be site-wide, then you select that in your Theme's CSS... Customize > Customize Site > Entire Site > Theme > "wrench icon" > Fonts".

    If this is just for one page, you need this for both headers and body fonts:
    body, html, h1, h2, h3, h4, h5, h6 {
        font-family: 'Cantata One';
        }
    
  • LiveAwakeLiveAwake Major grins Posts: 263Registered Users Major grins
    edited March 27, 2014
    There is no selection on individual HTML blocks. If you want to your headers and body fonts to be site-wide, then you select that in your Theme's CSS... Customize > Customize Site > Entire Site > Theme > "wrench icon" > Fonts".

    If this is just for one page, you need this for both headers and body fonts:
    body, html, h1, h2, h3, h4, h5, h6 {
        font-family: 'Cantata One';
        }
    
    Oh wow . . . well that's embarrassing. I didn't even realize I could customize the fonts within the theme. I thought SM just stuck us with that one terrible font and required these complicated work-arounds to use anything else.
    THANK YOU!
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins
    edited March 27, 2014
    Glad to help.

    Using the @font-face is a way to add more than 2 fonts. I use that to load a different font for the navigation stuff.
  • LiveAwakeLiveAwake Major grins Posts: 263Registered Users Major grins
    edited March 27, 2014
  • ChancyRatChancyRat Soooo Beginner Grinner Oakland, CAPosts: 2,130Registered Users Major grins
    edited June 7, 2019

    I'm still on a hunt to get Buda back up and actively working on my site. It worked for years and then poof out. (See this thread: https://dgrin.com/discussion/comment/2082070.)
    The nickdude, lamah, and leftquark all provided code above, but when I go the google font site and start to dig in, none of the instructions work any more. (Example: Leftquark's "Go to www.google.com/fonts and find the font you want. Click "use"." As far as I can see there is no Use option.

    Anyway, what I see in the examples here is that my current code seems to be lacking one of the urls. I have 3 but the examples above have 4. And maybe the other URLs have changed?

    Would someone take pity on me--who-has-no-coding-skill and update this code for Buda? I'll try it in my site-wide CSS and see if that does the trick and then come back if not.

    /*@font-face {
    font-style: normal;
    font-weight: 400;
    src:
    url(http://themes.googleusercontent.com/static/fonts/buda/v3/xpKVHc19vcKaqMGd7JtK-A.eot?#iefix) format('embedded-opentype'),
    url(http://themes.googleusercontent.com/static/fonts/buda/v3/3N6IHhwL9GuAVU1WX0Z9CA.woff) format('woff'),
    url(http://themes.googleusercontent.com/static/fonts/buda/v3/In5nPPB6p1Mco64syFRrYQ.ttf) format('truetype');
    }

    Many thanks!

  • ChancyRatChancyRat Soooo Beginner Grinner Oakland, CAPosts: 2,130Registered Users Major grins

    Okay by tripping over instructions I forced a "find" of some code but I still don't know what to do with it as it doesn't resemble anything close to the above URLs:
    Via this link: https://fonts.googleapis.com/css?family=Buda:300&display=swap
    I get this:

    /* latin */
    @font-face {
    font-family: 'Buda';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Buda Light'), local('Buda-Light'), url(https://fonts.gstatic.com/s/buda/v9/GFDqWAN8mnyIJSSrK7ILrg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,277Registered Users Major grins

    @ChancyRat said:
    Okay by tripping over instructions I forced a "find" of some code but I still don't know what to do with it as it doesn't resemble anything close to the above URLs:
    Via this link: https://fonts.googleapis.com/css?family=Buda:300&display=swap
    I get this:

    /* latin */
    @font-face {
    font-family: 'Buda';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Buda Light'), local('Buda-Light'), url(https://fonts.gstatic.com/s/buda/v9/GFDqWAN8mnyIJSSrK7ILrg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    What are you trying to do?

    What is your website?

    You should have started a new thread.

  • thenickdudethenickdude Software developer Posts: 1,292Registered Users Major grins

    It seems that SmugMug is now stripping the "src" attribute from the CSS - so it's preventing you from loading fonts from other sources using this method.

  • ChancyRatChancyRat Soooo Beginner Grinner Oakland, CAPosts: 2,130Registered Users Major grins

    ARGH. Sooo sorry. I will go back to the thread (more recent one) that I did start. It's just that the code suggestions on this thread are apropos to the problem.

Sign In or Register to comment.