在Bootstrap Sinatra网站中将字体更改为CircularPro Bold

时间:2015-10-08 13:52:06

标签: css twitter-bootstrap fonts sinatra

我一直在尝试将字体更改为CircularPro Bold,但是当我加载页面时它不会渲染,而是默认为Times New Roman。可以使用一些帮助来弄清楚它为什么不渲染

我在静态目标网页上使用了一种布局。

谢谢

Layout.erb看起来像这样

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Info</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->

<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://lineto.com/The+Fonts/Font+Categories/Text+Fonts/Circular/Bold/" rel='stylesheet' type='text/css'>

<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/modern-business.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Modern-Business.css看起来像这样

@font-face {
font-family:"CircularPro Bold";
src:url(fonts/lineto-circular-pro-bold.eot?#iefix) format(embedded-opentype),
 url(fonts/lineto-circular-pro-bold.woff) format(woff),
 url(fonts/lineto-circular-pro-bold.ttf) format(truetype),
 url(fonts/lineto-circular-pro-bold.svg#CircularProBold) format(svg);
 font-weight:400;
 font-style:normal;
 font-size: 4em;

 }

h2{
font-family: 'CircularPro Bold';

 }

0 个答案:

没有答案