You can change them, but you will need to do some custom CSS…not as scary as it may sound though. To modify CSS (the code that does the styling of your website), you can use a plugin like Simple Custom CSS. But, if you are using Jetpack, you can use their EDit CSS feature instead for this.
To change the tagline font and size, the theme default CSS code looks like this:
.site-description {
line-height: 1.2;
font-size: 0.913rem;
text-align: center;
font-style: italic;
color: #969696;
}
To create your own custom CSS to change the tagline font and size, you would do it like this:
.site-description {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.913rem;
font-style: italic;
}
Change the font to be your own, each font alternative separated by a comma. The reason to have more than one is so that if someone’s computer does not have that font, the browser will load the next one in line. So if Helvetica is not available, it moves on to Arial…etc.
Font size is done in rem units, but you can use em or % if you wish. Many often use px (pixels) for the size, but not recommended. To know what rem vs px is, use this online tool: http://www.pxtoem.com
Regarding your Site Title font, you mentioned you want to use “AR BERKLEY” as your font. Do you already have this loaded or do you need to add this? This is usually the part that is the trickier job, but using a Font plugin might be your better solution (if that font is available in a plugin that is).
Changing the font for the site title is done like this:
To change the font and even the font size, do this…change the font and size to the code that you see below. Try to add in more than one font alternative if you can for people’s computers that don’t have the font:
To change the font and font size for phones:
.site-title {
font-family: "Times Roman", Georgia, Serif;
font-size: 2.5rem;
}
The first font is Times Roman, but if someone doesn’t have this on their computer, then it goes to the next one “Georgia”, but if they don’t have that, then it moves to the next “Serif”.
To maintain the theme’s Responsive feature for viewing your site in a desktop, tablet, or even phones, you need to have different font sizes set. These snippets use what is called Media Queries which basically tells the browser “if this page is being viewed in a tablet, then use this font size, otherwise if it’s being viewed in a phone, then use this other font size…etc”.
For tablets:
@media (min-width: 768px) {
.site-title {
font-size: 3rem;
}
}
To add a size for larger screens like desktops:
@media (min-width: 992px) {
.site-title {
font-size: 4.75rem;
}
}
