Embedding Google Web Fonts

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
1/30/2012 11:43:29 AM
Gravatar
Total Posts 40

Embedding Google Web Fonts

Is is possible to use Google Web fonts in designs? if so, what would be the preferred method of embedding them? A standard <link> element, an @import, or JavaScript function? Also,  are you already using Google's Ajax API in the project? If so then Google Loader is also an option. I've found a few fonts I'd love to use in a design.

1/30/2012 12:28:30 PM
Gravatar
Total Posts 1204
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Embedding Google Web Fonts

I haven't tried this, but I would start by using the JavaScript method within the layout.master of your target skin, and integrate the font declarations into the skin's CSS. If you get it going, I'd be interested in seeing a site running with these custom fonts.

Jamie

1/30/2012 1:06:20 PM
Gravatar
Total Posts 2212

Re: Embedding Google Web Fonts

We've done this in several skins. The JavaScript is probably the best method but the link element works as well. When we use the JavaScript method, we add it to a script file where we store all of the javascript we create for a single site. That script is then added to the layout.master using the portal:SkinFolderScript control with the AddToCombinedScript="true" property set. This will help with the page size and load which can have a positive effect on site speed.

HTH,
Joe D. 

1/30/2012 10:25:39 PM
Gravatar
Total Posts 355

Re: Embedding Google Web Fonts

Are you absolutely committed to using the fonts from Google? What I've done for my clients is to leverage the font-face kits from FontSquirrel - they've got a huge selection of free commercially-usable fonts, and also have an online font-face generator. To implement them, I just use the @font-face in the CSS, and reference the font name where I want it used. I've tested it cross-browser on PC and Android, and it always renders well.

1/31/2012 4:34:28 AM
Gravatar
Total Posts 40

Re: Embedding Google Web Fonts

@IndigoTea, no I'm not married to Google Web Fonts, they were just who I knew had web fonts you could use for free. I'll definitely look at the FontSquirrel kits.

@Joe Davis For the single script file, am I better off storing that in the ClientScript folder or keeping it local to the other skin files?

1/31/2012 4:44:18 AM
Gravatar
Total Posts 355

Re: Embedding Google Web Fonts

One other thing; no Javascript required for the webkit - just simple CSS. I've a tutorial on how it works coming out in a few days over at Arvixe, if you'd like to keep an eye out.

1/31/2012 10:37:42 AM
Gravatar
Total Posts 2212

Re: Embedding Google Web Fonts

It's best to store your skin specific scripts with the skin. When you use the AddToCombinedScript parameter, it keeps there from being yet another file downloaded by the browser.

The upside of using services like Google Web Fonts is that the files are on a CDN so as more people use the service, the better the chance is that the fonts will already be cached when a user loads your site. Also, the Google Web Fonts service allows you to imbed the fonts using a link element if you don't like the JavaScript option. Again, this allows use of the CDN which is generally going to be a lot faster than any shared hosting server.

To use the script loader to load your JS with the combined site script, do the following:

  1. Create a new js file in your skin directory, I usually name it skinscript.js.
  2. Add your javascript to the new file. Don't use <script> tags, you don't need them in javascript files.
  3. Add <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="skinscript.js" AddToCombinedScript="true" /> to your layout.master. I usually add this right after the <asp:ScriptManager control.

You can move the scripts in your layout.master to this new js file but it may take a little bit of trial-and-error because depending on how they were written, they might not work properly being lumped together. We always add the toolbar and superfish scripts to this file and we don't have any problem with them.

HTH,
Joe D. 

You must sign in to post in the forums. This thread is closed to new posts.