smc-webfonts

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="noindex, noarchive"> <title>SMC Malayalam Webfonts</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href="smc-webfonts.min.css" rel="stylesheet"> <link href="styles/reset.min.css" rel="stylesheet"> <link href="styles/style.min.css" rel="stylesheet"> </head> <body> <h1> <span>SMC Malayalam Webfonts</span> <div id="switcher-container"> <div id="open-switcher"><a href="javascript:;">Change Font</a></div> <div id="switcher"> <div title="Close" id="close-switcher">X</div> </div> </div> <div class="sharethis-inline-share-buttons" style="display:inline-block;float:right;margin:0 10px;"></div>  <div id="bookmarklet">Bookmarklet to preview on your site: <a href="javascript:%22use%20strict%22%3Bvar%20_slicedToArray%3Dfunction()%7Bfunction%20t(t%2Ce)%7Bvar%20n%3D%5B%5D%2Ca%3D!0%2Co%3D!1%2Cl%3Dvoid%200%3Btry%7Bfor(var%20i%2Cr%3Dt%5BSymbol.iterator%5D()%3B!(a%3D(i%3Dr.next()).done)%26%26(n.push(i.value)%2C!e%7C%7Cn.length!%3D%3De)%3Ba%3D!0)%3B%7Dcatch(t)%7Bo%3D!0%2Cl%3Dt%7Dfinally%7Btry%7B!a%26%26r.return%26%26r.return()%7Dfinally%7Bif(o)throw%20l%7D%7Dreturn%20n%7Dreturn%20function(e%2Cn)%7Bif(Array.isArray(e))return%20e%3Bif(Symbol.iterator%20in%20Object(e))return%20t(e%2Cn)%3Bthrow%20new%20TypeError(%22Invalid%20attempt%20to%20destructure%20non-iterable%20instance%22)%7D%7D()%2Cfonts%3Dfunction()%7Bvar%20t%3D%5B%7BfontFamily%3A%22Meera%22%2CfontWeight%3A%22normal%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22meera%22%2CjsFiddleId%3A%22v4vyxLju%22%7D%2C%7BfontFamily%3A%22Rachana%22%2CfontWeight%3A%22normal%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22rachana%22%2CjsFiddleId%3A%22mapzaymx%22%7D%2C%7BfontFamily%3A%22Dyuthi%22%2CfontWeight%3A%22normal%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22dyuthi%22%2CjsFiddleId%3A%221c791dfe%22%7D%2C%7BfontFamily%3A%22RaghuMalayalam%22%2CfontWeight%3A%22normal%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22raghumalayalam%22%2CjsFiddleId%3A%22f1L1jy2z%22%7D%2C%7BfontFamily%3A%22Chilanka%22%2CfontWeight%3A%22normal%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22chilanka%22%2CjsFiddleId%3A%22tp2m8L9p%22%7D%2C%7BfontFamily%3A%22Keraleeyam%22%2CfontWeight%3A%22bold%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22keraleeyam%22%2CjsFiddleId%3A%22a6uqj4eL%22%7D%2C%7BfontFamily%3A%22Manjari%22%2CfontWeight%3A%22normal%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22manjari%22%2CjsFiddleId%3A%22133d3ajo%22%7D%2C%7BfontFamily%3A%22Manjari%22%2CfontWeight%3A100%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22manjari%22%2CjsFiddleId%3A%22h4mmru5e%22%7D%2C%7BfontFamily%3A%22Suruma%22%2CfontWeight%3A500%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22suruma%22%2CjsFiddleId%3A%22Lv8dchff%22%7D%2C%7BfontFamily%3A%22Rachana%22%2CfontWeight%3A%22bold%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22rachana%22%2CjsFiddleId%3A%221f7nxt16%22%7D%2C%7BfontFamily%3A%22Uroob%22%2CfontWeight%3A%22bold%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22uroob%22%2CjsFiddleId%3A%22pLq5qz9j%22%7D%2C%7BfontFamily%3A%22Karumbi%22%2CfontWeight%3A%22normal%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22karumbi%22%2CjsFiddleId%3A%227d3okgq9%22%7D%2C%7BfontFamily%3A%22AnjaliOldLipi%22%2CfontWeight%3A%22normal%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22anjali%22%2CjsFiddleId%3A%229ajq9cun%22%7D%2C%7BfontFamily%3A%22Manjari%22%2CfontWeight%3A%22bold%22%2CfontStyle%3A%22normal%22%2CcssFileName%3A%22manjari%22%2CjsFiddleId%3A%223c3vuuz6%22%7D%5D%3Breturn%22undefined%22%3D%3Dtypeof%20firstBy%26%26(firstBy%3Dfunction()%7Breturn%7BthenBy%3Afunction()%7Breturn%200%7D%7D%7D)%2Ct.sort(firstBy(%22fontFamily%22).thenBy(%22fontWeight%22)).map(function(t)%7Bvar%20e%3Dt.fontFamily%2B%22%20(%22%2Bt.fontWeight%2B%22)%22%3Breturn%7Bname%3Ae%2CdisplayName%3Ae.replace(%2F%5Cs%5C(normal%5C)%2F%2C%22%22)%2CurlReadyName%3Ae.toLowerCase().replace(%2F%5B()%5D%2Fg%2C%22%22).replace(%2F%5Cs%2Fg%2C%22-%22)%2Cfont%3At%7D%7D)%7D()%2CsetFonts%3Dfunction()%7Breturn%20function(t)%7Bif(t)%7Bvar%20e%3Dt.split(%22%20%22)%2Cn%3D_slicedToArray(e%2C2)%2Ca%3Dn%5B0%5D%2Co%3Dn%5B1%5D%2Cl%3Dvoid%200%3D%3D%3Do%3F%22normal%22%3Ao%2Ci%3Dfonts.filter(function(t)%7Breturn%20t.font.fontFamily%3D%3D%3Da%26%26t.font.fontWeight.toString()%3D%3D%3Dl%7D)%3Bif(1!%3D%3Di.length)return%20alert(%22Incorrect%20font%20name!%22)%3Bvar%20r%3Di%5B0%5D%2Cm%3Ddocument.getElementsByTagName(%22head%22)%5B0%5D%2Cf%3Ddocument.createElement(%22link%22)%3Bf.setAttribute(%22rel%22%2C%22stylesheet%22)%2Cf.setAttribute(%22type%22%2C%22text%2Fcss%22)%2Cf.href%3D%22%2F%2Fcdn.jsdelivr.net%2Fsmc-webfonts%2Flatest%2Ffonts%2F%22%2Br.font.cssFileName%2B%22.min.css%22%2Cm.appendChild(f)%3B!function(t%2Ce%2Cn)%7B%22undefined%22%3D%3Dtypeof%20getComputedStyle%26%26(getComputedStyle%3Dfunction(t)%7Breturn%20t.currentStyle%7D)%3Bfor(var%20a%3Dvoid%200%2Co%3Dvoid%200%2Cl%3Dvoid%200%2Ci%3D%7B%7D%2Cr%3Ddocument.body.getElementsByTagName(%22*%22)%2Cm%3Dr.length%2Cf%3D0%3Bf%3Cm%3Bf%2B%2B)o%3Dr%5Bf%5D%2Co.style%26%26(l%3D%22%23%22%2B(o.id%7C%7Co.nodeName%2B%22(%22%2Bf%2B%22)%22)%2C(a%3Do.style.fontFamily%7C%7CgetComputedStyle(o%2C%22%22)%5Bt%5D)%26%26-1%3D%3D%3Da.indexOf(%22FontAwesome%22)%26%26-1%3D%3D%3Da.indexOf(e)%26%26(o.style.fontFamily%3De%2B%22%2C%22%2Ba%2Co.style.fontWeight%3Dn%2Ci%5Ba%5D%7C%7C(i%5Ba%5D%3D%5B%5D)%2Ci%5Ba%5D.push(l)))%7D(%22fontFamily%22%2Cr.font.fontFamily%2Cr.font.fontWeight)%7D%7D%7D()%2CfontNames%3Dfonts.map(function(t)%7Breturn%22%5Ct%22%2Bt.displayName.replace(%2F%5B()%5D%2Fg%2C%22%22)%7D).sort()%3BsetFonts(prompt(%22Type%20in%20the%20exact%20font%20name%20and%20style%20from%20the%20below%20list%3A%5Cn%5Cn(for%20example%3A%20'Manjari%20bold')%5Cn%5Cn%22%2BfontNames.join(%22%5Cn%22)))%2Cfunction(t%2Ce%2Cn%2Ca%2Co%2Cl%2Ci)%7Bt.GoogleAnalyticsObject%3Do%2Ct%5Bo%5D%3Dt%5Bo%5D%7C%7Cfunction()%7B(t%5Bo%5D.q%3Dt%5Bo%5D.q%7C%7C%5B%5D).push(arguments)%7D%2Ct%5Bo%5D.l%3D1*new%20Date%2Cl%3De.createElement(n)%2Ci%3De.getElementsByTagName(n)%5B0%5D%2Cl.async%3D1%2Cl.src%3D%22https%3A%2F%2Fwww.google-analytics.com%2Fanalytics.js%22%2Ci.parentNode.insertBefore(l%2Ci)%7D(window%2Cdocument%2C%22script%22%2C0%2C%22ga%22)%2Cga(%22create%22%2C%22UA-4869398-10%22%2C%22auto%22)%2Cga(%22send%22%2C%22pageview%22)%3B">SMC-Fontify</a></div>  <div class="github"> <a title="Fork me on GitHub" href="https://github.com/kollavarsham/smc-webfonts"> <i class="fa fa-github fa-lg" aria-hidden="true"></i> </a> </div> </h1> <div class="page"> <div class="demo"> <div> <p>Preview, Usage, Live Demo and Try-out bookmarklet for the Open Source Malyalam fonts from SMC (Swathanthra Malayalam Computing) - <a href="https://smc.org.in/fonts/">https://smc.org.in/fonts/</a></p> <p> </p> <p><a href="https://www.youtube.com/watch?v=y-DhWN_bTI4">Check out the video on Youtube</a></p> <p> </p> <p>Use these fonts directly from <a href="http://www.jsdelivr.com/projects/smc-webfonts">jsDelivr CDN</a></p> <p> </p> </div> <h2 id="font-name"></h2> <h3>Usage</h3> <pre id="usage"></pre> <h3>Live Demo (on JSFiddle)</h3> <div id="jsFiddle-container"></div> <h3>Static Preview</h3> <div class="tab-container"> <div class="tab-head-container"> <div id="ml" class="tab-head">മലയാളം</div> <div id="en" class="tab-head">English</div> </div> <div class="font-container"> <div class="tab ml"> <p class="letters"> അ ആ ഇ ഈ ഉ ഊ ഋ ഌ എ ഏ ഐ ഒ ഓ ഔ ം ഃ <br/> ക ഖ ഗ ഘ ങ ച ഛ ജ ഝ ഞ ട ഠ ഡ ഢ ണ ത ഥ ദ ധ ന പ ഫ ബ ഭ മ <br/> യ ര ല വ ശ ഷ സ ഹ ള ഴ റ ഩ <br/> ഽ ാ ി ീ ു ൂ ൃ ൄ െ േ ൈ ൊ ോ ൌ ് <br/> ൠ ൡ ൢ ൣ ൹ ൺ ൻ ർ ൽ ൾ ൿ <br/> ൦ ൧ ൨ ൩ ൪ ൫ ൬ ൭ ൮ ൯ ൰ ൱ ൲ ൳ ൴ ൵ <br/> 0 1 2 3 4 5 6 7 8 9 . : , ; ( ) * ! ? ' @ # < > $ % & ^ + - = ~ </p> <p class="s10 ml-text" style="font-size: 10px;"></p> <p class="s11 ml-text" style="font-size: 11px;"></p> <p class="s12 ml-text" style="font-size: 12px;"></p> <p class="s14 ml-text" style="font-size: 14px;"></p> <p class="s18 ml-text" style="font-size: 18px;"></p> <p class="s24 ml-text" style="font-size: 24px;"></p> <p class="s30 ml-text" style="font-size: 30px;"></p> <p class="s36 ml-text" style="font-size: 36px;"></p> <p class="s48 ml-text" style="font-size: 48px;"></p> <p class="s60 ml-text" style="font-size: 60px;"></p> <p class="s72 ml-text" style="font-size: 72px;"></p> </div> <div class="tab en"> <p class="letters"> a b c d e f g h i j k l m n o p q r s t u v w x y z <br/>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z <br/>0 1 2 3 4 5 6 7 8 9 . : , ; ( ) * ! ? ' @ # < > $ % & ^ + - = ~ </p> <p class="s10 en-text" style="font-size: 10px;"></p> <p class="s11 en-text" style="font-size: 11px;"></p> <p class="s12 en-text" style="font-size: 12px;"></p> <p class="s14 en-text" style="font-size: 14px;"></p> <p class="s18 en-text" style="font-size: 18px;"></p> <p class="s24 en-text" style="font-size: 24px;"></p> <p class="s30 en-text" style="font-size: 30px;"></p> <p class="s36 en-text" style="font-size: 36px;"></p> <p class="s48 en-text" style="font-size: 48px;"></p> <p class="s60 en-text" style="font-size: 60px;"></p> <p class="s72 en-text" style="font-size: 72px;"></p> </div> </div> </div> </div> </div> <script type="application/javascript" src="scripts/thenBy.min.js"></script> <script type="application/javascript" src="scripts/script.es5.min.js"></script> <script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-4869398-10', 'auto'); ga('send', 'pageview'); </script> <script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=58e1d1e0403910001141b605&product=inline-share-buttons"></script> </body> </html>