Google WFS API Test

The goal of this page is to demonstrate how WebFont Loader can be used to load fonts served by the Fonts.com Web Fonts service. This line is displayed using the Albertus® typeface

The WebFont Loader option for Fonts.com Web Fonts can be used to load fonts from the Fonts.com Web Fonts service through the Google Font API. Text on this page is displayed using the DIN Next™ Bold (headline) and ITC Galliard Roman® (body copy) typefaces. Fonts are served by the Fonts.com Web Fonts service, but are loaded using the Google Font API.

To use the WebFont Loader:

Grab your Fonts.com Web Fonts project ID by logging in to your account and visiting the Publish tab. If you’re using the JavaScript publishing method, your project ID is the character string in your line of code just before the .js suffix. If you’re using the non-JavaScript publishing method, your project ID is the character string in your line of code just before the .css suffix.

Invoke Google WebFont API at the very beginning of body tag, as shown in the following example:





                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>



        <title>This is title of my Web page<title>

        <!-- Step 1: The google webfonts.js script -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1.0.19/webfont.js" ></script>



    </head>

    <body>

        <!-- Step 2: Invoke Google Font API at the very beginning of body tag -->

        <script type="text/javascript">

            WebFont.load({

                monotype: {

                    projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'///this is your Fonts.com Web Fonts projectId



                }

            });

        </script>

        other body content goes here below the script....

    </body>

</html>

You are done!

WebFont Loader Option for Fonts.com Web Fonts