@face-fonts fallback fonts

R_Schreiber 2012-02-01 18:49:17 UTC #1

I need to implement fallback fonts for @fontface fonts.

I googled and came across Modernizer - looked at the documentation . . .

Not sure which features to use . . .

Moved to the download page and selected @fontface . . .

Then selected generator and saved the .js in my scripts folder.

Is this HUGE file what I need to place in my <head> section of the HTML . . .

/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-fontface-iepp-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+o.join(c+" ")+c).split(" ");return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o="Webkit Moz O ms Khtml".split(" "),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["&shy;","<style>",a,"</style>"].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(""),f=c.length;t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.fontface=/src/i.test(g)&&g.indexOf(c.split(" ")[0])===0},f,c)}(['@font-face {font-family:"font";src:url("https://")}'],["fontface"]);p.fontface=function(){return e.fontface};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));x(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b<g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\\s*[\\{\\}]\\s*$/,k=new RegExp("(^|[^\\\
]*?\\\\s)("+e+")([^\\\
]*)({[\\\
\\\\w\\\\W]*?})","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;d.getCSS=function(a,b){if(a+""===c)return"";var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\
":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);return b.join("\
")},d.writeHTML=function(){var a=-1;r=r||b.body;while(++a<g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()},d.restoreHTML=function(){o.innerHTML="",m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=""},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}(a,b),e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,g.className=g.className.replace(/\\bno-js\\b/,"")+(f?" js "+s.join(" "):"");return e}(this,this.document),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b=="c"?z:y;q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){return o.call(a)=="[object Array]"},B=function(a){return Object(a)===a},C=function(a){return typeof a=="string"},D=function(a){return o.call(a)=="[object Function]"},E=[],F={},G,H;H=function(a){function f(a){var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=F[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=E[h](f);return f}function e(a,b,e,g,h){var i=f(a),j=i.autoCallback;if(!i.bypass){b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);if(i.instead)return i.instead(a,b,e,g,h);e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)})}}function b(a,b){function c(a){if(C(a))e(a,h,b,0,d);else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;c(f),c(g),a.complete&&b.load(a.complete)}var g,h,i=this.yepnope.loader;if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g<a.length;g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);else B(a)&&b(a,i)},H.addPrefix=function(a,b){F[a]=b},H.addFilter=function(a){E.push(a)},H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"},0)),a.yepnope=d()}(this,this.document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

Thats a lot of code in the head section.

What am I missing here please . . .?

Rick

OK I think I got it.

R_Schreiber 2012-02-01 19:22:31 UTC #2

Can I delcare multiple div class="" if each div has their own font declarations . . . ie size, line height, etc?

Like this . . . ?

/* no-faceface fallback */
.no-fontface {h1,h2,h3,h4,h5, .tang,
.tengleft, .byer, .email, .bigtitle,
.subtitle, .minititle, .nav

font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 30px;     <font color='"#0000FF"'>would I need this if the declarations are in the div?</font>
letter-spacing: 0;
text-transform: none;

}

I do understand the differences of kerning, line height, letter spacing between different fonts, etc.

Also, how does this CSS find the javascript to run . . ? I have a script folder which is the last folder for the project.

I'm going to see if I can test this.

Thanks much.

Rick

kohoutek 2012-02-01 19:35:18 UTC #3

You do not need that script for your CSS. Modernizr is meant to implement features that don't exist natively in legacy browsers, the script does not provide fallbacks of any kind. I'd not use it for this.

Fallback fonts are implemented in your CSS. When you have a declaration like:

font: 100%/1.5 "Tangerine", sans-serif";

You can make the font stack more granular by specifying which font on a user's computer should be used if they cannot view your fonts (for whatever reason).

More granular means:

font: 100%/1.5 "Tangerine", "fallback system font 1", "fallback system font 2", sans-serif;

Which may or may not be of use because there really aren't any "web-safe" fonts, even though there are system standard fonts.

It's hit and miss. However, if you use such an exotic script font like Tangerine, I'd try to list a font for each of the common systems (Linux, Windows, OS X) which is somewhat similar in size, if you don't want to have your site break.

Overall, it'll be hit and miss anyway.

R_Schreiber 2012-02-01 19:55:14 UTC #4

kohoutek . . . thanks

That system standard fonts chart showing was a great help.

Rick

R_Schreiber 2012-02-01 20:55:52 UTC #5

My body font overrides my fallback fonts.

If I change the font-size in the body section of the css, the tangerine font changes to Veranda with the changed font size.

body {font-family: Verdana, Geneva, sans-serif;
font-size:16px;
color:#ccc;
line-height:130%;
margin-top:2%;
margin-right:1.4%;
}

Here is my fallback font.

@font-face { font-family: 'tangerine' "Trebuchet MS", Arial, Helvetica, sans-serif, "Verdana, Geneva, sans-serif"

My fallback fonts are in blue.

Does the word "fallback" need to be included in each fallback font name?

thanks . . . rick

ralphm 2012-02-02 06:44:41 UTC #6

Does the word "fallback" need to be included in each fallback font name?

No, just list the font names. But you only need quotes around a font name where there is a gap between words, so use this:

{font-family: tangerine, "Trebuchet MS", Arial, Helvetica, Verdana, Geneva, sans-serif;}

The sans-serif goes at the end, and it means that if NONE of the fonts listed is available on the luser's computer, then use the computer's default sans-serif font.

EDIT:

O, by the way, you don't want that font list in you @font-face rule. That's just to tell the browser to make use of a font you have available on your site. You use that list on any element that is to have the tangering font. E.g.

#nav {font-family: tangerine, "Trebuchet MS", Arial, Helvetica, Verdana, Geneva, sans-serif;}

But, as I've mentioned before, and as Maleika said above, it's best to choose fallback fonts that look similar to the preferred font—in size, line height etc.—to prevent a font size blowout if the preferred @font-face font doesn't load.

ralphm 2012-02-02 07:06:11 UTC #7

Given that tangerine is a cursive font, you might consider cursive font fallbacks. On a Mac, that could include:

#nav {font-family: tangerine, "caflisch script pro", "lucida calligraphy", <font color='"#FF0000"'>cursive</font>;}

Not sure what the Windoze/Linux cursive fonts are called.

system 2014-10-08 01:52:23 UTC #8

ThemesPodcastArticlesPremium