How to use google font?

Anh Tu Nguyen

I found some topics here by using search function and did exactly the same what they said but it didn't work.
Font I want to use: Cormorant Garamond.
Thanks!

Hikin' Mike

What exactly did you do? Specifically I need to see the CSS you used and where you put it.

I wrote a tutorial on using non-Google fonts: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

denisegoldberg

I wonder if SmugMug needs to do something to enable additional Google fonts. I don't see this font in the fonts available in my theme yet it does show as a google font (https://fonts.google.com/specimen/Cormorant+Garamond?selection.family=Cormorant+Garamond).

Hikin' Mike

@denisegoldberg said:
I wonder if SmugMug needs to do something to enable additional Google fonts. I don't see this font in the fonts available in my theme yet it does show as a google font (https://fonts.google.com/specimen/Cormorant+Garamond?selection.family=Cormorant+Garamond).

I didn't look. I just "assumed" he was wanting to add more than two Google fonts.

denisegoldberg

@Hikin' Mike said:

@denisegoldberg said:
I wonder if SmugMug needs to do something to enable additional Google fonts. I don't see this font in the fonts available in my theme yet it does show as a google font (https://fonts.google.com/specimen/Cormorant+Garamond?selection.family=Cormorant+Garamond).

I didn't look. I just "assumed" he was wanting to add more than two Google fonts.

I suspect that was a good assumption.

I was surprised when I looked to see that it wasn't in the list of fonts - guess I shouldn't have been surprised because it appears there are many more Google fonts available than those that show in the selection for a theme.

Anh Tu Nguyen

I chose theme, then clicked on the wrench icon to customize, then clicked on the advance tab, then custom css and pasted this code:

@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
src: local('Cormorant Garamond'), local('CormorantGaramond-Regular'), url(https://fonts.gstatic.com/s/cormorantgaramond/v1/EI2hhCO6kSfLAy-Dpd8fdzehyQKIkN4MZo2nKYy7bH0.woff) format('woff');
}

Anh Tu Nguyen

Why does smugmug make a simple task like changing and customizing font such a pain in the ***?
My site www.tunguyenwedding.com

Anh Tu Nguyen

Here is my site: www.tunguyenwedding.com

Anh Tu Nguyen

Here is my site: www.tunguyenwedding.com

denisegoldberg

Did you run through all of the steps that leftquark specified on the page Use Additional Google Fonts?

The reason I ask is that your CSS references local, and the example on his page points to the URL on Google.

Hopefully leftquark or Hikin' Mike will jump back in here.

Hikin' Mike

Since you didn't mention if you're using it on a specific page/gallery etc., I'm going to assume you want it everywhere. You added the @font-face to your CSS but you didn't tell it "where". Add this to your CSS:

.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-nui {
    font-family: 'Cormorant Garamond', 'Ubuntu Condensed', Roboto, Helvetica, Arial, sans-serif;
    }

Anh Tu Nguyen

@Hikin' Mike said:
Since you didn't mention if you're using it on a specific page/gallery etc., I'm going to assume you want it everywhere. You added the @font-face to your CSS but you didn't tell it "where". Add this to your CSS:

.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-nui {
  font-family: 'Cormorant Garamond', 'Ubuntu Condensed', Roboto, Helvetica, Arial, sans-serif;
  }

Thank you Mike.
I did what you said but nothing changed :P

Hikin' Mike

@Anh Tu Nguyen said:
Thank you Mike.
I did what you said but nothing changed :P

Looks like you removed the code. I take it you're not going to use that Font?