Why use of W3.CSS change text Font?

Brings in following:

h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
.w3-serif{font-family:serif}
.w3-sans-serif{font-family:sans-serif}
.w3-cursive{font-family:cursive}
.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}

So when you use <h1> tag in text node value, the CSS from w3 affects.
If you need to style text in ui_text widget, most reliable will be to put the content inside <span> tags and give class to that span and then write CSS for that class and you have full freedom to decorate the text as you like.

An example can be found from this thread: Reduced Line Spacing