Change Overall Font in Sparkling theme

Sparkling
1

Hi, I just got the sparkling theme and I’d like to change the overall / general font to helvetica neue. Is there a CSS command I can put into the theme options?

I’d also like to resize the article headings to just a little bit smaller.

2

You can change Sparkling theme font from default Open Sans to Helvetica Neue by adding this simple CSS to Theme Options - Other - Custom CSS.

body, .entry-content {
  font-family: 'Helvetica Neue', sans-serif;
}

However, this code won’t change font for title. Let me know if you want to change that as well.

To change font size for post/page titles you can add this code to the same Custom CSS field. Feel free to change font size to get the results you were looking for.

.entry-title a, .entry-title {
  font-size: 24px;
}
3

Hi Aigars,

thanks a lot! Actually I would like to change the font of the titles as well. Do you have some info how to do that?

4

To change fonts for headers you can add this to the same Custom CSS field

.navbar .container .navbar-brand, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar.navbar-default {
  font-family: 'Helvetica Neue', serif;
}

Let me know if this helps.

5

thats perfect! thank you so much!

6

Hi - Thanks for sharing these details. Is it possible to make the same kind of adjustments for the Menu (in the top nav bar)?

Thanks in advance!

7

p.s. (can’t edit the post) … actually I see the above changed the font both of the top nav header/title, and it changed the font of the Menu items in the top nav. Is there a way to change the size of the menu items independently from the Title?

On a related topic, I’ve adjusted all the font colors on the Blog and header, etc. However when I create a new Page (like “About”) the colors there are at the default. Did I overlook another setting for these?

My fledgling blog page is at http://billheiser.com/blog for reference.

Thanks again!

8

@bheiser1

You can change fonts for navigation items by adding this code to Theme Options - Other - Custom CSS

.navbar-default .navbar-nav li a {
  font-size: 20px;
font-family: 'Helvetica Neue', serif;
}

This example will change font size to 20px and font to Helvetica Neue. If you don’t want to change fonts then remove that line of code. Also you can change font-size to any value you prefer.

9

Perfect! Thanks very much @Algars, your support is much appreciated!