Adding a Google Font Style to my site

kgphotoskgphotos Registered Users Posts: 106 Major grins
edited May 30, 2017 in SmugMug Customization

I've read a few forum posts, but can't figure this out. I would like to use the Lora font Italic style as my Logo text. The problem is that I can't call it out in the Logo box as my only choices are Normal 400 and Bold. How can I get the Lora Italics style for my logo text? I am not that familiar with font codes, so if someone could pull the @font-face codes that I need, how to call it out in my logo and where to put it- I am going to say the Theme CSS, I would appreciate it.

My site: www.imaginelivecapture.com

Thank you!
Karen

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 31, 2017

    I'm using Lora Italic Bold on my headers. Just add this to your theme's CSS:

    @font-face {
        font-family: 'Lora';
        font-style: italic;
        font-weight: 700;   
        src: local('Lora Bold Italic'), 
             local('Lora-BoldItalic'), 
             url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7fY6323mHUZFJMgTvxaG2iE.eot'),
             url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7fY6323mHUZFJMgTvxaG2iE.eot?#iefix') format('embedded-opentype'),
             url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7VtXRa8TVwTICgirnJhmVJw.woff2') format('woff2'), 
             url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'),
             url('http://fonts.gstatic.com/s/lora/v9/_IxjUs2lbQSu0MyFEAfa7aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
        }
    
    .sm-user-ui .sm-page-widget-logo-text .sm-page-widget-logo-s a{
        font-family: 'Lora', sans-serif;
        }
    

    If you just want to use regular italic, use this instead:

    @font-face {
      font-family: 'Lora';
      font-style: italic;
      font-weight: 400;
      src:  local('Lora Italic'), 
            local('Lora-Italic'), 
            url('https://fonts.gstatic.com/s/lora/v10/EJ2E0VlN4DLy-wT0t9nagw.eot'),
            url('https://fonts.gstatic.com/s/lora/v10/EJ2E0VlN4DLy-wT0t9nagw.eot?#iefix') format('embedded-opentype'),
            url('https://fonts.gstatic.com/s/lora/v10/_RSiB1sBuflZfa9fxV8cOg.woff2') format('woff2'),
            url('https://fonts.gstatic.com/s/lora/v10/9imnXKme9i4It2hFQOvfvevvDin1pK8aKteLpeZ5c0A.woff') format('woff'),
            url('https://fonts.gstatic.com/s/lora/v10/5Ay4Lbc6l_v4RrGh5wBv6evvDin1pK8aKteLpeZ5c0A.ttf') format('truetype');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
        }
    
    .sm-user-ui .sm-page-widget-logo-text .sm-page-widget-logo-s a{
        font-family: 'Lora', sans-serif;
        }
    
  • kgphotoskgphotos Registered Users Posts: 106 Major grins

    Hi @Hikin' Mike ,

    Thank you for giving me the code. I am using Safari on a Mac and I tried pulling the codes via the User Agent. But I guess I copied to much code or not enough. Anyways, I put the code you gave me in the theme's CSS and it didn't work. Do I have to call it out via CSS in the entire site?

    Thank you, Mike
    -Karen

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @kgphotos said:
    Hi @Hikin' Mike ,

    Thank you for giving me the code. I am using Safari on a Mac and I tried pulling the codes via the User Agent. But I guess I copied to much code or not enough. Anyways, I put the code you gave me in the theme's CSS and it didn't work. Do I have to call it out via CSS in the entire site?

    Thank you, Mike
    -Karen

    I put my CSS in my theme's site-wide CSS and it works.

  • kgphotoskgphotos Registered Users Posts: 106 Major grins

    @Hikin' Mike

    Got it to work! Had to use the !important word to call it out. BTW, is it ok to use that? I've read conflicting info on this. I have a bunch of !important on my site. The help desk has used them in my CSS.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @kgphotos said:
    @Hikin' Mike

    Got it to work! Had to use the !important word to call it out. BTW, is it ok to use that? I've read conflicting info on this. I have a bunch of !important on my site. The help desk has used them in my CSS.

    Sorry about that. I first type in the CSS in Notepad++ and copy that code into Firebug's Web Tools. It didn't work and I had to use the !important. Just forgot to add that when I replied here.

    Generally you don't need that. By prefixing .sm-user-ui to most CSS you don't have to use the !important tag. Sometimes not.

    Glad it's working!

Sign In or Register to comment.