[ChipsnchampagneParticipant]

Hi guys,

I am using Roboto Mono on my website and it works for desktop.
Unfortunately it’s not working for mobile.

url: chipsnchampagne.com (PW in seperate message)
wp: 4.6
X: 4.6.1

Can you help me out here?

Best,
Christoph

[ChipsnchampagneParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Christoph,

Upon checking, Roboto font doesn’t work in desktop also. That is because you have not selected it in the Customizer. Could you tell us where you loaded it?

Thanks.

[ChipsnchampagneParticipant]

Hi,

thank you for checking. I guess it works on my desktop since I have have that font installed on it.
Is there a way to use/upload a third font, in this case Roboto Mono, when it’s not selected in the Customizer?

Best,
Christoph

[RupokMember]

Hi Christoph,

Thanks for writing back. You have set “Muli” for the Body font and “Mosterrat” for the heading fonts from Customize > Typography.

You didn’t set the font “Roboto Mono” anywhere just declared within your CSS. So it will just work on the devices which have that font installed. Like I can see the font on my desktop because I have installed the font on my PC.

So you need to load the font first. You can set the font from Customize > Typography or add the below code within Customzier > Custom > CSS :

@import 'https://fonts.googleapis.com/css?family=Roboto+Mono';

Hop this makes sense.

[ChipsnchampagneParticipant]

Hi,

thank you Rupok. I added the code here: Customzier > Custom > CSS as suggested and it’s doing the trick for the homepage but not for “chipsnchampagne.com/neuvonfrisch” which is strange.
Do you have an idea why that might be?
(Is it maybe connected to the classes? On the homepage I edited the text by styling and on the neuvonfrisch page I changed the classes.)

[RupokMember]

Hi there,

You have added the font-family with inline CSS for the home page and doing nothing for the other page. There is no custom class that contains the font-family. So you need to either add this manually with Style field (like the homepage) or declare a custom class and use this class for the elements like this :

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

.my-custom-font {
  font-family: 'Roboto Mono', monospace;
}

Now you can use the class my-custom-font to avail the font-family to the element.

Hope this makes sense.

[ChipsnchampagneParticipant]

Hi,

thanks a lot for you quick reply.
I hear you 🙂

From this two questions arose:

This altered class below does have the Font in it. Doesn’t count?

h6, .h6 {
	font-family: "Roboto Mono", Courier, monospace;
  	font-weight: 400;
 	font-size: 15px; 
  	margin-top: 0px;
  	margin-bottom: 0px;
  	line-height: 1.5;
  	text-transform: none;
}

And I used your class von the neuvonfrisch page as well but doesn’t seem to be working either.

.my-custom-font {
		font-family: 'Roboto Mono', monospace;
		font-weight: 400;
		font-size: 15px; 
		line-height: 1.5;
}

Sorry to be a pain -_-

Hope you can help.

[Paul RModerator]

Hi,

I checked your page – http://chipsnchampagne.com/neuvonfrisch

but didn’t see the class my-custom-font getting added to any element.

I also didn’t see an h6 headline in your page.

Can you please specify which text in your page you want the font to applied.

Thanks

[ChipsnchampagneParticipant]

Hi,

thank you for checking. I’ve attached to jpg’s to clearify. Hope that helps.

[JoaoModerator]

Hi There,

Please add the following line to Appereance Customizer Custom CSS

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

It will work.

Hope that helps

Joao

[ChipsnchampagneParticipant]

Hi,

thank you for that.
Your colleague posted this one before:
@import ‘https://fonts.googleapis.com/css?family=Roboto+Mono’;

I replaced it with the code you provided but it still doesn’t work.
Do you have another ideawhat it could be?
There is still the option of doing this manually over the style field but I was hoping to be able to this with classes.

[JoaoModerator]

Hi There,

Please add on your Cornerstone > Settings > Custom > CSS

Of the specific pages you want to use.

I have tested on your website and it works.

We will investigate why it is not working.

Thanks,

Joao

[ChipsnchampagneParticipant]

damn. ok. I do it manually then.
Thanks for yours efforts though!

Best,
Christoph

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts