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.
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.
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-family: “Harabara Bold”;
src: url(“css/fonts/Harabara.eot”); // the local path to the font
Step #5 : Start working
Now the custom font is added to the website and ready to be used like so :
font-family: ‘Harabara Bold’; // like this
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.
There are several at-rules, designated by their identifiers, each with a different syntax:
@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.
A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group 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)
— 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)