how to simplify font import in css

Question

I have a font namely SourceSansPro, and I include it in my css as follows:

@font-face {
    font-family: \"SourceSansPro\";
    src: url(\"../font/SourceSansPro-         


        

Answer 1

It is not essentially redundant, since you are using three typefaces and they need to be declared separately. You can, however, omit the declarations font-style: normal and font-weight: normal, since they correspond to defaults.

On the other hand, the code works only on browsers that support OTF as the format of downloadable fonts. Use e.g. http://www.fontsquirrel.com/tools/webfont-generator to generate other formats and code for taking them into use.

The font-weight: lighter probably works in most situations, but it is illogical (using relative keyword when you should specify the actual weight) and should be replaced by font-weight: 200, which corresponds to the actual weight of the typeface