featured article

How to use custom fonts in your website?

Categories: CSS, Web design - Tags: , ,

It’s very common to use custom fonts in a web design. However, unfortunately, you would not expect all the website visitors have installed the custom fonts that you choose on their computers or mobile devices. If the browser could find the fonts the texts would be rendered using the default fonts. Thus, the custom fonts should be hosted at an accessible place to allow the visitors’ web browsers properly rendering the texts when loading the web pages. So people could see your complete design.

How to do? It’s very easy! Using font-face is a quick solution. Font-face is a CSS rule. (You may search for more information through the keyword ‘font-face’.)

First of all, you should get a licensed copy of the font file so you could use the fonts in your websites. For example, your site is ‘sample.com’ and the font name is ‘Custom Font’ and the font file is ‘CustomFont.otf’. You shall upload the font file to a place in your site, for example under the folder ‘/path-to-fonts/’, relative to the root directory of your website. In your CSS file, you should declare the font before using it, the code could look like the followings (there are more options, here I just show a simple example):


@font-face {
  font-family: "Custom Font";
  src: url(http://sample.com/path-to-fonts/CustomFont.otf);
}

Then you are able to use the custom fonts in your CSS, for example,


h1 {
  font-family: "Custom Font",Arial,Helvetica,sans-serif;
}

This is a simple way to implement custom fonts by hand coding. I would like to show you how to easily use custom fonts in WordPress and Drupal sites in later posts.

Steve
Profile - Website

Comments

No comments yet.

Write a comment

You must be logged in to write a comment.

« »