Как загрузить шрифты Google?

Question

Я загрузил d динамический список из web fonts, предлагаемых Google Web Fonts service и поместить его в списке выбора, как:

$.get("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyChZeTZ-DzMW-45IUBXUSuBha9MWEiXXtI", 
    {}, function (data) { 
    $.each(data.items, function (index, value) { 
     $('#fonts').append($("<option></option>") 
        .attr("value", value.family) 
        .text(value.family); 
    }); 

Теперь то, что я хочу, чтобы загрузить каждый font, когда пользователь выбирает его из списка выбора и для этого я попытался:

$("#fonts").live({ change: function() { 
    $.get("http://fonts.googleapis.com/css?family=" + $(this).val(), {}, 
    function() { alert("font loaded"); }); } }); 

, но, к сожалению, это не работает. Кто-нибудь может помочь мне?

Answer 1

Второй запрос на получение просто возвращает необходимый CSS для загрузки webfont.

Вы должны либо вставить это на страницу, либо добавить тег ссылки на содержимое страницы, которое загрузит стиль Google.

Тогда вам необходимо будет также установить семейство шрифтов, где он используется ...

Что-то вроде этого:

$("#fonts").live('change', function() { 

    $('body').append("<link rel='stylesheet' id='colorbox-css' href='http://fonts.googleapis.com/css?family=" + escape($(this).val()) +"' type='text/css' media='all' />"); 

    $('body').css({'font-family':'"'+$(this).val()+'"'}) 

}); 



$.get("https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyChZeTZ-DzMW-45IUBXUSuBha9MWEiXXtI", {}, function (data) { 

    $.each(data.items, function (index, value) { 
      $('#fonts').append($("<option></option>") 
        .attr("value", value.family) 
        .text(value.family)); 
        }); 


}); 

Примечание: escape также используется для создания URL в случае нужно быть закодированным по URL