MistyLake Theme: Can't change the " widget-title" font

bjbowen · Member · May 26, 2013 at 10:08 pm
Copy link

Add topic to favorites
hey there… every time I change the font, it reverts back to the old stylesheet.

I’ve tried also to change the global fonts to: “Open Sans”,Helvetical,Arial,Sans-Serif

and although the template doesn’t DISPLAY those fonts, they are still in the style sheets.

All I want is to have the widget fonts be like the menu fonts, and nothing I’ve will actually change those fonts.

I was successful at changing their size and their weight, but, not the font.

Any help would be greatly appreciated!!
xoxo

The blog I need help with is: (visible only to logged in users)
timethief · Member · May 26, 2013 at 10:39 pm
Copy link
This thread will be moved to the CSS forum for you.
designsimply · Member · Jun 7, 2013 at 5:27 pm
Copy link
and although the template doesn’t DISPLAY those fonts, they are still in the style sheets.

A font will only be used if it is either present on the viewer’s computer or if it is loaded as a web font via a service such as WordPress.com Custom Fonts (which currently use the Typekit.com font service). This article explains a little more about how font stacks work:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

So, if a theme uses a font property such as “font-family: ‘Open Sans’, ‘Helvetica Neue’, sans-serif;” that is telling a browser to display Open Sans first if it’s available. If it’s not available, it will simply fall back to the next font (that’s why there’s a stack).

All I want is to have the widget fonts be like the menu fonts, and nothing I’ve will actually change those fonts.

To target the widget titles on the SemPress theme, use “.widget h1” as your CSS selector. Here is an example:
```
.widget h1 {
	text-transform: uppercase;
	color: #b06b29;
}
```
If you also wanted to target the heading you added inside the first text widget at the top of the sidebar (you used an “h4” heading tag), you can add “.widget h4” as a selector too like this:
```
.widget h4,
.widget h1 {
	text-transform: uppercase;
	color: #b06b29;
}
```
You can also add something like “font-family: ‘Open Sans’, ‘Helvetica Neue’, sans-serif;” but I would recommend using the fonts in Appearance → Custom Design → Fonts instead because those are web fonts which are loaded in by the server and will work for most visitors (some very very old browsers still won’t show them, but it’s unlikely any of your visitors are using browsers that old).

No items found.