Question

I'm trying to use yahoo's purecss, which incorporates normalize.css. I need to be able to set Open Sans as the font family for the html tag, however normalize.css, which sets sans-serif as the font-family on html tag, doesn't seem to allow it. The only way I can get Open Sans to be applied is by setting it for each specific html element, such as h1.

Does anyone know how I can override normalize and set the font-family on html tag? I don't want to have to set it individually per tag, as this could lead to ridiculous inconsistencies across the site if I forget to apply it to a certain tag!

Thanks

I should have mentioned I'm using Symfony2 and Assetic. Here is my code:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
 {% block stylesheets %}
     {% stylesheets 
         '@RoundupRoundupBundle/Resources/public/css/pure-skin-roundup.css' 
         '@RoundupRoundupBundle/Resources/public/css/main.css' 
          filter='cssrewrite' 
      %}             
         <link rel="stylesheet" href="{{ asset_url }}" />
     {% endstylesheets %}
 {% endblock %}

And then my own css to override is (in main.css):

html {
    font-family: "Open Sans" !important;
}
Was it helpful?

Solution

OK figured it out. I missed a part of the documentation on this page about using custom fonts with grids.

I needed to also target purecss grid classes as well as the html/body element, like so:

body,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
    /* Set you're content font stack here: */
    font-family: Georgia, Times, "Times New Roman", serif;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top