I want to embedded some styles into my website, however, the right style didn’t show up, and I don’t know why.
My code is here:
<head>
...
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"/>
<style type="text/css">
#bd { font-family: 'Neuton', serif; color:#646464; font-size:16px; line-height:21px; font-weight:200;}
...
</head>
<body>
...
<div class="container" id="bd">
I want to use the font "Neuton' here. But I fail to do it..
</div>
</body>
Can anyone help me with this :(?
*******update**
I still can’t find the reason, let me give more context:
I’m practicing using HTML/CSS to write a portfolio, and here is all of my code:
<head>
<title> XXXXX </title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"/>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Neuton:200" rel="stylesheet" type='text/css'/>
<link href="http://fonts.googleapis.com/css?family=Terminal+Dosis:300" rel="stylesheet" type="text/css"/>
<style type="text/css">
body { padding-top: 40px;}
#bd { font-family: 'Neuton', serif; color:#646464; font-size:16px; line-height:21px; font-weight:200;}
#bd a {
text-decoration: none;
border-bottom: 1px dotted;
color:#646464;
}
#bd a:hover { text-decoration: none; border-bottom: 1px dotted; color:#646464; background-color:#c0f4ff; }
h1 {
font-family: 'Terminal Dosis', sans-serif;
color:#646464;
padding:0px;
margin-top:-14px;
margin-bottom:0px;
font-weight:300;
font-size:15px;
}
#sections { font-family: 'Terminal Dosis', sans-serif; color:#7a7a7a; padding:0px; font-weight:300; font-size:80%; line-height:15px;}
#name { font-family: 'Oswald', sans-serif; font-size:20px; color:#7a7a7a; padding-bottom:7px;}
.dashbar { border-top: 1px dashed #bbbbbb; margin-bottom: 35px; margin-top:00px; }
#active { background-color:#c0f4ff; color:#646464; width:100%;}
#navlist li { color:#7a7a7a; font-family: 'Oswald', sans-serif; font-size:15px; display: inline;
list-style-type: none; float:right; padding-left:74px; padding-top:2px; padding-bottom:0px; }
a { text-decoration: none; color:#7a7a7a; }
a:hover {color:#646464; text-decoration: none; background-color:#c0f4ff; } /*color:: the color displayed when you mouse over the link*/
a:visited { text-decoration: none; ;}/* mouse over link */
a:active { background-color:#c0f4ff; color:#646464; } /*the one that is activated */
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4" id="name">My Name</div>
<ul id="navlist">
<li>
<a href="projects.html">PROJECTS</a>
</li>
<li>
<a id="active" href="index.html">HOME</a>
</li>
</ul>
</div>
<div class="dashbar"></div>
<div class="container">
<div class="row">
<div class="span-one-third" id="bd">
<!-- content-->
<h1>ABOUT</h1>
***I want to use the font Neuton Here***
</div>
<div class="span10" style="margin-left: 30px;">
<!-- put an image here -->
</div>
</div>
</div>
</div>
</body>
I don’t know about that bootstraper , however I think you should import the fonts, I used google api. jsFiddle