0

i want to add pretty fonts to my Bootstrap site. i'm a programmer, not a designer.

I googled around and ended up at Google Webfonts website. Google's own font browser does not work (all the fonts default to a serif or something) for any of my browsers (OSX Chrome, OSX Safari, Win7 Chrome, Win7 IE9), all the fonts show up the same.

  • why doesn't google's webfont broswer work for me? http://www.google.com/webfonts
  • how can i trust them to work for everyone else
  • what is the bulletproof way to use custom fonts?
  • to i have to buy them and host them myself? is this a bad idea?
Dustin Getz
  • 21,282
  • 15
  • 82
  • 131
  • 2
    We can't help you figure out Google Fonts unless you show us the code you tried. Google Fonts work cross browser for everyone that implements them correctly. – Lowkase Oct 01 '12 at 16:00
  • there is no code. i go to http://www.google.com/webfonts and see a bunch of sample text all in the same font. – Dustin Getz Oct 01 '12 at 19:03

3 Answers3

2

Web fonts are fonts that have been licensed specifically for web-use. Besides Google Webfonts, there are other font sites that offer free (and legal) fonts for use on the web like Font Squirrel (free), and Typekit (mostly a paid service). Font Squirrel has a lot of fonts with @face kits that can help end the "browser blues", and make it easy to host the fonts on your own server (my preference).

There's a good article on A List Apart that will help you a bunch - have a read

BTW - it's a violation of your font license to take a font from your computer and run it through a true-type converter (for use on the web)...unless you've purchased/established licensing for web-use via the font provider/manufacturer/creator, etc.

Dawson
  • 7,567
  • 1
  • 26
  • 25
0

But i used them a couple of times so thought of sharing with you guys. I am just answering for How to use them? For ex:

When you use a particular web font Archivo then you need to include its style sheet as follows

<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>

In other way you need to install the fonts API so that you dont need to make a online request every single time.

They should be supported by most of the modern browsers.

DomincJune
  • 931
  • 9
  • 15
0

  • Can't guess the reason for the first question.

  • Google web-fonts will work with every browser and I'm sure it is working. There are some issues.

    ** Fonts will be not smooth or fonts will be jugged in some browsers such as IE. Also fonts are not clear some times (Some fonts). You have to use CSS shadows ..etc to fix this.

  • You can use your own web-fonts. Download font and convert it to .ttf, .svg, .eot and .woff and call them in CSS with @font-face

  • You don't have to buy them if you are using like above example. But you will have to buy the font if it is commercial.

** You can use cufon.js too.

madhushankarox
  • 1,448
  • 1
  • 13
  • 17
  • so if you click on http://www.google.com/webfonts, you see a bunch of samples all in different fonts? all the samples are in the same font for me, for all my computers and browsers. wtf? – Dustin Getz Oct 01 '12 at 19:01