[Salman AParticipant]

Hi,

I want to change the fonts on my theme:
http://www.salmaanaslam.com

I want to use any of these Google Fonts in the Post Titles and different Sub-headings.
Cutive/Arvo/Bitter/Neuton

Can you please guide me how to do it? I tried adding custom css to select those elements but it didn’t work.

[ChristopherModerator]

Hi there,

Would you provide us with the URL and custom CSS you added in Customizer so we can take a look at it.

Thank you.

[Salman AParticipant]

URL:
http://www.salmaanaslam.com

CSS Code:
.h1 { font-family: ‘Cutive’, serif; }
.h2 { font-family: ‘Cutive’, serif; }

[ChristopherModerator]

Hi there,

Add this style instead of yours

h2.entry-title a {
font-family: cutive;
}

h1.h-landmark span {
font-family: cutive;
}

Hope that helps.

[Salman AParticipant]

Thanks. It worked.

I changed to Neuton Font but it did change but doesn’t look as clean as this one

http://briangardner.com/google-font-combinations/

Any ideas how to make it like it?

[Salman AParticipant]

On Homepage the title size should be like this:
http://briangardner.com/genesis-tutorials/

and when open it should increase
http://briangardner.com/google-font-combinations/

[RadModerator]

Hi Salman,

Add this css for your single pages.

.page .entry-title, .single .entry-title  {
font-size: 300% !important;
}

Cheers!

[Salman AParticipant]

Hi,

I’ve added that code and changed the font to Neuton but it doesn’t look like this also I tried to reduce content width to have spacing like the example:

http://briangardner.com/google-font-combinations/

I don’t mind having a full width and the content to be short of shrinked in width so users don’t have to move much
http://coschedule.com/blog/interview-arienne-raven-tools/

[Kosher KMember]

Hello,

I’m not sure where did you added this

<link href="//fonts.googleapis.com/css?family=Cutive:400" rel="stylesheet" type="text/css">

but I’ve seen it from the very top of the source code.

Can you please advise where you added that code? it should be inside the head tag and you can simply add it inside the head tag by adding this code below in you child theme functions.php

add_action('wp_head','cutive_gfonts');
function cutive_gfonts() {
echo '<link href="//fonts.googleapis.com/css?family=Cutive:400" rel="stylesheet" type="text/css">';
}

Hope that helps

[Salman AParticipant]

I’ve added the code there, didn’t change anything :/

[Kosher KMember]

Hi Salman,

Make sure to clear your cache as I can now see all the Cutive font working properly for the post title.

please also provide a screenshot of the section you wanted to modify for clarification?

Thanks

[Salman AParticipant]

Hi,

I’ve managed to make the font work but there are two issues.

It is pixelated on Opera and on Safari it does not appear and unable to click the title to open the post.

Also how can we remove the icon next to blog posts?

[RadModerator]

Hi Salman,

Thanks for writing in.

For opera pixelation, could you try add this?

.entry-title  {
-webkit-font-smoothing: initial;
}

Opera font request is this http://fonts.gstatic.com/s/cutive/v7/Y1AJSGLgdOlR-KtoXuQvkPesZW2xOQ-xsNqO47m55DA.woff2 which is pixelated. While chrome use this http://fonts.gstatic.com/s/cutive/v7/Y1AJSGLgdOlR-KtoXuQvkPesZW2xOQ-xsNqO47m55DA.woff2

Which are different file and we have no control over that.

If you’re on page or post single page, then titles have no links. It’s already on its landing page which does not need linking again. I checked blog home page and titles are clickable.

You can remove the icon by adding this css at your customizer’s custom css.

.entry-title:before {
display: none;
}

Thanks!

[Salman AParticipant]

Thank you so much for your help.

I’ve added this
.entry-title {
-webkit-font-smoothing: initial;
}

But it is still pixelated.

Also on Safari the title does not appear. Here are screenshots

https://www.dropbox.com/s/3wpx35za2ohu7qh/Screenshot%202014-09-21%2013.29.47.png
https://www.dropbox.com/s/q9ij3ppfi8plbzn/Screenshot%202014-09-21%2013.30.17.png

Please help.

P.s I really really appreciate your support, can’t express in words.

[ChristopherModerator]

Hi there,

As we described before, this is out of our hands as Opera and Chrome use different sets of files and that is how they show fonts.

Regarding the Safari I suggest that you add the font file type to your htaccess file and also enable cross domain access.

Please follow the link below for more detailed information:(read the Firefox and IE9 section)

http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

Hope it helps.

[Author]

Posts