Search code examples
font-faceembedded-fontsgoogle-webfontstidesdk

Google Webfonts with TideSDK


Have just discovered TideSDK and look forward to the upcoming 1.4.0 build. I am utilizing the TideSDK Developer on Windows 7 32-bit and have the HelloWorld app up and running... now I am having fun trying lots of CSS3/HTML5 code snippets to see what works with the current beta release. Trying to use Google webfonts does not seem to work... is this correct? I saw (old) discussions about font usage on windows with appcelerator Titanium, but don't know the current status. Is this expected to be included in the upcoming release? I am very enthused about this project (at it's current level of completion, it is already amazing !!!) I plan to develop a desktop application for Windows/Mac after I get a better understanding of TideSDK. I will be using jQuery and designing the app's UI with webpage-like techniques, and not having to fight multiple HTML5/CSS3 implementations will be great! Thanks for any suggestions about (Google) font usage.


Solution

  • Although upcoming release may solve font usage issues (to include Google fonts), I found that @font-face with SVG fonts works with current (1.3.1) TideSDK release. For example, download TangerineBold "Font Kit" from Font Squirrel -- only need the SVG font. Then include the following in your style sheet:

    @font-face { 
       font-family: 'TangerineBold'; 
         src: url('Tangerine_Bold-webfont.svg#TangerineBold') format('svg'); 
         font-weight: normal; 
         font-style: normal; 
    }
    

    and style elements with:

    font-family: 'TangerineBold';
    

    Further explanation (added 3/19/2013): I have given more details of custome font usage in TideSDK 1.3.1-beta on my blog, here