How to use custom fonts in a website

[Ralph]

In some Mybb templates there are menus/titles with custom fonts (like in my Just Talk Theme)
if you think that is cool and you want to implement that on your site or in your template here's how

1st Step Choosing the Font.
go to your favorite free font site and download the font you would like to use on your website.

2nd Step Converting the font.
After downloading your font extract the zip to any location
go to http://www.fontsquirrel.com/fontface/generator
and click add, choose one of the downloaded font files, wait for it to upload then click on download your kit.

3nd Step Implementing Font in CSS.
Ok so you have downloaded your font kit, reupload it to your server or copy it to your desired location such as

Code:

http://website.com/font

After extracting go to the extraction directory and rename stylesheet.css to font.css
after your done go to your site's css file and add at the very top:

Code:

@import url('directoryhere/font.css');

Hit save and your good to go


4th Step Using the font.
Go to the font.css file enter it and see the name of your font such as

Code:

font-family: 'CuprumFFURegular';

now copy that and go to your main css
choose in which div, class or whatever you want to use this font and insert it there example:

Code:

body{
      bakground: #ffffff;
      font-family: 'CuprumFFURegular';
}

inserting it in the body will make all the text use this font

Anyways those were the basics if you need any more assistance please post here

Note: Don't use license protected fonts as they are blocked by the generator. Even you find a way to bypass it you might still get sued.

[Detrition]

Awesome, I always wanted to learn this. Thanks.

[Ralph]

(03-05-2012 01:46 PM)Peter L Wrote:  Awesome, I always wanted to learn this. Thanks.

Your welcome, why don't you try to use a font here like for the top navigation menu.

[jung3o]

The thing is that you never want to use @import in css unless you dont want to support older browsers. I also recommend using Google Webfonts because they are made for websites.

[Ralph]

(03-06-2012 01:01 AM)jung3o Wrote:  The thing is that you never want to use @import in css unless you dont want to support older browsers. I also recommend using Google Webfonts because they are made for websites.

why don't you want to use that, it seems to work well on all browsers.

[jung3o]

(03-06-2012 02:21 AM)Ralph Wrote:  

(03-06-2012 01:01 AM)jung3o Wrote:  The thing is that you never want to use @import in css unless you dont want to support older browsers. I also recommend using Google Webfonts because they are made for websites.

why don't you want to use that, it seems to work well on all browsers.

ff4 doesn't support it, and i dont think ie 7 doesnt support it. maybe ie8

[Ralph]

(03-06-2012 02:38 AM)jung3o Wrote:  

(03-06-2012 02:21 AM)Ralph Wrote:  

(03-06-2012 01:01 AM)jung3o Wrote:  The thing is that you never want to use @import in css unless you dont want to support older browsers. I also recommend using Google Webfonts because they are made for websites.

why don't you want to use that, it seems to work well on all browsers.

ff4 doesn't support it, and i dont think ie 7 doesnt support it. maybe ie8

Well I did some research and found out that these browsers support it as long as it is on the very top of the main css file and as long as it's just a couple of lines it doesn't affect speed much.