I went through the css sheet and copied all style code that referred to a font, into a notepad. Then I searched in google for google fonts, then settled on a font to try out,and I chose Muli and replaced all fonts with Verdana,’ Muli Sans’,sans-serif;. I carefully tested out which each code applied to what heading or area.
1. Go to your style css sheet in your Appearance >> Editor.
2. Copy codes mentioning a font, & paste this code into a notepad.
3. Change your fonts which you have selected, and you can get them from google fonts website.
4.Go to Theme Options >>>Custom Css
Paste in your special custom styles here, it overrides what is in Appearance editor.
Here I have done the first one you could paste in:
body, input, textarea {
font-family: Verdana,’Muli’,sans-serif;
font-size: 14px; color: #1b1b1b
}
This gives your body content words a darker colour, a bigger font, and a nice clear font type.
Here below are all css relating to the relevant fonts to change.
body, input, textarea {
color: #777;
font: 13px ‘PT Sans’, sans-serif;
line-height: 20px;
word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-family: ‘Philosopher’, sans-serif;
color: #555;
}
#site-title {
font: 36px ‘Philosopher’, sans-serif;
line-height: 42px;
}
#site-description {
font: 13px ‘PT Sans’, sans-serif;
line-height: 20px;
color: #777;
}
/* Slogan */
.slogan-wrap {
font-family: ‘Philosopher’, sans-serif;
background-color: #05a9c5;
padding: 24px 0;
margin-bottom: 4px;
}
.slogan-wrap .slogan span {
font: 13px ‘PT Sans’, sans-serif;
line-height: 20px;
display: block;
padding-top: 5px;
}
.featured-text .featured-title {
font: 24px ‘Philosopher’,sans-serif;
line-height: 30px;
padding: 10px 20px;
background: #05A9C5;
background: rgba(5, 169, 197, 0.9);
float: right;
max-width: 55%;
}
.entry-title {
font: 24px ‘Philosopher’, sans-serif;
line-height: 30px;
}
Please note the quotation mark is where you put your new font name i.e. ‘Philosopher’ becomes ‘Muli’ but dont remove the sans-serif;
Hope that helps.
