How to set fonts for .widget p, .textwidget etc?

The CSS lines appear at the top of the generated “(index)” page file itself, (i.e. not in a separate CSS file), they look like this:

.widget h3 {font:bold 14px/1.2em Arial, sans-serif;color:#555555;border-bottom:1px solid #e6e6e6;}
.widget_recent_comments li, #twitter li { border-color: #e6e6e6;}
.widget p, .widget .textwidget { font:300 13px/1.5em Arial, sans-serif;color:#555555; }
.widget {font:300 13px/1.5em Arial, sans-serif;color:#555555;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}

And the affected HTML looks like this:

<h3 class="widget-title">a title for text widget</h3>
<div class="textwidget">content for text widget</div>

screenshot: http://i.imgur.com/z1V5LtH.png

These selectors appear only if the “Text” or the “Visual Editor” widgets are used *within* “Page Builder”.

Should I be trying to override them in custom.css?
Or is there a “correct” place to set them?