[shrinkgurlParticipant]

Hi I am trying to change a line of text to a different font style to the Lato that I have selecetd for body text. I have tried to add a CSS selector and style but it doesn’t work. I change size colours etc but not style.

I want to have a magic marker typeface …. I have also tried adding the google font I want to the functions child theme but that doesn’t seem to work either.

Help!!! My site is in development locally

[shrinkgurlParticipant]

THis is what I added to the funtions file:

function child_scripts(){

wp_enqueue_style(‘child-google-fonts’,’//fonts.googleapis.com/css?family=Covered+By+Your+Grace’);

}

add_action(‘wp_enqueue_scripts’,’child_scripts’);

[shrinkgurlParticipant]

I sorta think I hav e found a solution

by adding this code

<span style=”color: #fff; font-family: ‘Indie Flower’, cursive !important;”>Sample Text</span>

I saw this is another support question with a similar issue.
What I need to ask is can I use any of the fonts installed because they don’t seem to be changing when I try this.

And if I add a google font am I right in calling the function in the child theme function PHP?

[shrinkgurlParticipant]

No its still not working! Something amiss Should I be adding a font form installed fonts somewher I am not?

[NicoModerator]

Hi There,

Thanks for writing in.

It would be really difficult to check your setup because it is setup locally but we will try to trace if you missed something.

Have a you tried other fonts which are default in the theme. If not, you could try it then let see whether the code in the function.php.

You could add fonts using the font face as well, try following thread below on how to add and use new font to the theme.

https://community.theme.co//forums/topic/adding-fonts/

Let us know how it goes.

Thanks.

[shrinkgurlParticipant]

Yes I have tried other font and they don’t work! I seem to going around in circles with this. I thought I had solved it but apparently not.

[LelyModerator]

Hello There,

I tried your code and the font works:
I’ve added the following in the child theme function.php

function child_scripts(){
wp_enqueue_style('child-google-fonts','//fonts.googleapis.com/css?family=Covered+By+Your+Grace');
}
add_action('wp_enqueue_scripts','child_scripts');

And then to use it:
<span style="color: #fff; font-family: 'Covered By Your Grace' !important;">Sample Text</span>
When you access this on a browser:http://fonts.googleapis.com/css?family=Covered+By+Your+Grace ,
you will see this:

/* latin */
@font-face {
  font-family: 'Covered By Your Grace';
  font-style: normal;
  font-weight: 400;
  src: local('Covered By Your Grace'), local('CoveredByYourGrace'), url(http://fonts.gstatic.com/s/coveredbyyourgrace/v6/6ozZp4BPlrbDRWPe3EBGAxIQb9tn0GTKNjAuszxKf4A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

And this font-family: 'Covered By Your Grace'; is what you have to use in the CSS

Hope this helps.

[shrinkgurlParticipant]

This reply has been marked as private.

[LelyModerator]

Hello Kathy,

Thanks for the admin credentials. Upon checking your code, the background doesn’t work because you have CSS syntax error. Semi-colon is missing from you height property declaration.
This is what I see on the browser inspect element:
height: 475px background-color:#ffffff;
That part of code doesn’t work. Please update to this:
height: 475px; background-color:#ffffff;

As you can see I added ; after 475px

Hope this helps.

[shrinkgurlParticipant]

This reply has been marked as private.

[shrinkgurlParticipant]

This reply has been marked as private.

[shrinkgurlParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Please use the code below instead, place this on top of your custom css in the customizer

@import url(http://fonts.googleapis.com/css?family=Covered+By+Your+Grace);

Then use the font like this

font-family: 'Covered By Your Grace', cursive !important;

Hope it helps, Cheers!

[shrinkgurlParticipant]

Yeah it worked ! now how do I use the already installed fonts?

[FriechModerator]

Hi There,

Define a class on your custom css

.myclass {
	font-family: font-family: 'Covered By Your Grace', sans-serif !important;
}

And then apply that class on the element you want to have an Covered By Your Grace font.

e.g.
<span class="myclass">Sample Text</span> or <h2 class="myclass">Sample Text</h2> or
<p class="myclass">Sample Text</p>

If this does not work, please make sure all the CSS rule on your Customizer had an closing bracket }

Hope it helps, Cheers!

[Author]

Posts