Adding a Google Font Style to my site

kgphotos

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

Hikin' Mike

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

kgphotos

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' Mike

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

kgphotos

@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' Mike

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