i am think i am using similar code i used b4 but seems like the fonts aren't loading
<html>
<head>
<script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular开发者_开发知识库,bold"></script>
<style>
h1, h2, h3 { font-family: "Yanone Kaffeesatz"; color: red }
</style>
</head>
<body>
<h1>This is some text</h1>
</body>
</html>
You need to include the font using a <link>
tag.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold">
According to Google Webfont page the correct notation is:
<link href=' http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold' rel='stylesheet' type='text/css'>
I've discovered another issue that can cause the fonts to not load. If you define a font as
family=Arapey:italic
then you need to use the css, like so
font-family: 'Arapey';
font-style:italic;
if you leave out
font-style:italic;
then the font will not load in Chrome (and possibly other browsers?). Although it will work in Firefox without it.
You have set the CSS file as a Script file by mistake.
<script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></script>
Should be
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css">
you can also put this in your .css file
@import url("http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here");
you won't end up cluttering up your HTML with all these silly link tags. google shows this under 'advanced'.
watch out if you're using LESSCSS because @ defines a variable. let me know if there's a way to escape that - I couldn't find one!
精彩评论