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

Well, you're obviously going to need to change the font-family name for each one or I would think that having them all the same would make them clash. At least I would think that. I have never had it happen to me, but if it's not working, then do that. But if not, ignore this.

As for the @font-face simplicity, the only real specifications you need for the @font-face is the font-family and the src. That calls the font style, obviously. So any other web styling you can leave to either the html style or css.

@font-face {
    font-family: "SourceSansPro";
    src: url("../font/SourceSansPro-Light.otf.otf");
}

You can then style your font in either a span or css class.

Styled Font
Styled Font
Styled Font

If you have a lot of fonts, I would just put them all in one css file and then link it to the page you're using them on.