using custom font with css

Tutorial : How to Using Custom Font with CSS

For me, the font is crucial, imperative and font selection gives a challenge for me. To blog or website, you should use a font that is unique, different from other web. Its function is to increase the branding in the eyes of consumers. The company definitely has its own set of fonts. They usually hire a professional designer to create a special font for their company. Example: nokia has a unique font specifically for the brand.

And, these fonts are not distributed on the internet, only used for a brand that’s all. The fonts can be used for web or blog by modifying the CSS.

This time I want to show you, how to use custom fonts on your blog or website. Font file is located on our server, not on google fonts or other CDN.

Recomended : Best font for designer and Psychology of Font also 12 damn cool font ever

We will use font-face

Yes, first you have to put a font on your web directory, let’s say the fonts/your-font.ttf

@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu.light.ttf') format('truetype'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */     
}

Explanation:

  1. The font file name is : ubuntu.ligt.ttf and located on /fonts/
  2. format of font is : truetype. Its depends on your own font format.
  3. font-family is : Ubuntu, so you can use the Ubuntu in all CSS file.

Example of use

.article{
 font-family:Ubuntu, Arial;
 font-size : 12px;
}

 Advantages

By placing the font files on our own server, load the web faster because there is no access to another server i.e google fonts. It is useful for web-based offline application, where there is no access in and out, for example to google fonts. It also reduces the dependence on google fonts.

Another advantage, not all fonts available in the Google font, if not available there, then you have to put these fonts on your server. If you are using premium fonts, in this way is good idea, so the font still can be accessed.

Warning of premium fonts

Be careful with premium fonts. You have to protect the folder containing the fonts that can not be accessed, for example by creating an index.html file in that folder.

Web developer, big fan of CakePHP, loving wordpress soo much. You can found him on Google+ and Facebook. Dont forget to follow him on Twitter.
Posts created 562

2 thoughts on “Tutorial : How to Using Custom Font with CSS

  1. I’ve been using the V2 for her quadraplegic son are v2 cigs nicotine free as most ‘helpers’ don’t want to use extremely low-ohm coils.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top