change the font in a widget

Apply the style element, i.e. ‘font-size’.

In text mode you could surround your text with any element, for example a div or paragraph tag and put the style in there, such as:

<div style="font-size: 16px ;">
<p>text text text text</p>
</div>

Or when you are editing in the widget, on the right under Attributes, you can place the css code straight into the ‘css styles’ box, e.g. font-size: 16px ;

ALternatively, create a class, say ‘text-size16’ and place that inside an element pair:

WIDGET

<div class="text-size16">
<p>text text text text</p>
</div>

CSS FILE

.text-size16 { font-size: 16px ;}

That’s how I do it anyway.

Thanks for the answer.

I haven’t been able to get anything I entered in the CSS styles box on the widget to make any changes to the widget.

Using div-style and defining a div class have had mixed results, sometimes the font size changes, and sometimes it doesn’t.

Still working on it.

bclemrick, if what you’ve tried has no results then a class is probably being inherited. Say for example you have text inside a <p> element and you are trying to change the font size, but at the start of your CSS file text inside a <p> is already defined globally.

Try adding the [! important ] clause to force your style locally. Your CSS code would now become:

.text-size16 { font-size: 16px !important;}