Adding custom fonts to your website or blog using CSS.

There are a few ways to include fonts to your website using CSS. One of the easiest ways of doing this, is with Google fonts. It allows you to create custom fonts for your site. However, if you want to use some fonts that are not available on Google’s repository, you still have to follow the method described below in the code section.

Look through many font categories. As soon as you find the font that you want to use on your site, you will see a small button that if you hover on it, is labeled “Quick use”.

When you go to the following page you will probably have to scroll a down a little bit to find the actual instructions that allow you to use the font that you have chosen. You will see there, two snippets of code.
The first one needs to be added to the header area of your website. When you scroll down further, there’s a description on how to use the same font as the CSS style.

With CSS you can use custom fonts on your website or blog. Historically, your visitors have only been able to see the fonts that are already installed on their own computers. So, if the web developer uses a font that is not installed on their computer then their browser would show some other font that is installed on the computer. That’s why when you are defining a font for a CSS element (like h1, p, etc) developers specify multiple fonts so, if your preferred font is not available, your CSS file should use the other available alternatives.

But, there’s a way in CSS that allows you utilize custom, downloadable fonts on your website or blog. You can download the actual font of your choise, let’s say new_font.ttf, and upload it to your server where your website host.

Then, in your CSS file you have to refer to that custom font this way:

@font-face {
font-family: new_font;
src: url('new_font.ttf');

So, now you can use that font just like you do with any other CSS font declaration:

font-family: new_font;

Doing this, allows you to use as many fonts as you would like on your website. Watch out, however, your site load time could be hurt a little bit.