CSS Font-Face Rules

Font Face Rules is used to embed the font in your style sheet. Normally you can use the font for your web page in two different ways internally and externally. Internally means you can keep the font in your font folder location and use it on your web page. An External Font means you get the font from the font library like Google Fonts simply add the link tag to the web page and you can use that font family in your web page. For External you just copy the import link from the font library and past it on your style sheet or you can copy the link and add it to the link tag in the head section of HTML page.

Below you see the font-face rule on how to create the link to the font for an internal location. Below style is used for all kinds of browsers its support Chrome, Edge, Firefox, Safari, Opera, IOS, Android, etc.,

@font-face {
  font-family: 'FontName';
  src: url('FontName.eot'); /* IE9 Compat Modes */
  src: url(' FontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url(' FontName.woff') format('woff'), /* Modern Browsers */
       url(' FontName.ttf')  format('truetype'), /* Safari, Android, iOS */
       url(' FontName.svg#svgFontName') format('svg'); /* Legacy iOS */
}

How to call the font style in your style sheet.

font-face:’fontname’,sans-serif;

This below style is used for all latest update version browser.

@font-face {
  font-family: 'FontName';
  src: url('FontName.woff') format('woff'), /*For  Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('FontName.ttf') format('truetype'); /*For  Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}