0

I have seen many websites using different fonts which are not in my computer but they are shown in my browser. The source for these pages includes the following script:

http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js

What is this script? Is it safe to use such web fonts?

gcbenison
  • 11,723
  • 4
  • 44
  • 82
Zafta
  • 655
  • 1
  • 10
  • 26
  • possible duplicate of [How to add some non-standard font to a website?](http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-a-website) – Jukka K. Korpela Jun 11 '13 at 10:23

3 Answers3

4

The CSS @font-face rule makes this happen. However, there are some considerations:

  1. Since not all browsers understand the same font format, you have to specify different formats for your font. Most licenced fronts provide a web version, which is a "combo" zip file including the CSS and the font files for the different formats. You can also generate your "combo" file with fontsquirrel's webfont generator simply by uploading your font file.

  2. Not all browsers can generate bold or italic versions of all the fonts so it is a good choice to use font's that provide bold and italic versions.

  3. The fonts won't render exactly the same in all browsers and operating systems. You will find small differences especially regarding anti-aliasing, letter width and shadow effects.

  4. If you want perfect rendering of the font (photoshop like), you can't use font-face. You have to use a more complicated approach called cufón, which is a javascript based method for rendering fonts, and much more complicated than the font-face approach (IMHO).

This is an example code:

@font-face {
  /*This loads the font file into a new font family value */
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot'); /* IE9 */
}

DIV { font-family: myFirstFont; }
jacmkno
  • 1,189
  • 11
  • 25
3

Yeah the webfont loader is perfectly safe...and is just a Javascript alternative to webfonts that offers more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers.

I still do this the old way...:) Which I've listed below...

Where you would go download the font you want at google... http://www.google.com/fonts/

Then you just add it to your site like so...(example font Im using is 'Balthazar')

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

Or just a CSS @import into your CSS file, like this...either way works..

@import url(http://fonts.googleapis.com/css?family=Balthazar);

Then you access it in your CSS like so....

font-family: 'Balthazar', serif;
Kylie
  • 11,421
  • 11
  • 47
  • 78
3

You can use the font-face technique too. Like I was searching high and low for the Bebas Nueu Regular font. I got it loaded with font-face. Do this: Download the font-face kit...example (Font-Squirrel) - http://www.fontsquirrel.com/fonts/bebas-neue

Upload the files to the website's server.

CSS

@font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
     url('BebasNeue-webfont.woff') format('woff'),
     url('BebasNeue-webfont.ttf') format('truetype'),
     url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;

}

Make sure the directory paths point to the uploaded files on your server.

Use the font-family: 'BebasNeueRegular'; where you want the font to render.

Hope that helps.

toolbox3
  • 116
  • 9