Hi Everyone,

 

I am currently doing a website and the standard websafe fonts just won't do, and i also wouldn't like to put images in instead because i would like some text to show in google search.

 

I understand there are things like @font-face, FILR, sIFR, i have found tutorials on how to put these in but they seem dated, is there any new way to put any font into your website?

 

I have found typeface.js aswell but alot of them seem to be unstable in certain browsers, can anyone reccommend one to use?

 

Thanks in advance for any help

 

Aj

Personally i use @font-face, it works in most browsers and for those that it doesnt work in just reverts back to standard fonts.

 

/*** Load the font */

@font-face {
font-family: ProximaNova;
src: url('/fonts/ProximaNova-Light.otf');
}

/*** add font-family: ProximaNova; where you want the font to show */

h1 {
   font-family: ProximaNova,verdana,sans-serif;
}

@font-face was dated because it only worked on IE, but now it has been officially made part of CSS3 options and other major browers support it, so it's now better than the complicated javascript and Flash methods, in my view.

Cufon

There are a variety of methods: sifr, text replacement and of course - @font-face in compliant browsers.

 

Bear in mind, however, that it is illegal to embed fonts without an appropriate license*.

Font Squirrel has a great selection of embeddable fonts - as well as some pre-packed webfont kits.

http://www.fontsquirrel.com/

 

* @gfx - if I'm not mistaken, ProximaNova is a commercial font and therefore not appropriate for embedding?

There are a variety of methods: sifr, text replacement and of course - @font-face in compliant browsers.

 

Bear in mind, however, that it is illegal to embed fonts without an appropriate license*.

Font Squirrel has a great selection of embeddable fonts - as well as some pre-packed webfont kits.

http://www.fontsquirrel.com/

 

* @gfx - if I'm not mistaken, ProximaNova is a commercial font and therefore not appropriate for embedding?

 

You can use commercial fonts as long as you have the license, and im not sure if you have to remove the opentype from the font too ? Theres sites out there where you can buy them in a format ready for @font-face, i used fontspring a while back.

DOH! My bad, you're right - I forgot about font-spring. @asp24 - my point is just that you can't embed whatever you like, you need to check the EULA for the specific font vendor.

Cufon

 

Once you've generated the javascript, do you just simply upload it to the root directoy (and adjust the css)?

I understand there are things like @font-face... but they seem dated, is there any new way to put any font into your website?

 

@font-face is the way to go!

 

It's quick, easy and semantic. It's a part of the most modern CSS white paper (CSS3) and will become the de facto standard.

 

Try using http://www.fontsquirrel.com/fontface/generator but remember you must have the rights to use the font

 

 

 

@font-face is the way to go!

 

Try using http://www.fontsquirrel.com/fontface/generator but remember you must have the rights to use the font

 

OK thanks. So i've used the generator and downloaded my zipped folder. How do I now implent this into my site?

OK thanks. So i've used the generator and downloaded my zipped folder. How do I now implent this into my site?

 

The ZIP should contain all the instructions and code needed as well as the files.

 

It's as simple as adding the CSS to yours and uploading the font files.

 

 

 

The ZIP should contain all the instructions and code needed as well as the files.

 

It's as simple as adding the CSS to yours and uploading the font files.

 

OK, thanks for your help dude! Merry Christmas!

No problems mate, have a good 'un!