Topic: google fonts for block quote

Tagged: x

1 2 →

Author

Posts
August 17, 2016 at 12:30 pm #1135471

jovanhove
Participant

Hello,

I’m trying to change the font of the block quote to a google font.
From other discussions I have understood that I need to add :

.x-blockquote {
font: ‘Roboto Condensed’;
font-size: 25px;
color: #ffffff;
}

to custom global CSS in customize.

But apparently that doesn’t do the trick ?
Font-size and color are changing though.

jo

August 17, 2016 at 1:10 pm #1135520

Rahul
Moderator

Hey There,

Thanks for writing in!

You can follow this thread for more information regarding your query with Google Fonts for Block Quote :

https://community.theme.co/forums/topic/font-adjustment-for-block-quotes/

Hope this helps!

August 17, 2016 at 3:09 pm #1135691

jovanhove
Participant

tnx for your answer rahul.

well that’s exactly the thread I followed 😉
but for one reason or another the google fonts are not picked up. any ideas ?

(btw i’m not using a child theme and the style and class settings are empty in the block quote customizr)

and this is a page where i used a block quote :
http://www.visitfloreffe.be/sejour/manger/moulinbrasserie/

jo

August 17, 2016 at 5:39 pm #1135883

Jade
Moderator

Hi Jo,

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

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

August 17, 2016 at 9:16 pm #1136137

jovanhove
Participant

This reply has been marked as private.

August 18, 2016 at 2:01 am #1136376

Rupok
Member

Hi there,

It seems you CSS is taking effect but make sure to load the font as well. How did you load the font? Are you using the Customizer > Typography or as custom font? There is not issue with your CSS. All you need to make sure to load the font.

Cheers!

August 18, 2016 at 4:24 am #1136504

jovanhove
Participant

hi,

in the customizer -> typography i cannot choose to change the block quote (would be handy for a next update)

i used @import url(http://fonts.googleapis.com/css?family=Roboto Condensed|Noto Sans|Alegreya Sans);
in the css for now – but that doesn’t help neither.

seems that i could add these lines to the wp-header.php of the stack i’m using :

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Roboto Condensed|Noto Sans|Alegreya Sans” media=”screen”>
<link rel=”stylesheet” type=”text/css” href=”ethos.css” media=”screen”>

correct ?

August 18, 2016 at 5:11 am #1136554
Rad
Moderator
Hi there,

Thanks for posting in.

Yes, you could as long as it’s within <head></head> or simply add this to your child theme’s functions.php
```
add_action('wp_head', 'head_style_costume');

function head_style_costume() { ?>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto Condensed|Noto Sans|Alegreya Sans" media="screen">
<link rel="stylesheet" type="text/css" href="ethos.css" media="screen">
<?php }
```
Hope this helps.
August 18, 2016 at 7:12 am #1136680

jovanhove
Participant

great – tx !

just found something that’s worth sharing in the forum – i added the plugin ‘code snippets’ to wordpress and instead of editing global css or wp-header.php, i have added the code there. and that works just right !!

August 18, 2016 at 8:26 am #1136751

Friech
Moderator

Hi There,

Glad you sorted things out. But the @import statement should do just fine, if you add it on top of your child theme’s style.css file.

Cheers!

December 2, 2016 at 1:35 am #1278498

yoni_BD
Participant

Hey there,

I have the same problem with my website. I have tried to go through this thread and the above suggested thread with no success.

I am trying to change the font-family to:
font-family: ‘Aref Ruqaa’, serif;

The first font doesn’t stick and falls back to the serif font.

Any idea on how to fix this?

Thanks in advance,
Yoni

December 2, 2016 at 1:47 am #1278505

Rupok
Member

Hi Yoni,

Would you share the code you are using? And provide your URL as well.

Thanks!

December 2, 2016 at 3:41 am #1278580
yoni_BD
Participant
Hey Rupok,

Sure, sorry about that!

the URL is http://79.170.44.118/dorismassage.com/wordpress/

With regards to code, I’ve been trying all the suggestions from this thread – https://community.theme.co/forums/topic/font-adjustment-for-block-quotes/

This includes:
```
.x-blockquote {
  font-family: Helvetica;
  font-size: 24px;
  color: #000;
}

.x-blockquote .x-cite {
  font-family: Helvetica;
  font-size: 16px;
  color: #aaa;
}

AND

.x-blockquote {
font-family : "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif!important; 
}
```
Thanks for the help!
December 2, 2016 at 3:55 am #1278596

Rad
Moderator

Hi there,

I don’t see that CSS being implemented anymore. I tested the CSS and it’s working, except the font.

The Aref Ruqaa font isn’t loaded on your site. It should be pulled from google first through customizer’s typography. Or by adding this manually to your child theme’s style.css

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

Hope this helps.

December 2, 2016 at 6:43 am #1278700

yoni_BD
Participant

Hi Rad,

Thanks for the quick response!

On customizer’s typography I cannot control the block quote text. Or maybe I don’t understand your instructions?

Since I’m a beginner, could you please confirm that what I am doing to the chid theme’s style.css is correct:

Appearance -> Editor -> style.css: here under the commented text, I simply pasted the line:
@import url('https://fonts.googleapis.com/css?family=Aref+Ruqaa');

By doing the above, I haven’t had any luck.

Thanks again for your help and sorry if I am not understanding your instructions!

Yoni
Author

Posts

1 2 →