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

Unfortunately the @font-face syntax is not very flexible. You're at the mercy of the browser developers in this case. You can, however, segment your fonts into a fonts.css file and just do an import:

@import url('css/fonts.css');

Another possible solution would be to add the font via Google's Font API. That way, you don't have to worry about the CSS in the first place. You just add

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);

to your stylesheet. Or you can add

to the of your document.