treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Fonts in Browser

  • There is a big issue with fonts in the browser when i use any font using @font-face they don't look good. I have used font-smoothing:antialiased; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased;

    also to make it look better but no help. Please suggest if anybody knows. Thanks in advance :)

  • @padma What typeface are you using?

  • @padma... you can use Google fonts its very easy and effective way to format fonts...

    http://www.google.com/webfonts

  • Except they'll most likely render just as bad because of the poor quality.

  • hey Chrisburton I am using Helvetica Neue and its showing zigzaged or you can say no antialiased

  • Hey DhiruSingh I think we don't have Helvetica Neue font there could i tell me if somehow we can use this . Thanks in advace :)

  • @padma Did you upload the font file to your server?

  • @chrisburton yes i have uploaded all the format font files to the server

  • Sorry, I can't really help you. You're breaking the license agreement as Linotype requires a license to use Helvetica Neue on your site and that is offered on fonts.com.

    Note: Although it is installed on your computer, it does not grant you permission to upload those files onto your server. Always check the EULA of the font you want to install to make sure you're not in violation.

    Your only other option is to set Helvetica Neue locally within @font-face if it's installed on their computer, otherwise serve Helvetica or Arial.

  • @padma... chris is saying true, you cannot use any font without license on to the server, my suggestion is try another font similar to your requirement from googlefonts or buy license.. :)

  • Honestly, the easiest way to get fonts to render correctly is to just use web fonts, as others have mentioned. Look into Google Web Fonts or Adobe's TypeKit.

    Very easy to set up, swap out fonts at your leisure, and have peace of mind knowing that they are rendering correctly cross-browser.

  • Use the Google Font API. There is a blog post on css-tricks about it.

    Or

    Use Typekit ther is a free plan and ther is a screencast on it here somewhere.

  • hey guys thanks a lot for the help :)