Docs

[Chris-Anne]

Hi there!
I have set up some custom fonts with @font-face,
and I am calling them from my hosting space.

I can see them properly in the text box area, but they are being rendered with a faux bold effect and I cannot for the life of me figure out how to get these to render properly.

The page I am working on is http://chris-anne.com/big-sacred-business/
and I am trying to rebuild the bigsacred.com page.
You will see how the font should look there.

I have tried everything from setting up new classes to (currently) working with the page’s h1 tag.

Please help! 🙂
Chris-Anne

[Chris-Anne]

This reply has been marked as private.

[Chris-Anne]

I just noticed that the faux bold is also on the Open Sans below it- so it’s the whole page 🙁

[Rupok]

Hi there,

Thanks for writing in! I can see you have declared the font-family as “loraregular” :

h1 {
  font-family: "loraregular";
}

But on your font-face it’s just “lora”. Your old website says it “Lora”. So it seems you are not using the correct font-family.

Hope this makes sense.

Cheers!

[Chris-Anne]

Hi Rupok,
Thank you! I tried that yesterday and it didn’t work, so I changed all the names again.
I was missing a ; in my css and it set everything off.

Thank you so much! When I added the ; and changed the name back it worked beautifully.

I would love to see the theme allow you to choose more than one google font for the H Tags and titles, so that we could easily load the italics options along with the regular font. (ie: Raleway italics.) It would make designers happier with the font options 🙂 Maybe in a future release?

Thanks again for your help,

Chris-Anne

[Chris-Anne]

Shoot.
I replied too quickly.

The font renders perfectly WITHIN cornerstone, but as soon as it’s outside of cornerstone it’s too bold.

See attached 🙂

[Christopher]

Hi there,

Thanks for writing in!

Upon checking your site, I see the same result in both CS and frontend.
Please see the attachments.
Please clear cache and test again.

Hope it helps.

[Chris-Anne]

Hi Christoper,
thanks again for your help.
I think you are not seeing the same thing I am seeing 🙂
The font itself is the correct font.

But there a problem with how the theme is displaying it –
either anti- aliasing or forcing a slight bolder look.. I’m not sure.

Please take a peek and you will see the one from x-theme looks slightly more “dirty” / less crisp – a little fatter around the serifs. It makes a huge difference for the overall look and professional appearance and legibility of the site,when you do full paragraphs in this.

🙂 Is there anyway to force the theme to not mess around with how these are displayed?

Or maybe I have caused this somehow?

[Chris-Anne]

I think I figured it out!

I needed to add

-webkit-font-smoothing: antialiased;

to my css.

thanks!

[Rue Nel]

Hey There,

We are just glad that you have figured it out a way to correct the said issue.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[Author]

Posts