how to simplify font import in css


Tags: css,fonts

Problem :

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

@font-face {
    font-family: "SourceSansPro";
    src: url("../font/SourceSansPro-Bold.otf");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "SourceSansPro";
    src: url("../font/SourceSansPro-Regular.otf");
    font-weight: normal;
    font-style: normal;
}

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

It's rather redundant. Isn't there a neater way to do this?



Solution :

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

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

to the <head> of your document.


    CSS Howto..

    How to avoid bootstrap from overriding id-called custom css?

    Issue with Hide / Show Jquery on fixed positioned div

    How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

    How to make a font gisha-regular?

    How to use CSS to make an input fields behaves like a button click?

    How to align an image inside a DIV without adding new classes using CSS

    How to inserted HTML tag from pseudo-element content: [duplicate]

    How to align HTML elements from bottom to top?

    How to float: top?

    How to scroll left column when cursor is above right column?

    creating a slide show for home page in my web site [closed]

    Jquery UI: How to define different CSS styles for Tabs and Slider on the same page

    how to target css for ie9 only?

    How to manipulate SVG element style with javascript?

    How to fix responsive drop down menu using css?

    How to enforce input text to take 100% width of its parent

    How to mix two image using clipping in css?

    How to place button row and content left to image in bootstrap or css

    On a web page how do I display a label that changes to a drop down box on hover

    How can I create custom tooltips with css pseudoelements

    how to decrease the height of content area for with css?

    How to put a border around the text in a button?

    How to mimic Photoshop “Color Overlay” in CSS

    Show submenu with CSS without using an unordered list

    How to float images left and right without text wraps

    How to use “all” property in CSS

    How can I completely centre the “feature” section of my layout (please see links)?

    How can I remove the underline of a linked image in Firefox and Chrome?

    How to detect all events added on a div

    How to change fill color of SVG on click when it's used as a background image?