Change of blog title font style

Support
#1

Hello guys
I have made a few changes and made the blog posts on the home page by default.
but I would like to change the font of the blog title and I can’t see where is the option. Is there and css code that I would insert?

thanks a lot
cheers

Isabella

#2

Hi There,

Please try with this custom CSS:

.home h1.h-landmark {
    font-style: italic;
    font-family: "Lato",sans-serif;
}

Hope it helps :slight_smile:

#3

Hello there thanks a lot
I took out the itálics and I changed to cabin sketch and added the size like this

.home h1.h-landmark {
font-family: “Cabin Sketch”,sans-serif;
letter-spacing: 0.028em;

but it doesn’t work…

could you please help?
thanks a lot :slight_smile:
isabella

#4

Hi again,

I checked the site and the code you’ve added is working fine however it looks like the font Cabin Sketch is not installed that’s why you’re not seeing this font. You can follow this thread to install a custom font https://theme.co/apex/forum/t/webtype-fonts-in-pro/3562/2

To change the font size, you should use this code:

.home h1.h-landmark {
    font-size: 35px;
}

Hope this helps!

#5

Hello there
thanks a lot.
I have changed the font with one among the theme options but it still doesn’t change.
I have also added the code for low case but doesn’t work

.home h1.h-landmark {
font-family: “Love Ya Like a Sister”;
letter-spacing: 0.028em;
font-size: 35px;
text-transform: lowcase;
}

thanks a lot for your help :slight_smile:

#6

Hi There,

To make the title lowercase, please change your custom CSS to this:

.home h1.h-landmark {
     font-family: "Love Ya Like a Sister"; 
     letter-spacing: 0.028em;
     font-size: 35px;
     text-transform: none;
}

Hope it helps :slight_smile:

#7

Hey there It did help thanks a lot, but it did’t change the font to “Love Ya Like a Sister”… or any other I have tried ( they are included in the theme)
any idea?
thanks a lot
isabella

#8

Hi Isabella,

Please add the custom CSS below on your Child theme’s style.css file
(not on the Theme Options > CSS)

*/
@import url('https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister');
.home h1.h-landmark {
     font-family: 'Love Ya Like A Sister', cursive;
     letter-spacing: 0.028em;
     font-size: 35px;
     text-transform: lowercase;
}

And you should have this:



I notice that your site is under CloudFlare, If you don’t see the changes, please clear all your caching plugins including the CloudFlare.

Cheers!

#9

Hello there!
thanks lot for your help. But I need to ask you where I should insert the code. Do I have to enter in the server provider and into the FTP files ( in this case I would appreciate if you could give me the path) ? or can I do it from wordpress?
Sorry for being so ignorant… thanks for your help .

cheers
Isabella

#10

Hey Isabella,

You can add the above code in your Child Theme’s style.css file via WordPress directly, just visit Appearance → Editor from your WordPress dashboard. You’ll want to open the style.css file (which should be open by default) and add the code in there. Make sure your child theme is activated.

Hope this helps!

#11

Hey there
thank you so much . This is what I thought but I cannot find it… weird…

#12

Hi again,

The missing Appearance > Editor in Wordpress could be due to a number of potential causes. A process to identify the source of the problem is as follows:

  1. Systematically switch off plugins and check if the editor returns (use ctrl F5 to refresh each time between checks)
  2. If the problem is not found in the Plugins, swich all plugins back on, then temporarily switch the theme to a default Wordpress theme (usually Twenty Sixteen as this is the fall-back Wordpress theme) refresh and check.
  3. If editor is still not visible switch back to the default theme, then go to Dashboard > Updates and reinstall your Wordpress version and check again.
  4. Some “security” plugins deactivate the theme editor. If you are using one of these plugins, check for an option to disable the editors and turn it off. Alternatively, you can check the config file, wp-config.php for the definition:
define('DISALLOW_FILE_EDIT', true);

Change to false, comment it out, or delete it. Also check you’re logged in as admin and you’ve all the rights.

It is likely that the problem would have identified itself or resolved during these checks and updates.

Let us know how this goes!

#13

Hello there thanks a lot I did it.
and add the code as per your instruccions (see screenshot) but it dones’t work…
could you have a look please?
thanks a lot

#14

Hi Isabella,

It is showing as ‘Love Ya Like A Sister’ font on my end now, please clarify the issue. Also clear your browser’s cache.



Thanks,

#15

thanks @friech
this cache thing is killing me.
I have checked in incógnito window and it works just fine.
But on my browser I cannot see it.
never mind.

I will eventually.
I have cleaned all the cache …
thanks a lot for your help
cheers :blush:

#16

You’re most welcome! Yes, been on that which is why we recommend disabling the cache during development, updates, or when you’re changing something on your site. Thanks!

#17

How do I do that?

Also could you check again? because I have checked on my friend’s computer and it is appearing again with the previous font not with the new one.

I m not sure why

thanks a lot for your help

#18

Hi Isabella,

For the W3 Total Cache, navigate to Performance > General Settings and do not enable the Page Cache and Minify, make sure you Save Settings & Purge Caches



For the SG Cache, navigate to SG Optimizer > SuperCacher Config turn off the Dynamic Cache and then Purge Cache.

Turn back On your caching when you’re done editing.

Apparently, the W3 Total Cache minifier is very persistent, I excluded the child theme’s style.css file from being minified, please clear your browser’s on your end and your friend’s computer.

Hope it helps,
Cheers!

#19

oh ! now I could see the changes ! thanks a lot
I left the general preview enabled. is that ok?

thanks a lot
cheers

#20

Hi @isa1978

It depends on what you are planning to do on your website, I recommend checking this section “General Settings: Preview Mode” in this guide to know more about Preview Mode:

Thanks.