How to Use Custom Fonts in CSS Using @font-face

Affiliate disclosure: In full transparency – some of the links on our website are affiliate links, if you use them to make a purchase we will earn a commission at no additional cost for you (none whatsoever!).

For improving typography and readability of your blog or website, you always need a good combination of fonts which look great together. You can use custom fonts in CSS using @font-face in the Cascading style-sheet of your blog. Using Custom Fonts in CSS helps improve design. Along-with Design, your readers can enjoy better readability and better exposure of letters on your blog or website.

There are lot of methods to embed custom fonts on your website, but the one I am going to feature here, is the most easiest and effective way to use custom fonts in CSS. It doesn’t require knowledge though if you are pretty much flavored with CSS, then it will be helpful. So, lets get started with the tutorial.

How to Use Custom Fonts in CSS Using @font-face

Custom Fonts in CSS @font-face

So, lets prepare and discuss on tutorial. You will be needing access to FTP of your blog, and also you must have the font in True Type Format ( .ttf file ). Along-with this, you can use your favorite text editor to edit the Style-sheet file of your website or blog.

How to Use Custom Fonts in CSS Using @font-face

So, open your blogs theme directory or the directory where the CSS file is kept. Open the CSS file and add the following @font-face definition to the top of your CSS file. It defines your blog that you will be using CSS3 @font-face rule to use external font in true type format.

@font-face {

font-family: 'font-name';

src: url('url-to-font-ttf');

You have to put the name of the font in the place of font-name and you have to put the font on your Blog’s FTP and put the URL in the URL to font ttf place. the tutorial is almost over, yes, its that simple.

How to Use Custom Fonts in CSS Using @font-face

And now, you can use font-family : ‘font-name’ where desired to use the font on any part of your blog. You can also use multiple external fonts similarly.

Elisabeth Ness

Hi there! I am Elisabeth, the author of this website. I am a Professional Web Designer and have been active in this field for more than 8 years. The primary motivation behind my writing is to help you find answers to all your queries in one spot. On my blog, Havas Digital Server, you will come across such data that is put upon after in-depth research.

This site will soon be redirected to