Docs

[Gorillo]

I want to have a custom font (hosted on my website) on all of my page, and I have managed to use font face and CSS to change it. The problem is that I can’t seem to change the font on two places. That is the navbar and also posts that are made via The Grid.

I have used the code:

.x-navbar {
font-family: “Planeta-Light”;
}

Planeta-Light is my font. Nothing happens to the navbar-buttons.
I have tried various settings for the text (which are Post Title and Woo Commerce: Price) from The Grid-posts but I’m a CSS newbie so I can’t seem to figure it out.

Would be so thankful for help. In the pictures, the pink “Moloton”-logo is the right font. It’s right in the WooCommerce-cart and in blogposts, body-text and other headings but I can’t nail these last two.

Thanks beforehand
All the best

[Friech]

Hi There,

Thanks for writing in! Please update your css code for the menu items to this:

.x-navbar ul.x-nav li.menu-item a span {
	font-family: "Planeta-Light", cursive !important;
}

And provide us the site URL so we can take a closer look on the Posts Grid.

Cheers!

[Gorillo]

Thank you so much! It worked perfectly. The URL is http://www.moloton.com/
The Grid posts are under “Releases”.

I noticed that the font doesn’t show up when on mobile (tried from my iPhone). Is that something that is possible to fix?

Thanks again!

[Gorillo]

I noticed now that the font will show up in Chrome and Safari on my computer correctly but on mobiles and other computers and browsers like IE and Firefox there is like three to four different fonts showing up.

[Gorillo]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in and providing the information. Upon checking, all your font file path does not exist. Where did you uploaded the fonts? Could please provide the correct path where the font files were located. Because at the moment, the fonts does not exists in these paths:
http://moloton.com/fonts/Planeta-Light.eot
http://moloton.com/fonts/Planeta-Light.eot?#iefix
http://moloton.com/fonts/Planeta-Light.woff
http://moloton.com/fonts/Planeta-Light.ttf
http://moloton.com/fonts/Planeta-Light.svg#Planeta-Light

Please let us know how it goes.

[Gorillo]

This reply has been marked as private.

[Gorillo]

Now when I have uploaded them to the right place and linked to the right place in CSS, it works on mobile but not on web browsers on other computers.

[Rad]

Hi there,

It’s due to Cross-domain issue, please change your CSS to this

@font-face {
    font-family: 'Planeta-Light';
    src: url('http://www.moloton.com/fonts/Planeta-Light/Planeta-Light.eot');
    src: url('http://www.moloton.com/fonts/Planeta-Light/Planeta-Light.eot?#iefix') format('embedded-opentype'),
        url('http://www.moloton.com/fonts/Planeta-Light/Planeta-Light.woff') format('woff'),
        url('http://www.moloton.com/fonts/Planeta-Light/Planeta-Light.ttf') format('truetype'),
        url('http://www.moloton.com/fonts/Planeta-Light/Planeta-Light.svg#Planeta-Light') format('svg');
}

And move it to your child theme’s style.css before any other CSS.

Hope this helps.

[Gorillo]

Thank you so much! Now it works! Fantastic!

I have one more question. There’s a white quite thick frame around my WooCommerce product pictures. I managed to remove them from all pages but the actual product page. On each of the individual product pages the white frame is still there. How do I remove them?

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

.single-product .x-img-thumbnail {
	padding: 0;
}

Hope it helps, Cheers!

[Gorillo]

Thank you, it worked! I’ve looked everywhere for the code. You are being super helpful!

I actually have one more question now, I managed to solve my other problem with The Grid.

So here goes: It may have to do with my font, but it only shows up on some browsers and on some places. I’m talking about some weird symbols that look like ‘planets’ on places in the WooCommerce cart where I guess there are supposed to be spaces. Also on one occasion in my example ‘About’-text where there are supposed to be a space.

Is there anyway to remove them? Maybe change the color for the text on that particular part to transparent, or some way to get into the code to just plainly remove them?

Thank you for all of your very useful help!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

th.product-remove, th.product-thumbnail {
    color: transparent;
}

Hope it helps.

[Gorillo]

Thank you! It removed the symbols on the cart page but on the checkout page there is one as well, that’s still there. Is it also some kind of thumbnail?

[Rue Nel]

Hello There,

I can confirm that the issue occur in your site. This happens because Planeta font renders   as a dot. You can check out a related thread here: https://bugs.chromium.org/p/chromium/issues/detail?id=454108

I would recommend that you change your font instead and make sure that the font will render a space correctly and not display it as a dot.

Please let us know how it goes.

[Author]

Posts