How to import Google Web Font in CSS file?
I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from within the CSS file?
Use the import method:
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
Obviously, "Open Sans" is the font that is imported. But you can replace it with yours. If it is a single word font, just include the font name after the family=... if it is two words, do as I did and add a + sign between each word.
NOTE: Place @import at the very first line of the CSS file. (Thanks to @Ronny for pointing that out).
In the Google Webfont Library, when you decide upon which fonts you want to use, it gives you a box with three tabs. Each tab is an injection method, HTML, CSS or JavaScript. The @import tab should give you the code you need for css files. See image:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
Better to not use @import. Just use the link element, as shown above, in your layout's head.
Add the Below code in your CSS File to import Google Web Fonts.
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
Replace the Open+Sans parameter value with your Font name.
Your CSS file should look like:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
font-family: 'Open Sans',serif;
}
There are 2 more ways to import Google Web Fonts in your website. Hope it helps.
链接地址: http://www.djcxy.com/p/58740.html上一篇: 制作移动友好网站的规则是什么？