Initial Research

I am aware of using .css() to get and set the CSS rules of a particular element. I have seen a website with this CSS:

body, table td, select {
    font-family: Arial Unicode MS, Arial, sans-serif;
    font-size: small;
}

I never liked Arial Unicode as a font. Well, that was my personal feel. So, I would use Chrome's Style Inspector to edit the Arial Unicode MS to Segoe UI or something which I like. Is there anyway, other than using the following to achieve the same?

Case I

$("body, table td, select").css("font-family", "Segoe UI");

• Recursive, performance intensive.
• Doesn't work when things are loaded on the fly.

Case II

$('<style>body, table td, select {font-famnily: "Segoe UI";}</style>')
    .appendTo("head");

• Any other better method than this?
• Creates a lot of <style> tags!