Change font of WordPress theme "Zerif Lite" - css

I'm having trouble changing the font on a website I built using the WordPress theme Zerif Lite.
The page itself is (REMOVED LINK) - I want to change the font in the "testimonial" section or as its displayed there: "Teenused".
That weird font in the bottom of every box (a.client-name)
I have tried so far:
Custom CSS plugin - it lets me only change the font size, when I set new font there, it won't change anything.
Changed the theme's CSS files, also no luck there.
Will appreciate any kind of help.

You can change the font by targeting the correct selector, which is: .feedback-box .client-info .client-name. The current font is called Homemade Apple and is declared in the main theme's CSS file (style.css) at line 2797:
.feedback-box .client-info .client-name {
font-family: 'Homemade Apple', serif;
color: #404040;
}
Simply change that to your desired font, for example:
.feedback-box .client-info .client-name {
font-family: 'Montserrat', sans-serif;
color: #404040;
}

Have you try to add an !important rule to your CSS. It's either that or verify the load order from your styles.
When it comes down to a CSS style, the reason it may not be aplying is because there is another more specific selector, try adding parent selector to your rules, or it could also be that the theme's rules are loading after your rules and replacing them.
One last thing to check, when dealing with fonts: make sure your browser have access to and knows the font. If it does not finds it, it will just replace it with another one, without any warning.

Related

How to change the site title font style in wordpress theme Bizberg Consulting Dark

hello guys av been trying to change the font family/ font style of this WordPress theme Bizberg Consulting Dark for days now, I have looked for this on all the theme editor files but could not find the solution when I inspected the theme on chrome the front family is currently on
.primary_header_2 h3, .bizberg_header_wrapper h3 {
font-family: Dancing Script;
}
I also tried changing this using the additional CSS option on WordPress but any input I give it doesn't work, but when I try
.primary_header_2 h3, .bizberg_header_wrapper h3 {
display: none;}
The whole of the site title disappears showing that this id is the correct id for this change but when I try to input another type of font-family it doesn't work I have looked for this on all the theme editor files but could not find the solution
in your additional css option in wordpress after the css you should input !important and this will overide all functions the theme is playinging initially eg
.header_site_title {
font-family: Times New Roman !important;
}

How to change the default paragraph Font in Wordpress theme with CSS

I use the free theme "Benzer"in my wordpress blog. The parent theme is "Specia".
I'am trying to change the default paragraph font and make it better by placing this CSS code in the Special style.css file directly through Wordpress, but nothing changes...What's wrong please?
p {
font-family:Arial;
font-size:14
}
!Important are considerated a bad practice. Try to use the console to figre otu wich style is overwriting yours.
also, you miss the units in font size,
p {
font-family:Arial;
font-size:14px
}
Should work better.

CSS Assign class to a class definition

In Wordpress themes, in a first style.css there are the general definitions, in a custom.css you can add own styles.
There, I'd like to address certain single elements like
home .example-class_1 h1 {}
In the theme I'm working with I can't do that inline, so I have to use the custom.css.
Now, instead of repeating all single styles in the bracket I would like to assign the class which has already been defined in the style.css:
.heading-class_1 {font-size:1.2em;font-family: 'Open Sans', sans-serif; etc}
Is there any way to do that? As far as I know
home .example-class_1 h1 { .heading-class_1; }
is not allowed (just to be sure, I tested it, it does not work). Is there a workaround in CSS (not JS)?
Yes there is a way to use nested CSS, you'll have to use an extension, you can learn more about it, check out Sass.
You can't do that by default in CSS but you can use a preprocessor that can do that and then it'll compile it into vanilla (normal) CSS for you.
Check Extend within Sass. That'll do the trick. Other preprocessors out there might be able to do this too, but Sass is a popular choice.
Other than that, you'll have to do:
home .example-class_1 h1 { font-size:1.2em; font-family: 'Open Sans', sans-serif; }

Change CSS Recent Posts widget in WordPress

I'm currently using the Recent Posts widget that comes with WordPress. Is it possible to change the CSS of the links? I want the font to be smaller and not display in bold as it does now. I know it inherits these settings (bold links and font size), but I would like to overwrite them.
Many thanks!
You can change the font styling on the recent posts by adding this to your CSS rules (changing the font size to suit your needs):
.widget-inner a {
font-weight: normal;
font-size: 14px;
}

Wordpress template font color change

I am using Wordpress template Simple market and the default text colour is green but I want to change it to black. Even the widgets I install go green. Is there a way to change the whole color rather than changing it in css one by one?
You can put some CSS in your theme's style.css file to override its green text-color with black text-color, for example:
body {
color: black;
}
if the above not work, try something like:
body {
color: black !important;
}
This is just a quick patch but not a final solution. When your have better understanding in the theme you mentioned, you can use some tools like Firebug to locate the actual CSS codes and to search and replace them in style.css file which they belong to. That will be better.
Go to Style.css
replace green color(you will find it using colorpix) to black(i.e #000000) using find and replace feature in any stylesheet editor.
Simple enough and no other way.

Resources