Font nicht Rendering (mit Bootstrap)

So versuche ich eine benutzerdefinierte Schriftart zu verwenden, tatsächlich verwende ich zwei von ihnen. Allerdings wird nur einer von ihnen auf der Website gerendert. Ich habe versucht, sie umzuschalten, um sicherzustellen, dass es nicht der Verweis auf die zweite Schriftart war, aber dann funktionierte es gut, also war es das nicht. Ich kann nicht herausfinden, wo ich falsch liege. Oswald ist die Schriftart, die gut wiedergibt. Quattracento ist derjenige, der nicht funktioniert. Irgendein Rat?Font nicht Rendering (mit Bootstrap)

HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Arrow's Edge - Our Services</title> 

<link rel="stylesheet" href="css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/bootstrap-theme.css"> 
<link rel="stylesheet" href="css/style.css"> 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
<script src="js/bootstrap.min.js"></script> 

<!-- fonts --> 
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Quattrocento' rel='stylesheet' type='text/css'> 
</head> 


<body> 
<!-- HTML for navbar --> 
<nav class="navbar nav navbar-inverse navbar-static-top"> 
<div class="container-fluid"> 
<div class="navbar-header"> 
    <a class="navbar-brand logo-fit" href="index.html"><img id ="logo-bar" src="images/logo-bar.png" alt="Arrow's Edge Logo"></a> 

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle Navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
</div> 

<ul class="nav navbar-nav navbar-inverse navbar-right collapse navbar-collapse"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="our-services.html">Our Services</a></li> 
    <li><a href="#" data-toggle="dropdown">About Us<span class="caret"></span></a> 
     <ul class="dropdown-menu inverse-dropdown"> 
      <li><a href="blog.html">Blog</a></li> 
      <li><a href="our-story.html">Our Story</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Facebook</a></li> 
     </ul>  
    </li> 
    <li><a href="contact-us.html">Contact Us</a></li> 
    </ul> 

</div> 
</nav> 

<!-- end of HTML for navbar --> 

<!-- HTML for Our Servies page --> 
<div class="row"> 
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-8 col-sm-offset-4 col-md-offset-4 col-lg-offset-4 col-xs-offset-2 text-center design-header"><p>Web Design</p> 
</div> 
</div> 

<div class="row"> 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 text-center"> 
    <div class="custom"><span class="custom-header">Custom:</span> <br> 
     <span class="my-text">We have a passion for designing new, cutting edge websites that are tailored to your specific needs. Need a site for a small business? A blog? A fan page? No problem! We have you covered.</span> 
    </div> 
</div> 

</div> 




</body> 
</html>

CSS:

/* Style for the Our Services page */ 

.design-header { 
font-family: 'Oswald', sans-serif; 
font-size: 40px; 
margin-top: 15px; 
border-bottom: 2px solid black; 
padding-bottom: 10px; 
} 

.custom { 
margin-top: 50px; 
margin-left: 25px; 
} 


.custom-header { 
font-family: 'Oswald', sans-serif; 
font-size: 25px; 
} 


.my-text: { 
font-family: 'Quattrocento', serif; 
}

Quelle

2016-06-11 Cody DeBos

Sie haben eine : nur nach dem CSS-Selektor, es entfernen.

/* Old CSS 
.my-text: { 
    font-family: 'Quattrocento', serif; 
} */ 

/* New CSS */ 
.my-text { 
    font-family: 'Quattrocento', serif; 
}

Quelle

2016-06-11 15:07:17

Ich habe versucht, das für etwa eine Stunde zu beheben. Ich kann nicht glauben, dass ich es verpasst habe. Danke für den sorgfältigen Blick und den Fang! Du bist ein Lebensretter –

Font nicht Rendering (mit Bootstrap)

Antwort

Verwandte Themen