Changing font

[Lisa M]

Is there a place in Appearance or Customize for changing the font? Do I need to do that in CSS?

Thanks.

[Sushil Adhikari]

Hi Lisa…welcome to the forums! This will depend on what page element you want to change the font for?

[Lisa M]

Headers and page titles.

[Sushil Adhikari]

The fonts for the headings are found in the theme’s style.css file around line 231

h1, h2, h3, h4, h5, h6{
	font-family: open_sans, sans-serif;
	font-weight:400;
	color:#333;
	margin-bottom:16px;
		margin-bottom:1rem;
}

Then below that code you will see the different heading selectors as h1, h2, etc:

h1 {
	font-size:23px; 
		font-size:1.438rem;
}

You will notice I used two font sizes…px which is common, and then rem which is a relative size and used for the more modern browsers. You can remove the rem lines if you want to just use px instead. But to help give you a reference, this online tool is a conversion from px to em (also rem) and vice versa: http://www.pxtoem.com

[Lisa M]

Thank you!

[Ragnhild Hannoschøck Vea]

Hi
I’d like to change font size of the actual content (not any heading)of the article. How can I do that?
🙂

[Sushil Adhikari]

Font size for just the main content in the Preference theme is a bit more tricky because everything is relative sizing to the body size setting. However, you can edit the #content container to resize the text to your needs. Styling for #content can be found in the style.css file around line 193 and looks like this:

#content {
	min-height:120px;
	padding:40px 15px;
	border-bottom:1px solid #8faeb8;
	color:#000;
}

Add this to it:

font-size: 12px;

Of course, you can change the font size to what you want.

[Ragnhild Hannoschøck Vea]

🙂
Thank you!!

Did’t work with #content but this worked;

body {
font-size: 18px;
}

:cheer:
(I used child to add the css change)

[Sushil Adhikari]

Ah… awesome.

[Sushil Adhikari]

One side note Ragnhild….I keep getting email delivery errors on your email address. You need to update your address in your user account.

[Lisa M]

What are the text selectors (tags?) for the navigation bar text? Thanks.

[Sushil Adhikari]

Hi Lisa…are you wanting to change the font or size or both?

[Lisa M]

The font.

[Sushil Adhikari]

In the theme’s style.css, you will see around line 154 this:

#nav-wrapper {
	background-color:#78a5b6;
	border-radius:60px 60px 0 0;
	-webkit-border-radius: 60px 60px 0px 0px;
	height:37px;
	text-align:center;
	font:normal 14px open_sans, Arial, sans-serif;
		font-size: 0.875rem;
	color:#fff;
	position:relative;
	z-index:1000;
}

I’m using rem as a font size that overrides the px, but if you want to use just px, then remove the rem font size line. Then of course, the font you see is open_sans….but you can change that there.

[Author]

Posts