CSS Custom Fonts

Even though standard browsers can render a plethora of fonts, you may sometimes need to present information with some custom font. Logos, for example, or even headings might fit your design better if you customize them. An alternative would be to use images -- but that's not quite sane from an SEO perspective. 

Fortunately, you can use CSS to embed custom, downloadable fonts in your website. You would first have to define your style. Place this code in your CSS stylesheet:

CSS code:

@font-face {
	font-family: my_great_font;
	src: url('/path/to/my_great_font.ttf');
} 

Use this afterwards like a normal CSS font-family declaration:

HTML code:

Doesn't my CSS custom font look great?

my_great_font.ttf in the above example can be referenced with either an absolute or a relative path.

Share

Learn how to design amazing websites