It really is quick and simple:
1. Choose a font. You can add it to your collection or use “quick-use” to generate the code and options for that font.
2. Copy and paste the code generated into your <Head>
3. The font is now accessible in your CSS code
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; } You should now see a drop shadow under the text:
1. Choose a font. You can add it to your collection or use “quick-use” to generate the code and options for that font.
2. Copy and paste the code generated into your <Head>
<head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
</head>
3. The font is now accessible in your CSS code
body { font-family: 'Tangerine', serif; font-size: 48px; }
http://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html
https://www.google.com/fonts#ChoosePlace:select
https://developers.google.com/fonts/docs/getting_started
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Then open the file in a modern web browser. You should see a page displaying the following, in the font called Tangerine:
Making the Web Beautiful!
That sentence is ordinary text, so you can change how it looks by
using CSS. Try adding a shadow to the style in the previous example:body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; } You should now see a drop shadow under the text:
Making the Web Beautiful!
And that's only the beginning of what you can do with the Fonts API and CSS.Overview
You can start using the Google Fonts API in just two steps:- Add a stylesheet link to request the desired web font(s):
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
- Style an element with the requested web font, either in a stylesheet:
CSS selector { font-family: 'Font Name', serif; }or with an inline style on the element itself:<div style="font-family: 'Font Name', serif;">Your text</div>
Note: When specifying a web font in a
CSS style, always list at least one fallback web-safe font in order to
avoid unexpected behaviors. In particular, add a CSS generic font name
like
serif or sans-serif to the end of the list, so the browser can fall back to its default fonts if need be.
No comments:
Post a Comment