Home >>
Showing posts with label Google Code. Show all posts
Showing posts with label Google Code. Show all posts

How to request multiple Google Font API families in a CSS Style

In ordinary text you can change how Google Font API looks by using CSS Style.
Example in HTML format:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<style>
body {
font-family: 'Lobster', serif;
font-size: 48px;
}
</style>
</head>
<body>
<h1>Lobster goes here!</h1>
</body>
</html>
If you open this HTML file in a modern web browser, you should see a page displaying the following preview, in the font called Lobster:
Lobster goes here!


That's an example of ordinary text in a kind of Google Font API.
But now, how to display text in multiple kind of Google font API in one page?

Requesting multiple fonts allows you to use all of Google fonts in your page. To request multiple font families in a CSS style can be done by separating the names with a pipe character (|) and replace any spaces in the font family name with plus signs (+).

Example, if you want to request the fonts Neucha, Cuprum, and Reenie Beanie, you should separate the fonts with a pipe character (|) like this, on <Head> section:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Neucha|Cuprum|Reenie+Beanie">

On <body> section:
Here are <span style="font-family: 'Neucha',serif; font-size: 24px;">Neucha</span>, <span style="font-family: 'Cuprum',serif; font-size: 24px;">Cuprum</span>, <span style="font-family: 'Reenie Beanie',serif; font-size: 24px;">Reenie Beanie</span>

That codes will look like:
Here are Neucha, Cuprum, Reenie Beanie
Read full entry... How to request multiple Google Font API families in a CSS Style

Make Your Blog Beautiful by Using Google Font API

Making The Blog Beautiful with Google Font API.
The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API.

Applying a font is easy: just add a special stylesheet link to your blog, then use the font in a CSS style.

Google Font API gallery.

To start using the Google Font API on our Blog can be done in just two steps:
  1. Add a stylesheet link below between <head> tag:
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
  2. Style an element with the requested web font, either in a stylesheet:
    <span style="font-family: 'Font Name', serif;">Your text</span>

Example:
  1. Add a stylesheet link below before </head> tag:
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie+Beanie">
  2. Place this fonts style on where you want to appear:
    <span style="font-family: 'Reenie Beanie', serif; font-size: 36px; text-shadow: 4px 4px 4px #aaa">Example of Reenie Beanie font</span>

    Preview:

    Example of Reenie Beanie font

To see more Fonts Name click here!
Read full entry... Make Your Blog Beautiful by Using Google Font API

Free Fonts from Google

Here are some examples of Google font API which you can find from Google Font Directory. These fonts are available for use on your blog under an open source license and are served by Google servers.

These fonts are some of more beautiful Google Font API i like very much. How about you?
Lobster

Cuprum

IM Fell DW Pica

Josefin Sans Std Light

Neucha

Philosopher

Reenie Beanie

Tangerine

Yanone Kaffeesatz

See: How to use these Free Fonts from Google on your Blog?
Read full entry... Free Fonts from Google