开发者

Debugging Google Web Fonts

开发者 https://www.devze.com 2023-01-07 22:35 出处:网络
i am think i am using similar code i used b4 but seems like the fonts aren\'t loading <html> <head>

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!

0

精彩评论

暂无评论...
验证码 换一张
取 消