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.
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.
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.
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.
