用我的自定义 css 问题覆盖 foundation.css

Question

我刚开始使用 Foundation 6。我正在使用带有 css 文件和 js 文件的简单存档。

我试图用我的默认字体系列覆盖，但基础 css 样式覆盖了我的 css。我做错了什么？

这是我的代码：

@font-face {
    font-family: josefin;
    src: url('../fonts/josefin/JosefinSans-Regular.ttf');
}
body{
   font-family: 'josefin';
}
.main-header{
    background-color: #D72B3F;
}

<!DOCTYPE html>
 <html>
        <head>
            <link rel="stylesheet" href="lib/foundation-6/css/foundation.css">            
            <link rel="stylesheet" href="css/app.css">                        
  </head>
        <body>
            <header>
                <div class='main-header expanded row'>
                    <div class='small-12 columns'>
                        <h1>Title</h1>
                    </div>
                </div>
            </header>

            <footer>
                <div class='row'>
                    <div class='small-12 colums'>
                        <h1>Footer</h1>
                    </div>
                </div>
            </footer>

        <script type="text/javascript" src="lib/jquery/jquery-1.12.0.min.js"></script>                    
        <script type="text/javascript" src="lib/foundation-6/js/foundation.min.js"></script>
  </body>
 </html>

谢谢。

编辑 1：我尝试了 !important 但它不起作用。

Edit2：我不认为这是关于我的 css 语法本身的错误，因为当我在 firebug 中停用 foundation.css 的字体条目时，我可以显示字体定义按照我的习惯 css.

Answer 1

我解决了我的问题，我觉得自己很愚蠢 :)

我在应答器上测试字体，foundation.css 对元素有特定的规则。

所以我不得不在 css 中覆盖。

h1,h2,h3,h4,h5,h6{font-family: 'josefin';}

到此，感谢帮助！

用我的自定义 css 问题覆盖 foundation.css

Override foundation.css with my custom css problems

html

css

zurb-foundation