/*! * Soma FontFriend 3.2 * http://somadesign.ca/projects/fontfriend * * Copyright (c) 2009-11 Matt Wiebe * Licensed under the MIT license * http://www.opensource.org/licenses/mit-license.php * * Uses some code (c) 2009-10 Ryan Seddon from * http://labs.thecssninja.com/font_dragr/ * Licensed under the MIT license * */ (function(B,f){var s,m,y,n="undefined",z={version:"3.2",css:"#font-friend{overflow:hidden;position:fixed;bottom:0;left:30px;background-color:#fff;background-color:rgba(255,255,255,0.93);width:740px;color:#222;-webkit-box-shadow:1px 1px 5px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 5px rgba(0,0,0,.3);box-shadow:1px 1px 5px rgba(0,0,0,.3);z-index:10000;text-align:left;height:310px}#font-friend,#ff-drop h6,#ff-drop li{line-height:1.5!important}#ff-drop{padding:12px 12px 12px 36px}#ff-toggle{background-color:#222;color:#eee;display:block;width:12px;height:16px;padding:0 1px 0 3px;position:absolute;top:0;left:0;font-size:16px;line-height:1!important;cursor:pointer;z-index:10001;-moz-transition:.25s all ease-in-out;-webkit-transition:.25s all ease-in-out;-o-transition:.25s all ease-in-out;transition:.25s all ease-in-out}#ff-toggle sup{font-size:13px;line-height:1!important;vertical-align:super;display:none}.open #ff-toggle sup{display:inline}#ff-toggle:hover{color:#fff;background-color:#555}.open #ff-toggle{width:auto;height:32px;font-size:32px;padding:0 3px}#ff-drop form{background:0;color:inherit;float:none}#ff-drop h6{font-size:13px;border-bottom:1px solid #aaa;margin:0 0 6px!important;padding:0!important;text-indent:0!important;float:none!important;height:1.5em!important;white-space:nowrap}#ff-drop>div{float:left;width:120px;padding-right:20px;margin:0!important;position:relative}#ff-drop>div.wrap>div{margin-bottom:12px;font-size:11px!important;position:relative}#ff-drop div#ff-selector{width:130px}#ff-drop div#ff-font-family{width:240px}#ff-selector p{font-size:9px!important;line-height:1.2!important;margin:1em 0 0!important;padding:0!important}#ff-controls{position:absolute!important;bottom:60px;left:65px;width:55px!important;height:60px;margin:0!important;padding:0!important}#ff-controls div{position:absolute;font-size:20px;width:1em;height:1em;color:#555;min-width:inherit!important;min-height:inherit!important;padding:0;margin:0;float:none;text-align:center}#ff-controls>div,.ff-toggler>span,#family-custom-add{font-family:sans-serif!important;font-weight:normal!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}#ff-controls div:hover{color:#000}#ff-controls .up{left:1em;top:0}#ff-controls .down{left:1em;bottom:0}#ff-controls .left{left:0;top:1em}#ff-controls .right{right:-.25em;top:1em}#ff-drop #ff-font-family ul{float:left;width:110px;padding-right:5px}#ff-drop #ff-font-family ul#ff-font-family-sans{padding-right:10px;width:115px}#ff-drop ol li{list-style:none outside}#ff-drop ol,#ff-drop ul{margin:0;padding:0}#ff-drop li{font-size:11px!important; margin:0!important;padding:0!important;list-style:none outside none!important;text-indent:0!important;height:auto!important}#ff-drop li.core{margin-bottom:4px!important;padding:0!important}#ff-drop ul li:hover{cursor:pointer;background-color:#e6e6e6!important}#ff-drop ul li.family-custom{margin:12px 0 0!important}#ff-drop ul li.family-custom:hover{cursor:default;background:none!important}#family-custom-add{display:inline-block;color:#aaa;line-height:1!important;font-size:15px!important;color:#666!important;vertical-align:top;padding:1px 3px 3px}#family-custom-add:hover,#family-custom-add:focus{background-color:#555!important;color:#fff!important}#family-custom{width:85px}#ff-drop ol input[type=radio]{margin-left:-5px;width:auto!important}#ff-blah{width:100px;margin-left:5px}#ff-drop ol label{margin-left:5px;display:inline!important}#ff-drop>#ff-credit{position:absolute;bottom:21px;left:32px;font-size:9px;margin:0!important}#font-friend a{color:#4c0003!important;text-decoration:underline!important;border:0!important}#font-friend a:hover{color:#a60007!important}#ff-drop>#ff-clear{position:absolute;bottom:0;right:0;padding:5px 5px 0!important;text-decoration:line-through;opacity:.1;font-size:21px;margin:0!important;width:auto!important}#ff-clear:hover{opacity:1;cursor:pointer}#ff-font-drop{font-size:11px!important;background-color:#e6e6e6;padding:15px 0;text-align:center;border:1px solid #aaa;margin-bottom:6px}#ff-font-drop.dropzone{background-color:#fff;border-color:#111}#ff-drop select{width:105px!important;margin-left:15px!important}#ff-google-webfonts select{width:99%!important;margin:0!important}#ff-drop select option{font-size:10px!important}#ff-drop .ff-hidden{display:none}#ff-drop .ff-clickable{cursor:pointer;position:relative;z-index:2}#ff-font-family h6 span{text-transform:uppercase!important;font-size:75%;font-weight:normal!important;color:#111!important;letter-spacing:.02em;line-height:1;display:inline-block}#ff-font-family h6 .ff-active{color:#aaa!important}#ff-font-family .ff-custom{padding:0 6px;border-right:1px solid #bbb;margin-right:6px}#ff-badges{position:absolute;right:14px;top:0;z-index:14px}#ff-badges>img{padding:0 4px 0 0!important;margin:0!important;border:0!important;width:16px!important;height:16px!important}#ff-drop #ff-font-family #ff-font-family-custom{width:100%;-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px}.ff-toggler{position:absolute;height:20px;top:27px;left:-4px}.ff-toggler span{position:absolute;display:block;left:0;top:0;height:8px;width:8px;line-height:1!important;font-size:8px!important;text-align:center;color:#aaa!important;padding:2px 4px!important}.ff-toggler span:hover{color:#333!important}.ff-toggler span.ff-down{top:auto;bottom:0}#ff-drop [data-ff=fontFamily] li{height:1.5em!important;overflow:hidden;text-overflow:ellipsis}",html:'
F2
Selector

Roll your own selector using jQuery selectors.

Font Family
Google Web Fonts
Loading…
Font Size
Font Weight
Line Height
Font Style
  • italic
  • normal
@font-face
Drag a font here.
    Text Transform
    • uppercase
    • lowercase
    • capitalize
    • none
    Font Variant
    • small-caps
    • normal
    ←
    →
    ↑
    ↓
    Soma FontFriend
    S
    ',customFamiles:false,customFamilyMap:[],googleFamilies:{},existingGoogleFamilies:[]}; function a(){if(typeof(B.jQuery)===n){var M=f.createElement("script");M.src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js";f.getElementsByTagName("head")[0].appendChild(M);y=setInterval(G,100)}else{K()}}a();function G(){if(typeof(B.jQuery)!==n){clearInterval(y);K()}}function K(){s=B.jQuery;if(s("#font-friend").size()!==0){return false}m=s("body");s("head").append('");m.append("
    ");s("#font-friend").html(z.html).addClass("open");s("#ff-credit").append(" "+z.version+"");k();l();j();J();t();L();H()}function H(){var M="https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyBUK3PeqSEzwPNIyg94dBQpziFOPvm7-aA",O=[],P=function(Q){if(Q.kind==="webfonts#webfontList"){s.each(Q.items,function(R,S){if(s.inArray(S.family,z.existingGoogleFamilies)!==-1){S.family="✓ "+S.family}else{z.googleFamilies[S.family]=S.variants}O.push(S.family)});x(O)}else{N()}},N=function(){s("#ff-google-webfonts > div").html("Error loading webfonts. :(");setTimeout(function(){s("#ff-google-webfonts").fadeOut()},3500)};s.ajax({url:M,type:"GET",dataType:"jsonp",success:P,error:N})}function x(N){var M=[''],N;s.each(N,function(P,O){M.push("")});N=s("");N.change(i);s("#ff-google-webfonts > div").html(N)}function i(){var N=s(this),R=N.val(),M=R.replace(/ /g,"+"),P="http://fonts.googleapis.com/css?family=",Q,O;if(R==="0"||!z.googleFamilies[R]){return}Q=":"+z.googleFamilies[R].join(",");O=P+M+Q;s('').appendTo("head");A([R],"www.google.com");N.find(":selected").text("✓ "+R);s("#ff-font-family-custom").find("li:last").click();delete z.googleFamilies[R]}function L(){F();u();E();D()}function F(){var M=f.styleSheets||[],N=[];s.each(M,function(O,Q){try{s.each(Q.cssRules,function(S,T){if(T.type===CSSRule.FONT_FACE_RULE){var R=T.style.getPropertyValue("font-family");if(R){R=R.replace(/^"|'/,"").replace(/"|'$/,"");if(R!=="testfont"){N.push(R)}}}})}catch(P){}});if(N.length>0){A(d(N))}}function l(){if(typeof(fontFriendFamilies)!==n){z.customFamilies=fontFriendFamilies;if(!s.isArray(z.customFamilies)){var M=[];s.each(z.customFamilies,function(N,O){M.push(N)});z.customFamilies=M;z.customFamilyMap=fontFriendFamilies}}else{if(m.attr("data-ff-families")){z.customFamilies=m.attr("data-ff-families").split(",")}}}function t(){z.wfs=(B.location.href=="http://webfontspecimen.com/demo/");z.wfsName=(z.wfs)?s("h1, .bodysize tr:first-child th:first-child"):false;if(!z.wfs&&s("body").attr("id")=="soma-web-font-specimen"){z.wfs=true;z.wfsName=s("h1, .bodysize tr:first-child th.base")}if(z.wfs){z.wfsOriginalName=s("h1").text();z.wfsTitle=s("title").text()}}function j(){s("#font-friend").find("select").each(function(M){var N=s('▲▼');N.insertBefore(this)});s(".ff-toggler span").click(o)}function o(N){var M=s(this),R=N.target.className=="ff-up",Q=M.parent().next(),O=Q.find(":selected"),P;P=(R)?O.next():O.prev();if(P.size()==0){P=(R)?Q.find(":first"):Q.find(":last")}P.attr("selected","selected");Q.trigger("change")}function D(){var M=p(),N;if(!M){return}s.getJSON("http://www.typotheque.com/ajax/webfont_api.php?key="+M,function(O){console.log(O)})}function p(){var M=false;s('link[href*="wf.typotheque.com"]').each(function(){M=s(this).attr("href").split("/").pop();return false});return M}function E(){var M=b(),O,N=[];if(!M){return}O=M.split("family=").pop();s.each(O.split("|"),function(Q,P){N.push(P.split(":")[0].replace("+"," "))});if(N.length>0){A(N,"www.google.com");z.existingGoogleFamilies=N}}function b(){var M=false;s('link[href*="fonts.googleapis.com"]').each(function(){M=s(this).attr("href");return false});return M}function I(){var M=null;s("script").each(function(O){var N=this.src.match(/use\.typekit\.com\/(.+)\.js/); if(N){M=N[1];return false}});return M}function u(){var M=I();if(!M){return false}s.getJSON("https://typekit.com/api/v1/json/kits/"+M+"/published?callback=?",function(N){if(!N.errors){var O=[];s.each(N.kit.families,function(P,Q){z.customFamilyMap[Q.name]=Q.css_names.join(",");O.push(Q.name)});A(O,"typekit.com")}})}function c(M){var P="//"+M+"/favicon.ico",N=s("#ff-badges"),O=N.find("[src='"+P+"']");if(!O.length){s("",{src:P}).appendTo(N)}}function A(S,N){var M=s("#ff-font-family-custom"),Q=s(''),P="",O="Click to toggle between custom & stock font families",R=': CustomStock';s.each(S,function(T,U){P+="
  • "+U+"
    • "});if(typeof(N)!==n){c(N)}if(M.size()===1){M.append(P);return J()}P=Q.append(P);s("#ff-font-family").append(P);s("#ff-font-family > h6").addClass("ff-clickable").attr("title",O).append(R).click(function(){var U=s(this),X=U.hasClass("ff-custom")?true:false,aa=s("#ff-font-family-custom"),W=s("#ff-font-family-sans, #ff-font-family-serif"),X=!aa.is(":visible"),Y=U.children(),Z=100,V,T;if(X){V=W;T=aa}else{V=aa;T=W}Y.toggleClass("ff-active");V.fadeOut(Z,function(){T.fadeIn(Z)})});J();s("#ff-font-family > h6").click()}if(z.customFamilies){A(z.customFamilies)}function C(M){if(!z.wfs){return false}if(!M){z.wfsName.text(z.wfsOriginalName);s("title").text(z.wfsTitle)}else{z.wfsName.text(M);s("title").text(z.wfsTitle.replace("Font name",M))}}function h(M){if(typeof(z.customFamilyMap[M])!==n){M=z.customFamilyMap[M]}return M+",monospace"}function J(){s("#ff-font-family li, #ff-font-face li").each(function(){var M=s(this);M.css("fontFamily",h(M.text()))});s("#ff-font-style li, #ff-text-transform li, #ff-font-variant li").each(function(){var N=s(this),M=N.parent().data("ff"),O=N.text();N.css(M,O)})}function q(O,N){var M=new FileReader();M.name=N;M.onloadend=function(P){v(P)};M.readAsDataURL(O)}function w(M){M=M.replace(/\..+$/,"").replace(/\W+/,"-").replace(/-|_/," ").replace(/^([a-z])|\s+([a-z])/g,function(N){return N.toUpperCase()});return r(M)}function r(M){return M.replace(/([a-z])([A-Z])/g,"$1 $2").replace(/\b([A-Z]+)([A-Z])([a-z])/,"$1 $2$3").replace(/^./,function(N){return N.toUpperCase()})}function g(M){var O=M.originalEvent.dataTransfer,N=O.files,T=N.length,P=/^.*\.(ttf|otf|woff)$/i;e(M);for(var S=0;S@font-face{font-family: "+M+"; src:url("+O+");} ").appendTo("head");A([M]);s("#ff-font-family-custom").find("li:last").click()}function e(M){M.stopPropagation();M.preventDefault()}function d(Q){var M=Q.length,P={},O=[],N;for(N=0;N li").live("click",function(){if(s(this).children("input").length){return false}var P=s(this),R=P.parent().attr("data-ff"),S=P.text(),Q=O();if(R=="fontFamily"){N(S,Q)}else{s(Q).css(R,S)}});function O(){var Q=s("#ff-drop ol input:checked").next(),P=Q.text()||Q.val();return P}function N(Q,P){P=P||O();C(Q);Q=h(Q);s(P).css("fontFamily",Q)}s("#ff-drop select").change(function(){var Q=s(this).attr("data-ff"),R=parseFloat(s(this).find("option:selected").val()),P=O();s(P).css(Q,R)});s("#ff-drop li.family-custom").unbind();s("#family-custom").keyup(function(Q){var R=s("#family-custom").attr("value"),P=O();if(Q.keyCode==13){s("#family-custom-add").click()}else{N(R,P)}e(Q)});s("#ff-controls div").click(function(){if(s(this).hasClass("left")){s("#font-friend").css({left:30,right:"auto"}) }if(s(this).hasClass("right")){s("#font-friend").css({right:30,left:"auto"})}if(s(this).hasClass("up")){s("#font-friend").css({top:0,bottom:"auto"})}if(s(this).hasClass("down")){s("#font-friend").css({bottom:0,top:"auto"})}});s("#ff-blah, #family-custom").each(function(P){s(this).attr("data-ff",s(this).attr("value"))}).click(function(){s(this).prev().attr("checked","checked");if(s(this).attr("value")==s(this).attr("data-ff")){s(this).removeAttr("value")}else{s(this).select()}});s("#ff-clear").click(function(){s("*").not("[data-ff=fontFamily]").removeAttr("style");J();C()});s("#family-custom-add").click(function(){var P=s(this).prev(),Q=P.val();if(Q!=="your font family"&&Q!==""){A([Q]);P.val("").select()}});s("#ff-font-drop").bind("dragover",e).bind("dragenter dragleave",function(P){s(this).toggleClass("dropzone");e(P)}).bind("drop",g)}}(this,this.document));