Welcome Guest! (App Version 3.1)

websitnero logo name

Custom Web Fonts


  • @font-face is used to add custom fonts to your website.
  • The font file that is attached can be in any of the following formats: .ttf, .otf, .woff or .eot.

Adding your own custom web fonts to HTML Elements

@font-face simply helps in adding any custom font to your website, and whether or not the end client computer has that font, your font will still be visible to him, as now the browser will search and download your custom web font rather than turning font of elements to defaults like Ariel, Times New Roman, etc..

Earlier, even if you change font-family of certain element, the browser would only show the element font in the specified family, if browser had that font installed. No additional effort was made to search or download the font, and show the user text in only font that was mentioned. Also, there was no certain method to force client computer to do so. But, now @font-face solves this problem.


  font-family: 'customFont';
  src:url('customFont.ttf') format('truetype');

  <p class="p1">This is normal font.</p>
  <p class="p2">This is custom font.</p>


This is normal font.

This is custom font.

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.