How To Use @font-face

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.

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.

 

Nested at-rules

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)

@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)

 

15 Comments

  1. 720p December 19, 2020 at 5:31 pm

    Pretty! This has been an extremely wonderful article. Thank you for supplying this information. Clementine Hale Dorman

  2. yabanci December 19, 2020 at 8:35 pm

    I like it when folks get together and share thoughts. Great website, keep it up. Ansley Morie Baker

  3. 720p December 19, 2020 at 10:21 pm

    If you wish for to get much from this article then you have to apply these methods to your won webpage. Nichol Taber Sella

  4. altyazili December 19, 2020 at 11:48 pm

    We came across a cool internet site that you just may enjoy. Take a appear should you want. Dyanna Filberte Gabriel

  5. yabanci December 20, 2020 at 1:07 am

    Some truly interesting details you have written. Aided me a lot, just what I was searching for :D. Aridatha Neron Reedy

  6. sikis izle December 20, 2020 at 3:35 am

    Download this e-guide to be taught methods that can make your deal with coaching more effective. Roda Wallas Angelis

  7. bedava December 20, 2020 at 5:11 am

    Say, you got a nice article post. Really thank you! Want more. Brynna Towney Durham

  8. download December 23, 2020 at 6:36 am

    I visited several web sites however the audio feature for audio songs present at this web site is in fact wonderful. Laverna Rayner Ames

  9. torrent December 23, 2020 at 8:29 am

    Really informative blog article. Really looking forward to read more. Really Great. Gilbertina Culley Lai

  10. ucretsiz December 23, 2020 at 10:14 am

    Wow! In the end I got a web site from where I be able to genuinely take valuable facts regarding my study and knowledge. Mireielle Gawen Fablan

  11. yify December 23, 2020 at 11:48 am

    This article is genuinely a good one it helps new web people, who are wishing in favor of blogging. Elvira Hubie Konstance

  12. bedava December 24, 2020 at 3:54 am

    There is certainly a great deal to learn about this issue. I love all of the points you made. Madge Nikki Bea

  13. web-dl January 11, 2021 at 10:00 pm

    What a data of un-ambiguity and preserveness of valuable know-how concerning unpredicted feelings. Mozelle Otis Woodhouse

Leave a comment

Your email address will not be published. Required fields are marked *