Step #1 : Download the font

Find the custom font that you want to add to your website and download it. The file extension should be either .ttf or .svg or .otf.

Find fonts you can download for free at: fonts2u, fontpro

Step #2 : Generate formats for cross-browsing

Different browsers support different font formats, to add a custom font to a website and to have it correctly displayed on every browser, you have to generate several formats for your font.

For example:

Internet Explorer (all versions) – .EOT;

Safari (3.2+) – .TTF / .OTF;

iPhone (3.1) – .SVG;

Chrome (all versions) – .SVG (.TTF/.OTF added 25th Jan 2010);

Firefox (3.5+) – .TTF/.OTF (.WOFF added 3.6);

Opera (10+) – .TTF/.OTF.

To get all the file extensions, we can use Font Face generator.

Link: Font Face Generator

Step #3 : Upload font files on your website

After generating all files using FTP or file manager to upload all fonts on your website; inside the styling folder /css, create a folder and name it fonts.

Step #4 : Add your custom font files into CSS

To add custom fonts to the website using @font-face at-rule (one @font-face for each font family), just add the following code at the top of the main styling page, or whichever css file that will use the font-face, usually it is saved as style.css

The code has src attribute and its two values, the url which accepts a local path to the font file and the second value is the format which accepts the extension of the file, e.g format(“svg”).

@font-face {

font-family: “Harabara Bold”;

src: url(“css/fonts/Harabara.eot”); // the local path to the font

src:

url(“css/fonts/Harabara.woff”) format(“woff”),

url(“css/fonts/Harabara.otf”) format(“opentype”),

url(“css/fonts/Harabara.svg#filename”) format(“svg”);

}

Step #5 : Start working

Now the custom font is added to the website and ready to be used like so :

h1 {

font-family: ‘Harabara Bold’; // like this

font-weight:normal;

font-style:normal;

}

We are done with @font-face, but if you wonder what’s the deal with the @ at the beginning of the word ‘font-face’ – read on.

The @ is there because @font-face is a CSS at-rule.

An at-rule is a CSS statement beginning with an at sign, ‘@‘ (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semi-colon, ‘;‘ (U+003B SEMICOLON), or the next CSS block, whichever comes first.

@charset — Defines the character set used by the style sheet.

@import — Tells the CSS engine to include an external style sheet.

@namespace — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.

Nested at-rules

@media — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.

@supports — A conditional group rule that will apply its content if the browser meets the criteria of the given condition.

@document — A conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. (deferred to Level 4 of CSS Spec)

@page — Describes the aspect of layout changes that will be applied when printing the document.

@font-face — Describes the aspect of an external font to be downloaded.

@keyframes — Describes the aspect of intermediate steps in a CSS animation sequence.

@viewport — Describes the aspects of the viewport for small screen devices. (currently at the Working Draft stage)

@counter-style — Defines specific counter styles that are not part of the predefined set of styles. (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)

@font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant)
— Define common names in font-variant-alternates for feature activated differently in OpenType. (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)