Docs

[kkendall2010]

I’ve been trying to change the font of my custom headlines by adding google fonts and changing the class. I found this thread https://community.theme.co/forums/topic/change-custom-headline-font/

and I adjusted to my own font I wanted to use, no luck. Tried following the example, no luck.

[kkendall2010]

This reply has been marked as private.

[Joao]

Hi There

Another way to achieve that is to type the font-family straight to the Style Box of your custom headline.

Please see img attached.

I recommend you googling before just to be sure you are using the right name , Google for exampe: CSS font-family Oswald

Instead of Oswald use the name of the font you intend to use, that way you will be sure to use the right name.

Ex of code to put on style box:

font-family: Oswald;

Hope that helps,

Joao

[kkendall2010]

Using this method I wouldn’t have to add anything to the style sheet?

[kkendall2010]

Tried this method, no luck. I’d like to use Pacifico and Love Ya Like A Sister

[Joao]

Hi There,

Yes using this method you don´t have to do anything on customizer os stylesheet.

Unfortunely it won´t work for Love Ya Like A Sister ( I Just tested it)

For Pacifico you simply add one of this code below to the style box of your Text or custom headline like on the picture above provided

font-family: Pacifico;

In Order to use Love Ya Like a Sister

You will need to follow Friech´s instructions on the other thread:

Add this custom css on your child theme’s style.css file

@import url(http://db.onlinewebfonts.com/c/52d4a6a3bd7d00a6996670e249db3e63?family=Love+Ya+Like+A+Sister+Solid);

.sister { font-family: font-family: Love Ya Like A Sister; }

and then you will need to assign the class (sister) to the CLASS BOX (Not Style BOX like in the case of pacifico)

Hope that helps,

Joao

[kkendall2010]

Still no luck, I attached screen shots of what I have and what shows up when I inspect the element. I added the css to the style.css sheet before assigning the class

[kkendall2010]

This reply has been marked as private.

[Jade]

Hi there,

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.

[kkendall2010]

This reply has been marked as private.

[Jade]

Hi Kendall,

Thanks for the details. We could load the Google Fonts using the JS code provided so that the fonts will be usable on your site.

I did some testing which you can find on this page: http://agroliquid.staging.wpengine.com/font-test/

On that page, I have loaded the JS code from Google Font in the Cornerstone Custom JS specific to that page only but you can place this code in the customizer’s Custom JS code so that the two font’s will be usable throughout the site:

WebFontConfig = {
    google: { families: [ 'Love+Ya+Like+A+Sister::latin', 'Pacifico::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

After loading the fonts, you can then use them through inline CSS of through a CSS class like these:

style field font-family: 'Pacifico';

CSS class

Add a class name to the element. Please make sure you don’t add a period before the class name in the class field. Once you added the class then you could add a the CSS code in the customizer like this:

.sister {
  font-family: 'Love Ya Like A Sister', cursive;
}

Hope this helps.

[kkendall2010]

Thank you SO SO much!!! So glad to finally get this working!!!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts