Monday, June 18, 2012
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".

15 comments:

  1. Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: http://www.dwor.pl/pl/klienci_biznesowi/spotkania_wigilijne/ and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog

    ReplyDelete
  2. Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: http://www.dwor.pl/pl/klienci_biznesowi/spotkania_wigilijne/ and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog

    ReplyDelete
  3. Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: http://www.dwor.pl/pl/klienci_biznesowi/spotkania_wigilijne/ and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog

    ReplyDelete
  4. Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: http://www.dwor.pl/pl/klienci_biznesowi/spotkania_wigilijne/ and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog

    ReplyDelete
  5. Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: http://www.dwor.pl/pl/klienci_biznesowi/spotkania_wigilijne/ and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog

    ReplyDelete
  6. Thank you! Canva revolutionised my work. I work as a PR & marketing manager in hospitality and I don’t have a big marketing budget, so Canva is perfect for me. 1$ for picture is not so much but I can create some nice offers for our clients. Here you have an example of my work: http://www.dwor.pl/pl/klienci_biznesowi/spotkania_wigilijne/ and it was only for 2 $ It’s a nice alternative for Shutterstock etc. Fonts are beautiful, it is very creative thinking to learn how to mix them. I use it also on my personal blog

    ReplyDelete
  7. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  8. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  9. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  10. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  11. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  12. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  13. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  14. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    ReplyDelete
  15. 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