Using web font in gadget

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Hi,

Can someone please explain how to use a google web font in a gadget ?

I have read the rise vision page on the google webfont API and it has a example for a text item.

This works pretty straight forward by working in the html of the text item.

But now i want to use a webfont in a google spreadsheet gadget and there is no way to work in the html of the gadget it seems. Only thing there is is the font setting in the properties of the gadget, it has a CSS style field that you can edit but i have tried some things and can't get it to work.

Any help would be greatly appreciated !
Photo of ame narrowcasting

ame narrowcasting

  • 90 Points 75 badge 2x thumb

Posted 6 years ago

  • 1
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
You'd have to take the Gadget's source code and create a custom version of it in order to do this. It's not possible to do this inside of the editor by simply setting the Gadget's properties.

Thx.
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Actually, scratch that. I just found a way that seems to work. Is this the content you are referring to? If so, you'll notice there that I'm linking to the following style sheet to use the Fondamento font - http://fonts.googleapis.com/css?famil...

Copy that URL into a new browser window and view its contents. You should see a line similar to this:
src: local('Fondamento Regular'), local('Fondamento-Regular'), url(http://themes.googleusercontent.com/static/fonts/fondamento/v2/bHQyc5zrMLI5-R-me5j-er3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
Copy the URL to the font file (in the above example, it's http://themes.googleusercontent.com/s..., then open the font property Gadget setting. Check the Use URL Font box and paste that URL into the Font URL textbox. Your Gadget should now use the Google Web Font.

Thx.
Photo of ame narrowcasting

ame narrowcasting

  • 90 Points 75 badge 2x thumb
Works perfectly.

Thanks so much Donna !
Photo of Wade

Wade

  • 1,238 Points 1k badge 2x thumb
This helped us too!! Thank you Donna!
Photo of Dave

Dave

  • 2,836 Points 2k badge 2x thumb
Donna,  

I have noticed that this works very well in preview (mac/chrome 39.0.2171.71) but does the typeface does not appear to make it to the actual display (cros/x86-64 with RisePlayerPackagedApp 1.24.25). It continues to display whatever typeface it wants to default to. Any thoughts?
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
I'd recommend opening up Chrome's DevTools on the Display and see if there are any errors related to the font in the Console. My guess would be it's not able to access the font for some reason.

Thx.
Photo of J Tarnai

J Tarnai

  • 152 Points 100 badge 2x thumb
Donna, you rock.
Photo of AdGators AdGators

AdGators AdGators

  • 3,612 Points 3k badge 2x thumb
When will the clock widget be integrated into the Google Font repository. At present moment, the Font I would like works perfectly through the Weather Widget, and is chosen via the Google font integration. When I try to use that same font's WOFF URL as my custom font URL in the clock gadget, it does not display. This tells me that something in the WOFF URL is blocked while the Google Font Integration on the Weather Widget is allowed. Interestingly enough, the WOFF file works fine locally on my test machine.
Thanks!
Joe Kirchner