Google Font API for Select

Hi friends,

Google has provided lot of  free API’s. Lets make a design using Google font API. For this you have to what API is and for what purpose it used for.I Strongly recommend you to go through  Article: API’s and Uses.

When we are going to add an API to our site we need an API-Key for sending request and getting response. But it will take few steps to create one just follow the below steps

Creating and using an API key

To acquire an API key, visit the APIs Console. In the Services pane, activate the Google Web Fonts Developer API; if the Terms of Service appear, read and accept them.

Next, go to the API Access pane. The API key is near the bottom of that pane, in the section titled “Simple API Access.”

After you have an API key, your application can append the query parameter key=yourAPIKey to all request URLs.

The API key is safe for embedding in URLs; it doesn’t need any encoding.

After creating this you will have key something like this AIzdfyBetrsdfIfe-gqbkE8P3XL4td0x8Ft7eWo

Adding it in your design

Create a html document and link it with the latest jquery by this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>

Then an select menu to your page with a text area

<select id="styleFont">
</select>
 <textarea id="custom_text"></textarea>

Now concentrate on Javascript and JSON

1.Add JSON to link the google font api to your select menu.

function SetFonts(fonts) {
for (var i = 0; i < fonts.items.length; i++) {
$(‘#styleFont’)
.append($(“<option></option>”)
.attr(“value”, fonts.items[i].family)
.text(fonts.items[i].family));
}
}

var script = document.createElement(‘script’);
script.src = ‘https://www.googleapis.com/webfonts/v1/webfonts?key=AIzdfyBetrsdfIfe-gqbkE8P3XL4td0x8Ft7eWo&callback=SetFonts’;
document.body.appendChild(script);

It avoids cross-domain issues and works in all browsers.

Note:The above function  will only shows the name list in the select menu.

2.Now gather the names of the font families which you want to add in your webpage

WebFontConfig = {
google: { families: [‘ABeeZee’, ‘Abel’,……’Yesteryear’, ‘Zeyada’]}
};
(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);
})();

Enter the names of font-family in line:2 of the above code.

3. Lets change our select menu to the Font family selector.

$(“#styleFont”).change(function (){
var id =$(‘#styleFont option’ +’:selected’).val();
$(“#custom_text”).css(‘font-family’,id);
});

This will make the work

I have made a JSBIN. Check for the output.

Advertisements

9 thoughts on “Google Font API for Select

  1. Really helpful tutorial! I have only one question – when I use your code, I get all fonts form the library, seems as if list of desired fonts in “WebFontConfig” is never used? How can I retrieve just specific fonts?

    Actually I have two questions 🙂 Can I also see what styles and variations each font have? I know that many fonts in google library have just normal and italic, or normal and bold, while some other have many styles and weights defined.

    Thanks!

  2. Of course you can get your desired fonts by declaring only its names in WebFontConfig like this
    WebFontConfig = {
    google: { families: [‘ABeeZee’, ‘Abel’,’Yesteryear’, ‘Zeyada’]}
    };

    Here you have to declare only the families you want to have and also change the for loop with
    for (var i = 0; i < (number of font you need); i++)

  3. Hello my firend,
    Fantastic! Thanks a lot.
    But i have bad problem . I test is in html page without cms ,All things is correct.
    But when i move it to joomla , I have problem.I get error in google chorme and this code is not worked.
    Why?

    $.getJSON(“https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyB8Ua6XIfe-gqbkE8P3XL4spd0x8Ft7eWo”, function(fonts){
    Uncaught ReferenceError: $ is not defined.
    I think joomla can not red json . I am in local and i active curl
    (A am in fronted , But i tested it in administrator . I have is yet!)
    Please help me! It is very important

  4. Hello vivekit12.
    Thanks a lot .
    My problem is not Relevance to template. I tested it on 5 template and I have it yet.
    Even i test in admin But i have it.
    I think it problem Relevance to json_decode .But i can not Understand json code and I can not use it in joomla.
    I should use:
    $data = array( ‘some data’ );
    // Output the JSON data.
    echo json_encode( $data );
    But what i put in some data?Js code or php code?What?!
    Please help me! It is very important!

  5. if: it doesn’t need any encoding so why i have problem? why i use json_decode? can we change metod that it do not use any json?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s