lolikols lolikols - 1 month ago 20
CSS Question

Importing a google font via CSS

I'm trying to use a google font in my website. I've used this before:

@import url(http://fonts.googleapis.com/css?family=Cantata+One);
#MasterHeaderWrap .TopNav .rtsLevel1 .rtsLink .rtsTxt { font-family: 'Cantata One', serif !important; text-transform: uppercase !important;}


And it worked to change the font. The correct font was displaying. However, when I try to use the same format for this font:

@import url(https://fonts.googleapis.com/css?family=Exo);
#MasterHeaderWrap .TopNav .rtsLevel1 .rtsLink .rtsTxt { font-family: 'Exo', sans-serif !important; text-transform: uppercase !important;}


It's not displaying properly. I mean the font changes, but it's definitely not Exo. Can anyone advise?

Just as a disclaimer here, I don't have access to the HTML backend, I only have access to a CSS editor on the website, so all I can do is plug in these css snippets.

Edit: I got it! All I had to do was rearrange my code. Thank you guys! You're all magicians in my book!

Answer

Try with this:

@import url(https://fonts.googleapis.com/css?family=Exo);

#MasterHeaderWrap .TopNav .rtsLevel1 .rtsLink .rtsTxt {
    font-family: 'Exo Regular', sans-serif !important; text-transform: uppercase !important;
  /*------------------^^^^^^^ */
}

EDIT

Well, I think you have your website through HTTP, so the request to google fonts needs to be HTTP and not HTTPS, so this works:

@import url(http://fonts.googleapis.com/css?family=Exo);
/* ------------^^*/
#MasterHeaderWrap .TopNav .rtsLevel1 .rtsLink .rtsTxt {
    font-family: 'Exo', sans-serif !important; text-transform: uppercase !important;
}