---
title: "Use custom font in website"  
description: "Some time we faced problem related to font family on the user’s system.  Which font family we used for webpage during development time, not works anot"  
author: "AVADHESH PATEL"  
published: 2012-12-31  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/422/use-custom-font-in-website  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# Use custom font in website

Some time we faced [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) related to [font family](https://www.mindstick.com/forum/158669/how-can-change-the-font-family-of-a-text-using-css) on the user’s system. Which font family we used for webpage during [development](https://www.mindstick.com/articles/65309/importance-of-ux-design-in-the-development-of-mobile-apps) time, not works another system. Basically problem is that, that font not [install](https://www.mindstick.com/articles/12876/the-top-5-reasons-to-buy-and-install-a-tonneau-cover) on client system. This problem resolves by using @font-face rule of css.\

@font-face is a CSS rule which allows you to show a font on a [Web page](https://www.mindstick.com/forum/718/sql-server-report-alignment-to-center-of-web-page) even if that font is not installed on the users' computer. This means that designers and [developers](https://www.mindstick.com/blog/302688/handling-errors-in-rust-a-comprehensive-guide-for-developers) can begin moving away from Web-safe fonts that users have pre-installed on their computer such as Arial, Times New Roman, Calibri (Body), Traditional Arabic etc.

Best part of @font-face is we used special font for our whole webpage and using @font-face means we can "do away" with hiding titles and using numerous time-consuming images per title and instead have a single font file on the server and also saved time and bandwidth.

##### Example:

```
@font-face {  font-family: "CustomFont";  src: url("http://www.example.com/fonts/example");}h2 {  font-family: "CustomFont", sans-serif;}
```

There are some [limitations](https://www.mindstick.com/interview/121/what-are-the-benefits-and-limitations-of-using-hidden-fields) with @font-face. Some old [browser](https://www.mindstick.com/blog/155254/which-is-the-best-internet-browser) not [support](https://yourviews.mindstick.com/view/286/modi-support-for-sportsperson) @font-face.

---

Original Source: https://www.mindstick.com/blog/422/use-custom-font-in-website

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.