Docs

[goalsarecool]

I want to use 3 different font family’s throughout my site.

1.) How do I load the font so that it will appear throughout my site?

Podcast

[Joao]

Hi There,

Are they google fonts? Or Custom Fonts?

If they are google fonts, you can access this site : https://fonts.google.com/

Selec the font.

On the right bottom corner you will have “font family selected” > Open it and copy the @import to the customizer (that is just necessary if the font is not already loaded on X Typography)

Than copy this part of the code : font-family: ‘Open Sans’, sans-serif;

To the style box of your text element or style it inline.

Hope that helps,

Joao

[goalsarecool]

What if it’s a font that’s already in typography? I tried to add the following to a text file and it did not work

<span style="font-size: 20pt; font-family:Kalam">This is kalam.</span>

[Friech]

Hi There,

So it is a Google font, even if it is on typography but you did not set it on any option it won’t be loaded.

To load the font, please add this on top of your child theme’s style.css file.

@import url('https://fonts.googleapis.com/css?family=Kalam:300,400,700');

Then add this on the style field of the headline or text element or any applicable element.

font-family: 'Kalam', cursive;

Follow Joao’s instruction above on how to load the other Google Fonts.

Thanks.

[goalsarecool]

Can I add the following in Custom CSS of the customizer?

@import url('https://fonts.googleapis.com/css?family=Kalam:300,400,700');

If so, I guess I would need to do this for every google font I wanted to use throughout my site… correct?

[Friech]

Hi There,

No you cant, because customizer will generate CSS above that. You need to have that declaration on top of other Custom CSS.

Yes you need to, but Google has a way of importing multiple fonts at once.

e.g.
@import url('https://fonts.googleapis.com/css?family=Kalam|Reenie+Beanie|Roboto+Mono');

Please watch the clip below on how did I get that parameters.

https://vid.me/Yj3D

Thanks.

[goalsarecool]

I created a class and got it to work in Cornerstone. How do I get it to work in a regular text box or text tab of a page/post?

Also, in the style.css file, can i add a description above the code such as the following:

/* Add Font - Kaushan Script */
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');

[Friech]

You can wrap your text on a <span> tag and apply your class to that <span>

e.g.
<span class="YOUR-CLASS-NAME">Lorem ipsum dolor sit amet</span>

Yes, you can add a comment on that declaration.

Merry Christmas 🙂

[goalsarecool]

I’m testing these changes on my staging site. In Cornerstone, the font displays correctly. However, on the published page, the font is not displaying kaushan script.

Here is what i have in cornerstone text

<span style="font-size: 40pt;"><span class="myfont2"><strong>Let's Achieve Goals!</strong></span></span>

Here is what I have is customizer – custom css

.myfont2 {
font-family: 'Kaushan Script', cursive;
}

Here is what I have in style.css file

/* Add Font - Kaushan Script */
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');

Can you please tell me why it’s not showing up correctly here: http://goalsarecool.staging.wpengine.com/

Merry Christmas!

[Friech]

Hi There,

Is this (Kaushan Script) the font that you want to use? It works on my end.

Please clear your browser’s cache.

Cheers!

[goalsarecool]

Yes! The image you provided is what I see when I’m editing the text in Cornerstone. However, the attached image is what I see when i view the published content.

It doesn’t seem to work when applied to the text tab of pages/posts or when the page has been published in Cornerstone. However, it does work when editing text in Cornerstone.

My staging site (WP Engine) does not have cache that needs to be cleared.

[Friech]

Hi There,

But my screenshot if from front-page (published page). Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[goalsarecool]

This reply has been marked as private.

[Christopher]

Hi there,

Upon checking your site, CS and frontend preview are identical, please see the attachments. Try to clear cache on your browser or check it on another computer or laptop.
Your attachment didn’t upload, please resize and upload it again.

Thanks.

[Author]

Posts