Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts

    Typekit adobe relies on js

    So i spend a small fortune on some modern design software and purchase a subscription to adobe creative cloud. Adobe installs various design fonts on my machine. So i design a new site in photoshop based on a font that I chose. Now i need to convert them in to web fonts. Adobe have no tool for converting this font to EOT, WOFF, SVG, TTF etc etc so I can't use the @font-face css code. I spend two hours on phone to adobe complaining about this and they tell me to use typekit. Unfortunaltey typekit uses a javascript function to embed the webfonts and not the conventional method. My question is does anyone else use typekit and if so what do you do for uses who have js disabled?

    Should i forget about typekit and design sites based on another set of supported fonts?
    You can not say you know how to do something, until you can teach it to someone else.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Well, as you might know, I’m generally critical of sites/applications relying on JavaScript. In the case of Typekit it’s even worse because it is totally unnecessary to rely on JS in order to embed a font. They say they are doing it so you have more control over the font rendering and “flash of unstyled content” but in reality you are handing over control to them and there is no flash of anything at all if their servers are slow or down or JS is disabled for whatever reason. Plus, with the embed code comes a tracking code that analyzes usage etc. because usually with Typekit (and similar services) there is a page view limit.

    I would really suggest to forget about Typekit and any service that costs a regular fee and doesn’t give you full rights/control and either purchase a webfont so you actually own it and can host it yourself, or go with one of the numerous free fonts that are available (although they are less unique because many people are using them).

    Myfonts, FontFont, and Fontshop are some of the larger sites that sell webfonts (the last one has many Adobe fonts, too).

  • Users who have thanked VIPStephan for this post:

    timgolding (10-23-2013)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Seconded....

    I find fontsquirrel invaluable for using @font-face - it has a load of free fonts available plus a generator which produces all the files needed for @font-face.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    timgolding (10-23-2013)

  • #4
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    I did try to convert the font with fontsquirell but it said the font had been blacklisted by adobe. I tried lots of other converters that worked but didn't give me a working EOT file. I really wanted the Myriad Pro font for this site as the styling of the site is based on it.

    For this site I think i will have to find a similar font that i can use and have an alternative noscript stylesheet. Means alot of mucking about though.

    Thanks for the links gives me something to work with in the future.

    Will try fontsquirell and some of the links VIPStephan has posted.
    You can not say you know how to do something, until you can teach it to someone else.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Yeah, of course, you can’t just convert commercial fonts with font converters. Even if there are some that work it’s just not allowed. There is a reason why they sell desktop and web fonts separately.

    If you really insist on using Myriad Pro then WebInk looks like it has that font and gives you a CSS link that doesn’t require JS.

  • Users who have thanked VIPStephan for this post:

    timgolding (10-23-2013)

  • #6
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    If you like graphics/fonts that can pop, go to cooltext.com . Everything on that site is free-use for any purpose.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • Users who have thanked Nerevarine for this post:

    timgolding (10-24-2013)

  • #7
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    I found a font on cufonfonts.com its called vegur and is very similar to Myriad. What i cant figure out is why this font shifts up a few pixels when placed in the same position as Myriad. Strange behoviour indeed.
    You can not say you know how to do something, until you can teach it to someone else.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    Quote Originally Posted by timgolding View Post
    What i cant figure out is why this font shifts up a few pixels when placed in the same position as Myriad.
    This could be a different leading or positioning in the character space (I don’t know what this is really called), like, you know, when the font was designed; i. e. an intrinsic characteristic of the font. You can’t really change that with CSS. I would recommend downloading the source font and running it through FontSquirrel with advanced settings; there you can set vertical font metrics and even x-height matching to a standard web-safe font. Perhaps this helps.

  • #9
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Perhaps if you resized the font, or edited it in Photoshop? Perchance it has a whitespace on the base image set.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,876
    Thanks
    6
    Thanked 1,035 Times in 1,008 Posts
    How do you edit a font in Photoshop? We’re talking about the actual (web) font, not an image with text in it.

  • #11
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Ahh, Webfonts. I was talking about stuff like a cooltext font, something you could download.

    My bad.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #12
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Thanks everyone for all your help. Think ive got what i need now. I can hack the css in different ways where required. Not ideal and would be nice if i could edit an remove the whitespace from this font, but i dont have any software for that.
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •