Dynamic CSS Loading and Creation using Jquery
This is my first post on web development side. Frankly I'm not a designer and I don't understand the art of designing correctly. But this time I got in a situation where I had to do design changes in Silpa's Web font module. SILPA is the first service which provides Indic web fonts. Currently we have web font for Malayalam and Kannada languages.
Requirement was something like this - I need to get font details from Silpa which contains Font name, its language and sample text to preview the font.
Challenge: To preview the font on sample text, I needed to get @font-face CSS from the Silpa which can be done using <link rel="stylesheet" href="http://smc.org.in/silpa/Webfont?font=Malige"/ type="text/css"> tag which need to be put in <head> section of HTML page and create corresponding CSS for the font dynamically.
Solution: Santhosh gave me a hint "google dynamic CSS loading using Jquery" and this link came to my rescue. Here is what I did
css_link is generated using font name returned by the SILPA. Next was to create font CSS for each font's preview text. Well I used my own technique without knowing it will work or not but voila it worked :)
Here is what I did
And voila webfonts where previewed :). Here is the link for the page http://smc.org.in/silpa/Webfonts.If you didn't understand the entire code have a look at the source code here.Comments are welcome.
Requirement was something like this - I need to get font details from Silpa which contains Font name, its language and sample text to preview the font.
Challenge: To preview the font on sample text, I needed to get @font-face CSS from the Silpa which can be done using <link rel="stylesheet" href="http://smc.org.in/silpa/Webfont?font=Malige"/ type="text/css"> tag which need to be put in <head> section of HTML page and create corresponding CSS for the font dynamically.
Solution: Santhosh gave me a hint "google dynamic CSS loading using Jquery" and this link came to my rescue. Here is what I did
css_link is generated using font name returned by the SILPA. Next was to create font CSS for each font's preview text. Well I used my own technique without knowing it will work or not but voila it worked :)
Here is what I did
And voila webfonts where previewed :). Here is the link for the page http://smc.org.in/silpa/Webfonts.If you didn't understand the entire code have a look at the source code here.Comments are welcome.
Posted by: copyninja on Saturday, 3 July 2010
