How To: Import Google Web Fonts in Website

Google is providing fonts, which can be easily imported in our webpage and that fonts are applied to our webpage’s fonts. Importing web fonts from google will help us to display text in a unique font, because some server won’t have the fonts which are expecting.

Just go to http://www.google.com/webfonts

Choose a font type and click on quick use

 

This web fonts can be import in three ways standard, import and javascript

Standard

Copy the code and just paste in starting of <head> tag

1
2
3
4
5
<head>
<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
</head>

 

Import

This can be imported using css.

1
2
3
4
5
[style type=text/css]
@import url(http://fonts.googleapis.com/css?family=Oranienbaum);
[/style]

 

Standard

standard web font import type will provide us the javascript code and we have to paste on start of <head> tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div><script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Oranienbaum::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script></div>
<div></div>

About prasad k

Prasad Kuppusamy has written 80 post in this blog.

i m php developer, web designer.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>