Change Font

Activello
1

Hi I’d like to change the font on my site. I think its the ‘Lora’, serif font that I want.

I’d like to have the headings on the page changed to Lora - eg where it says “An Animal Behaviourist with a difference…” on http://test.katsanddogs.co.uk/

Id also like to see what it looks like having the Menu in Lora.

Is this a general change or would I have to change it for every page?

Thank you

2

Hi @katsanddogs,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

#page h4 {
    font-family: 'Lora', serif;
}
.navbar-default .navbar-nav a {
    font-family: 'Lora', serif;
}
Is this a general change or would I have to change it for every page?

It is general change.

Best Regards,
Movin

3

Hi - Thanks for that - It doesnt appear to have made the change however, I’d like the font for "“An Animal Behaviourist with a difference…” to be the same font as for “My Approach” which is at the top of the page.

Also that doesnt appear to have changed the menu fonts at all?

I’m currently using the Colourlib Child Theme to Activello - which might be why?

http://test.katsanddogs.co.uk/

4

If you are using the child theme then please try adding the above CSS code in the style.css file of child theme.

5

How do I edit the style.css file?

6

I’ve tried to edit it via wordpress - appearance - editor

7

but that didnt work, so then I tried via Wordpress - Appearance - Edit CSS - but that didnt work either

8

All sorted now!

9

You are most welcome here :slight_smile:

10

Hi - Although this has changed the font for the paragraphs and menu- the headings are still in a different font…

How can I change it so that all the text on the website is in Lora?

11

Could you please share me the page URL from your site where the headings are not displaying proper font so that i can troubleshoot it?

12

Hi - It’s http://katsanddogs.co.uk/
And it’s all of the headings - so anything which is Heading 1,2 3 etc.

13

Try using the below CSS code to change h3 headings font.

#page h3 {
    font-family: 'Lora', serif;
}
14

Hi Movin

I’ve tried that and it hasn’t made the change.

All Custom CSS Code is below

h1.entry-title {
font-size: px;
}
ul.dropdown-menu {
background-color:#05a8a2;
}
.site-navigation-inner .nav-search {
display: none;
}
.navbar-default .navbar-collapse {
width: 100%;
}

.nav.navbar-nav {
float: none;
text-align: center;
margin: 0 auto;
width: 100%;
}

.navbar-nav>li {
float: none!important;
margin: 0 auto;
display: inline-block;
}
.navbar-default .navbar-nav > li > a {
font-size: 14px;
}
div#logo {
padding-bottom: 0;
}
.container.main-content-area {
margin-top: 20px;
}
#page h1.entry-title,
#page header.entry-header {
margin-bottom: 0;
}
#page article:first-child .entry-content {
margin-top: 0;
}
@media (max-width: 450px){
#page .entry-content img {
display: table;
float: none;
margin: 0 auto;
}

#page h3 {
font-family: ‘Lora’, serif;
}

15

Thank you for sharing your custom CSS code which contains some errors causing the provided CSS code not to work so please use the below corrected custom CSS code instead of above.


h1.entry-title {
    font-size: 24px;
}
ul.dropdown-menu {
   background-color:#05a8a2;
}
.site-navigation-inner .nav-search {
    display: none;
}
.navbar-default .navbar-collapse {
width: 100%;
}

.nav.navbar-nav {
float: none;
text-align: center;
margin: 0 auto;
width: 100%;
}

.navbar-nav>li {
float: none!important;
margin: 0 auto;
display: inline-block;
}
.navbar-default .navbar-nav > li > a {
    font-size: 14px;
}
div#logo {
    padding-bottom: 0;
}
.container.main-content-area {
    margin-top: 20px;
}
#page h1.entry-title, 
#page header.entry-header {
    margin-bottom: 0;
}
#page article:first-child .entry-content {
    margin-top: 0;
}
@media (max-width: 450px){
#page .entry-content img {
    display: table;
    float: none;
margin: 0 auto;
}
}
#page h3 {
    font-family: 'Lora', serif;
}
16

Hi I have used that but it still doesnt work :frowning:

Im using the Colorlib Child Scheme and Ive also got the following in the style.css

/*
Theme Name: Colorlib Child Theme
Template: Activello-master
Author: Colorlib
Author URI: https://colorlib.com

#page h4 {
font-family: ‘Lora’, serif;
}
.navbar-default .navbar-nav a {
font-family: ‘Lora’, serif;
}
#page h3 {
font-family: ‘Lora’, serif;
}
*/

17

The style.css code in your child theme is wrong instead it should be as following.

/*
Theme Name: Colorlib Child Theme
Template: Activello-master
Author: Colorlib
Author URI: https://colorlib.com
*/

#page h4 {
font-family: ‘Lora’, serif;
}
.navbar-default .navbar-nav a {
font-family: ‘Lora’, serif;
}
#page h3 {
font-family: 'Lora', serif;
}
18

So I’ve amended the style.css file as suggested above - it’s still not working :frowning:

19

You are still adding it wrong.

Please see in the attached screenshot what is in your child theme style.css file http://katsanddogs.co.uk/wp-content/themes/colorlib-child-theme/style.css

20

That is odd because that is not how I am entering it in the editor in Wordpress