CSS: enlarge custom font proportionally in all elements

Vote count:

0

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;
}

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?

asked 36 secs ago

tkoomzaaskz

4,022

CSS: enlarge custom font proportionally in all elements