Cyrillic fonts collections

Fonts those supports Mongolian texts. made by: Gerelt-Od.G [email protected]

by Gereltod Gotsbayar

HTML

<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Play&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Jura&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Nunito&v1' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&subset=cyrillic,latin&v1' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&v2' rel='stylesheet' type='text/css'>

<div id="welcome-msg">Hi, its my personal font collections. You can hide some ugly one and compare most beautiful ones. Include them on your site free.<br /> If you need some other features or have font suggestions mail me at <a href="mailto:[email protected]">[email protected]</a></div>

<div id="changefont">
    Title:  <input type="text" class="size120" id="h2text" />
    Body: <input type="text" class="size200" id="ptext" />
    <input type="button" value="change" id="submittext" />
</div>
<div class="font"> 
    <span class="fontname">Arial</span>
    <h2 class="arial">Эмээ өвөө будаа гурав сүүтэй бясаа чанажээ</h2> 
    <p class="arial">Ноход бидний юу бодож байгааг мэддэг аж. Олон жилийн турш биологичид хүний дөрвөн хөлтэй найзыг судалсны дүнд ийм дүгнэлтэд хүрчээ. Флоридагийн их сургуулийнхан хүн төрөл төрөгсдөөсөө илүү...

CSS

.arial {font-family: Arial, serif;}
.tahoma {font-family: Tahoma, serif;}
.cuprum {font-family: 'Cuprum', arial, serif;}
.pt {font-family: 'PT Sans Narrow', arial, serif;}
.ubuntu {font-family: 'Ubuntu', arial, serif;}
.play {font-family: 'Play', arial, serif;}
.jura {font-family: 'Jura', arial, serif;}
.nunito {font-family: 'Nunito', arial, serif;}
.opensans {font-family: 'Open Sans Condensed', arial, serif;}
.forum {font-family: 'Forum', serif;}
.lobster {font-family: 'Lobster', cursive;}
.opensanscondensed {font-family: 'Open Sans Condensed', sans-serif;}
h2 {text-shadow: 2px 2px 2px #aaa; color: #222; font-size: 20px; margin-bottom: 10px; }
p {font-size: 16px; line-height: 22px; color: #333; text-align: justify}
div.font {margin: 5px 15px 15px 5px; border: 1px solid #aaa; padding: 10px; position: relative; background-color: #fff}
body {padding: 15px 40px;}
.fontname {position: absolute; top: 0px; right: 0px; padding: 3px 10px; background-color: #222; color: #eee; text-align:center; display: none; margin-top: 5px; font-family: 'consolas', 'monaco', 'arial'}
.close {position: absolute; top: 0px; right: -24px; width: 20px; padding: 3px 2px; margin-top: 5px; background-color: #222; text-align: center; font-family: 'consolas', 'monaco', 'arial'; color: #f44;}
#welcome-msg {text-align: center; text-shadow: 2px 2px 2px #888; color: #333; font: normal 14px/22px Consolas, Arial; padding: 5px 15px; margin-bottom: 35px;}
#welcome-msg a {text-decoration: none; color: #d22;}
#changefont: {font: normal 12px Arial; padding: 15px; border-bottom: 2px solid #222; text-align: center; margin-bottom: 15px; display: block}
input {font: normal 13px Arial; padding: 2px 5px; border: 1px solid #ccc; margin: 0px 10px}
input.size120 {width: 120px;}
input.size200 {width: 200px;}
body {background: url(http://tympanus.net/Tutorials/ImageWall/images/pinstripe.gif) top left repeat}

JavaScript

$("div.font").hover(function() {
    $(this).css('border-color', '#bbb');
    $(this).css('background-color', '#eee');
    $(this).find(".fontname").fadeIn('fast');
}, function() {
    $(this).css('border-color', '#aaa');
    $(this).css('background-color', '#fff');
    $(this).find(".fontname").fadeOut('normal');
});
$("div.font").append("<span class='close'>X</span>");
$(".close").click(function() {
    $(this).parent("div").fadeOut('normal');
});
$(".close").hover(function() {
    $(this).css('cursor', 'pointer');
});
$("#submittext").click(function() {
    if (($("#h2text").val()) != ""
    &&($("#ptext").val() != "")) {
        $(".font h2").html($("#h2text").val());
        $(".font p").html($("#ptext").val());
        $(this).css('border-color', '#ccc');
    } else {
        $(this).css('border-color', '#f00');
    }
});