Website Custom Font

With a short code of Css3 you can now adopt just any font you like for your website. In short, all what you have to do is just to put a font file somewhere on the net and then call it to your website by using Css3 code to get your website loads the font. The property used to call the font here is @font-face property. Let's discuss about "How to make it" more detailed.

First (after you uploaded your own font file of course), you must define a name for the font, any name (e.g. BlogFont), and then create a Css code and point it to the font file you upload. And for Html element, you can refer to the name of the font (BlogFont) through the font-family property. - And, that you must also add a bold version of the font to use when needed. - Here is a pattern:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family:BlogFont; src: url('http://j-smith-site.blogspot.com/font/blogger-font.ttf'), url('http://j-smith-site.blogspot.com/font/blogger-font.eot');
/* IE9+ */
}
@font-face {
font-family: BlogFont; src: url('http://j-smith-site.blogspot.com/font/blogger-font-bold.ttf'), url('http://j-smith-site.blogspot.com/font/blogger-font-bold.eot');
/* IE9+ */
font-weight:bold;
}

div {
font-family:BlogFont;
}
</style>
</head>
<body>

<div>

Example: Using custom font instead of the pre-selected font by the provider.

</div>

</body>
</html>

Note: Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and .otf (Open Type Fonts). Internet Explorer 9+ supports the new @font-face rule but only supports fonts of type .eot (Embedded Open Type), that's why i put the "url('http://j-smith-site.blogspot.com/font/blogger-font-bold.eot'); /* IE9+ */" on the example above. while Internet Explorer 8 or earlier versions do not support the new @font-face rule.

Here is a list of all the font descriptors that you can use to style the font.

font-family: Defines the name for the font.
src: Defines the URL of the font file.
font-stretch: Defines how the font should be stretched. The values are normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded. The default is "normal".
font-style: Defines how the font should be styled. The values are normal, italic, oblique. The default is "normal".
font-weight: Defines the boldness of the font. The values are bold, 100, 200, 300, 400, 500, 600, 700, 800, 900. The default is "normal".
unicode-range: Defines the range of UNICODE characters the font supports. The values are unicode-range. The default is "U+0-10FFFF".
at Monday, June 18, 2012

1 comments:

  1. pslvseo a412/08/2018

    Dafont.com is a site where you can download a ton of free fonts. You can search for a specific typeface, or search by the type of lettering you want, whether it’s serif or sans serif, hand lettered or grunge style. You can also put in your own phrase to see how it looks in a particular font. A lot of these fonts are very decorative and many are handdrawn, so it’s not always the best place to search for body text fonts. Each selection also tells you whether your download is free for personal or commercial use. The download is easy – you get a zip file with the font file inside. Unzip, install, and you’re ready to go.

    ReplyDelete