many popular fonts seem available web use exclusively http://webfonts.fonts.com/
however, works in strange way. don't give direct font urls, instead give css file refers font files. think font urls in css transient , change on time, prevent unauthorized use. have use css, can't directly incorporate font file urls (as far know).
the css in turn not think should be. rather (simplified):
@font-face { font-family: "foo"; font-weight: bold; src: url("foo-bold-variant.ttf"); } @font-face { font-family: "foo"; font-weight: normal; src: url("foo-normal-variant.ttf"); } it is:
@font-face { font-family: "foo bold"; src: url("foo-bold-variant.ttf"); } @font-face { font-family: "foo normal"; src: url("foo-normal-variant.ttf"); } as result, can't this:
body { font-family: "foo", sans-serif; } instead, anywhere use font-weight: bold, have change font-family: "foo bold", plus guess have add css rules change family on things <strong>. i'm using bold example, same issue arises font-style in addition font-weight.
they explain workaround ios bug ("it's feature!"): http://blog.fonts.com/2010/09/23/getting-web-fonts-to-look-fantastic-on-iphone-and-ipad-devices/
but bug has been fixed in ios 4.2: http://blog.typekit.com/2010/12/06/updates-to-typekits-mobile-support/
with setup, unless i'm missing something, couldn't use third-party css or scripts try use font-weight, because fonts.com's approach breaks font-weight , font-style css properties entirely. instead of using font-weight, have make custom css class "mybold" or set font-family "foo bold." i.e. break standard css. (what missing?)
maybe they'll fix sometime. in meantime, can think of sane workaround? there's no way define family "foo" in terms of "foo bold" etc. @font-face definitions there? write crazy javascript extract urls css on fly , define own @font-face dynamically?
("use different font service" not count answer ;-) yes have thought of that, i'm wondering if there's way "fix" webfonts.fonts.com somehow tweaking css own css rules or javascript.)
i wrote small javascript loader fonts.com allows multiple weights per font-family. it's based on rossi's approach converted re-usable script. check out code , usage in this gist.
basically loads css fonts.com, modified according specified settings , appended <head> of document.
in js:
fontscomloader.load('helveticaneuefontscom', 'https://fast.fonts.net/cssapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.css', { 'w02-55roma': '400', 'w02-75bold': '700' }); in css:
.helvetica-regular, .helvetica-bold { font-family: 'helveticaneuefontscom', 'helvetica neue', helvetica, arial, sans-serif; } .helvetica-regular { font-weight: 400; } .helvetica-bold { font-weight: 700; } 
Comments
Post a Comment