CSS: how to have different sizes for each font -

I have a website that uses "narrow aerial". To avoid compatibility problems I created a font @ font of the font using the "Font Squirrel" font-face generator (), but when I'm on a system that is not the original "arial narrow" and then it Loads online via @ font-face; font is more than native "ariel narrow"; I am using full size in px for fonts.

Is there a way to set different sizes for the original and online fonts?

  @ font-face {font -Filili: 'Arial NARO'; Src: url ('/ fonts / arialn-webfont.eot'); Src: local ('☺'), url ('/ fonts / arialn-webfont.woff') format ('woff'), url ('/ fonts / arialn-webfont.ttf') format ('truetype'), url ('/fonts/arialn-webfont.svg#webfontNZumFher') format ('SVG'); Font weight: normal; Font style: normal; }  

and below:

  font-family: 'ariel narrow', 'ariel naro', aerial, helvetica, non-serif; Font-size: 14px;  

Thanks in advance, sorry for my bad english

In principle, CSS 2.0 and CSS3 property were created for that use, but its support is weak, and there is no IE (surprisingly!), Fx 3.0 + And not support fic.

I wonder why the aerial narrow is not both the same size (and the answer is no) to say that the aerial is licensed by narrow and can be bought here: (And this thick family is monotype Was created by).
It's too late for a non-commercial website (2002) and packages should be kept in their original format and file names: Modifying embedding in the past.