Pages

Ads 468x60px

Wednesday, October 30, 2013

custom fonts with css (@face-fonts command)




Want to embed your own fonts in your site to give it style or auto-load custom fonts for some exotic language?You can do that using css with the @font-face command.

In your <b:skin><b:/skin> section add the following code.


<!--custom fonts-->
<style>
@font-face
{font-family: segoe script;
src:url('http://dl.dropboxusercontent.com/s/8sao0jcc1o6fjso/ufonts.com_segoe_script.ttf');}

p.segoe {
font-family:segoe script;
}
</style>
<!--end of custom fonts-->


Replace segoe script with the name of your font and the url in purple with your url with the custom font.Dropbox is a very good place to upload your custom font.Other hosts may give you hard time with the custom font not displaying correctly.
  
Next add this code whereever you want the text to appear in your custom font.

<p class='segoe'>your text here</p>

Now ,whenever you open a <p class='segoe'></p> tag in your posts your custom font will load automatically within your tag.

Here is what my custom font looks like:

Segoe script custom fonts!


Taking it further
The same goes for all other tags like h1,h2,b  and so on.Instead of p.segoe you can define a b.segoe or a h1.segoe and call it with class='segoe'>

You can even create your tags.For example in this page of mine,I wanted to preload fonts for the coptic language so that the visitor does not have to install them on his/her computer.

So I came up with the <cpt> </cpt>.You can use any name you like for tag ,just make sure it does not exist already in html or the language you are coding in.

Then the code will look like this

<style>
@font-face
{font-family: name of your font;
src: url(http://mycopticfonturl.ttf);}

cpt {
font-family:name of my coptic font, Helvetica, Arial, sans-serif;
}
</style>

Now whenever I want to auto-load coptic text in my post I just put it between my new made cpt tags

<cpt>your text</cpt>


No comments:

Post a Comment

 

Sample text

Sample Text