Docs

[emigriff]

Hi everyone,

I’m trying to make the .blockquote font on this page a script font instead of valero like the other body text.

First I tried the method of uploading my own files on my server in the theme folder and it actually worked! But it looked bad so I tried linking to two other fonts and uploaded them and everything and nothing worked.

So I gave up on using I font I selected from the web and tried to use the Google font Cookie. I put cookie in the css like this:

blockquote {
font-family: “Cookie”,sans-serif;
}

I got nothing. See my screenshot to see where I am trying to change the font. How can I get this font to change? I don’t know why it only worked the first time. I cleared my cache and tried them all again but still no avail.

Thanks in advance.
Emily

[Christopher]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Please add following code in child theme’s style.css file :

@import url('https://fonts.googleapis.com/css?family=Cookie');

blockquote.x-blockquote.center-text {
    font-family: 'Cookie', cursive;
}

Hope it helps.

[emigriff]

Hi Christopher,

thanks for your help here. So just to clarify, if we are ever adding in the “Customizing Additional CSS” in the global settings, we should make a child theme?

But if we are just adding css within the page editors, we are fine?

Let me know your thoughts. I will start to go through and try to make a child theme now.

[emigriff]

Update: I made a child theme but am unable to copy files over to the child theme folder. And then I’m not sure how to edit. My FTP won’t let me download the content-quote.php file and I can’t find it in the Editor in the Appearance section on WordPress.

I assume it’s the quote file controlling the css for the blockquote but it’s just my best guess. Do you know what file I would need to copy over?

Then do I just edit the stylesheet directly in the editor in the appearance section on WP?

[Christopher]

Hi there,

You shouldn’t edit php file, after activating child theme, access style.css file under Appearance -> Editor, see the attachment.

Hope it helps.

[emigriff]

Hi Christopher, that makes sense, thank you!

Hmm I added it to the CSS but the font isn’t changing. I tried clearing my cache but the font shows up as Lato. I looked everywhere to find a sign of Cookie but can’t. Do you have any other suggestions?

Thanks so much,
Emily

[emigriff]

Also separate question but if I have any other changes in my Global CSS (attached a screenshot of where I’ve been adding this on the theme), should I put those in this file instead? Or is the child theme for things like adding fonts that aren’t originally a part of the theme?

Thanks in advance again.

Emily

[emigriff]

I uploaded the font files via FTP to the child theme folder at this path: /public_html/midiatoursglobal/wp-content/themes/x-child/framework/fonts/

Then I added this in the CSS Customizer to the child theme –

@font-face {
font-family: ‘debbyscript’;
src: url(‘/public_html/midiatoursglobal/wp-content/themes/x-child/framework/fonts/debby-webfont.woff2’) format(‘woff2’),
url(‘/public_html/midiatoursglobal/wp-content/themes/x-child/framework/fonts/debby-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

blockquote.x-blockquote.center-text {
font-family: ‘debbyscript’, cursive;
}

blockquote {
font-family: ‘debbyscript’, cursive;
}

No luck. Maybe I could provide my login so you could take a look? Weird that I got this to work once and never again :/

Thanks!

Emily

[Lely]

Hello Emily,

Please try updating the following CSS:

@font-face {
    font-family: 'debbyscript';
    src: url('/public_html/midiatoursglobal/wp-content/themes/x-child/framework/fonts/debby-webfont.woff2') format('woff2'),
         url('/public_html/midiatoursglobal/wp-content/themes/x-child/framework/fonts/debby-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

To this:

@font-face {
    font-family: 'debbyscript';
    src: url('/wp-content/themes/x-child/framework/fonts/debby-webfont.woff2') format('woff2'),
         url('/wp-content/themes/x-child/framework/fonts/debby-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Either customizer CSS or child theme’s style.css file is fine. In case you want to just consolidate every custom CSS, you may move it in child theme’s style.css. In terms of precedence, X theme style.css is loaded first, then child theme, then customizer CSS.

Hope this helps.

[emigriff]

Hi! Thanks so much for your help. I tried the code you gave me and dang, not working still. I tried putting it in the Customizer CSS and in the child them style.css and still no avail. Is there a best practice to uploading these font files so the website links to them properly? I’ve tried a few ways but just can’t seem to get the site to link to my font files.

I provided a screenshot to the text I’m trying to change on this page: http://www.midiatoursglobal.com/home/

That font stays Lato no matter what I do!

Thanks so much in advance.

[Christopher]

Hi there,

Please update this code :

blockquote {
   font-family: "Cookie",sans-serif; 
}

To :

blockquote {
    font-family: 'debbyscript';
}

Hope it helps.

[emigriff]

Thanks Christopher! That worked!

I am wondering one last thing – is it possible to change the font underneath the quote of who the quote comes from.

I am trying to use:
.cite.x-cite {
font-family: “Varela Round”,sans-serif;
}

But I’m wondering if that’s not working since this text is also a part of this:

.blockquote.x-blockquote center-text {
font-family: ‘debbyscript’;
font-size: 300%;
}

I attached a screenshot of where I want to change the font. Maybe it’s not possible in this style. not a dealbreaker but thought it would look nice to make the name a different font.

Thanks again,

Emily

[emigriff]

SORRY I’m such a pain with this.

I also tried to change the font of .h2.h-custom-headline cs-ta-left h2 – circled in the screenshot

I added the font Patino-Basica to my file database in the same place as Debby-script so figured it would work.

I added this code to my customizer CSS:

@font-face {
    font-family: 'Patino-Basica';
    src: url('/wp-content/themes/x-child/framework/fonts/Patinio-Basica.woff') format('woff'),
         url('/wp-content/themes/x-child/framework/fonts/Patinio-Basica.ttf') format('truetype');
		url('/wp-content/themes/x-child/framework/fonts/Patinio-Basica.svg') format('svg'), 
		url('/wp-content/themes/x-child/framework/fonts/Patinio-Basica.eot') format('eot');
    font-weight: normal;
    font-style: normal;

}

.h2.h-custom-headline cs-ta-left h2 {
	font-family: 'Patino-Basica';
}

.h2 {
	font-family: 'Patino-Basica';
}

But it’s still showing up as Varela Round. Is that because I selected that in the global theme editor? But I thought this CSS would override it.

Thanks again for your help.
Emily

[emigriff]

Hi again haha… I was able to change the Patinio font issue by moving all my CSS from “Additional CSS” to Edit Global CSS option in the customizer. Do you know why there is two options there?

Still wondering about the font underneath the quote but no worries if not possible to change.

Thanks!

Emily

[Paul R]

Hi Emily,

Edit Global CSS is being added by the theme while Additional CSS was just recently added by wordpress.

We suggest you add your css in Edit Global CSS so you can easily export your theme settings for backup.

Thanks

[Author]

Posts