Docs

[Loes v]

Hi x team,

Were are planning a big design change on our site.
Fist this to do is using a custom font.
So I added some code in the style.css of my child theme.
I used this method:
https://community.theme.co/forums/topic/how-do-i-add-my-own-font-and-use-everywhere/

As a benchmark I wanted to display the site by this method with the google fonts I used by x.
So I downloaded the ttf on google fonts, converted them in woff, svg and eot.
Uploaded them to a folder on the server.

There is a difference in displaing the headers in a “custom headline” with accent.
The font is shifted downward relative to the horizontal line.
See these two pages:
With google font:

home

With custom font:
http://www.loesvanoosten.com/testpage/

I know, I’m very picky, I just want to know what differences this method will offer me.
I tried some workarounds of vertical text alignment in the style.css but none was working.

Is there a workaround to display the custom headlines centered with the accent?

Thanks for your reply!
Koen

[Nabeel A]

Hi Koen,

Thanks for writing in! Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.h-custom-headline.accent span {
    font-size: 24px !important;
    letter-spacing: 0.015em !important;
    line-height: 1.1 !important;
}

Let us know how this goes!

[Loes v]

The result is still the same.
Other suggestions???

[Paul R]

Hi,

You can try adding this in custom css in the customizer

body .h-custom-headline.accent span {
    padding-bottom: 5px;
}

Hope that helps.

[Loes v]

Yes, this one does the trick.
Tanks for helping me out!

Kind regards, Koen

[Paul R]

You’re welcome! 🙂

[Author]

Posts