First of all, please note that both the terms <@font-face> and <font-family> refers to changing the font of an HTML element. However, there is a slight difference between the two.

☛ The <@font-face> is a CSS rule that facilitates the use of custom fonts on a web page.

☛ The <font-family> is a CSS property which specifies the font for a web element.

Also, to change the font or face of a font, we need to set the <font-family> property. Please see the below example.

@font-face {

font-family: myCustomFont;

src: url(sansation_light.woff);

}

body {

font-family: 'myCustomFont', Fallback, Ariel;

}