CSS: enlarge custom font proportionally in all elements - html

Question

I want to use a custom font. When I load it into the page using
#font-face {
font-family: 'Echelon';
src: url('font/echelon-rg.ttf');
font-style: normal;
}
#font-face {
font-family: 'Echelon';
src: url('font/echelon-it.ttf');
font-style: italic;
}
then it is smaller then all the default fonts available in my browser. I want to enlarge them, let's say to 150% of current size. The problem is that when I do
body * {
font-family: Echelon;
font-size: 150%;
}
then all h1..h6, p, div, span elements share the same size (also all custom settings of bootstrap are overwritten) and I can't use it like that. I want to change all elements relatively to their original (e.g. bootstrap) size. If I did it manually, I would have to rewrite hundreds of elements, so that's a bad option. How can I do it in a clean and easy way?
PS this is not about window/screen size.

Answer 1

Instead of declaring for body, try to declare for certain sections you need to change in your CSS, this way you don't need to change manually.
Lets say, you want your paragraph alone to be of 150% then declare as:
p{ font-size: 150% } in your CSS this should restrict to paragraph's alone.
Hope it helps :-)