PrintThis override custom CSS when pressing button

Question

I use PrintThis Jquery plugin.
I use Bootstrap as my framework.

When printing with PrintThis i´d like to lower my font size.
I've just made a Style change in the doc. like this:

<style>
body {
    font-size: 8px;
    line-height: 1.42857143;
}
</style>

When the page first load. All text is 8px.
But when i press the PrintThis button, the page reloads/changes all text to Bootstrap default 14px. Why is that?

HTML for printButton

<button class="btn btn-default pull-right" id="print_btn"><span class="glyphicon glyphicon-print" title="Print"></span></button>

JS for printThis

<script>
$(document).ready(function () {
    $('#print_btn').click(function () {
      $('#usr_name, #list_usr_time, #sum_worked_time,  #break_page').printThis();
    });
});
</script>

UPPDATE I moved the style from the page, into a CSS file.
Then i loaded the css file into the page.
Also i added: loadCSS: "css/custom_printthis.css", to the custom Jquery.
The result is, page does not override css. The text is 8px, just as i want. BUT, when i press Print, the preview shows 14px text inside table tags... and 8px text outside. Maby i need to add "table.tex" in my css...

Answer 1

To fix this i created a new class for all text printed by php.
Then i created a CSS file for that class, and overrited Bootstrap's original font-size.

<td class="table_text">Text</td>

.table_text{
    font-size: 10px;
}