Custom fonts for styling just got easier with Googles release of the new Font API
It has been a bit of a pain including custom fonts in styling do to file size, bandwidth, page load etc…
With Google releasing this new API Google Font Directory it will make things a whole lot easier for us developers and also for the users viewing the sites.
As we know including external files from huge redundant places like Google offers the best browser caching around.
The reason is that the more sites that include these files in their site, the better the chance is the the users visiting already have the file cached in their browsers.
So without further ado, here is how you can use the Google custom fonts.
There are 2 ways you can use this API, the first being more pointed towards using just one font,
You include the API style link in your html head section like this
|
1 2 3 4 |
<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'> <style type="text/css"> h3 { font-family: 'Cardo', arial, serif; } </style> |
Now any place a h3 tag is used the font will be Cardo.
Another option is to import it directly into your CSS file at the top
|
1 |
@import url(http://fonts.googleapis.com/css?family=Cardo); |
Now you can use the Cardo font anywhere in your CSS file you wish.
There is also a JavaScript version to include multiple fonts.
It looks like this,
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> <script type="text/javascript"> WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell' ] } }); </script> |
The CSS uses a class so that if it is not activated via the JavaScript, it will not even be included to the element.
The CSS looks like this
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style type="text/css"> .wf-inactive p { font-family: serif; } .wf-active p { font-family: 'Tangerine', serif; font-weight: bold; font-size: 26px } .wf-inactive h1 { font-family: serif; font-size: 16px } .wf-active h1 { font-family: 'Cantarell', serif; font-size: 16px } </style> |
Here is a complete working example
|
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Google Custom Fonts</title> <!-- Custom fonts http://code.google.com/webfonts --> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'> <style type="text/css"> h3 { font-family: 'Cardo', arial, serif; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> <script type="text/javascript"> WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell' ] } }); </script> <style type="text/css"> .wf-inactive p { font-family: serif; } .wf-active p { font-family: 'Tangerine', serif; font-weight: bold; font-size: 26px } .wf-inactive h1 { font-family: serif; font-size: 16px } .wf-active h1 { font-family: 'Cantarell', serif; font-size: 16px } </style> </head> <body> <h1>This is using Cantarell</h1> <h3>Something with Cardo</h3> <p>This is using Tangerine!</p> </body> </html> |
With these new font options developers like me get an even bigger playground!