Changing Fonts with CSS

thepictureladylaurakathryn · Member · Feb 4, 2015 at 4:15 am
Copy link

Add topic to favorites
Hello!
Am I able to change fonts with CSS if I don’t see a font I like in the basic customization screen?
Also, am I able to use different fonts on different pages/posts?

thanks :)

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Feb 13, 2015 at 6:52 am
Copy link
Am I able to change fonts with CSS if I don’t see a font I like in the basic customization screen?

You can, but you would be limited to fonts that visitors have installed on their computers. A font stack would be the way to go, and this page has a good explanation of how they work: http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

Also, am I able to use different fonts on different pages/posts?

You cannot set different fonts for different pages/posts via the Appearance > Customize > Fonts tools. However, you can use a font stack and limit the change to specific pages/posts using a body class in your CSS selector. Here is an example that changes the font stack for just the “Stories” page at http://laurakathrynphotography.com/collections/
```
.page-id-1217 .entry-title,
.page-id-1217 .site-content {
	font-family: Impact, Georgia, Times New Roman, Times, serif;
}
```
The “.page-id-1217” part of the selectors comes from the “body” tag where “page-id-1217” is one of the classes. You can use body classes to target a specific page or a type of page. For example, change “.page-id-1217” to “.category” to make that update for all category pages.

No items found.