Using Google Fonts within Facebook Application

Question

I'm having a not very fun time trying to use Google Fonts Api within a Facebook App.

It works on my application outside Facebook but when I'm inside the Facebook App the fonts do not work.

I'm including the font this way:

<link href='http://fonts.googleapis.com/css?family=Convergence|Satisfy' rel='stylesheet' type='text/css'/>

I will love to provide more information if needed. Thanks in advance for your time and help!

Answer 1

You would need to change

<link href='http://fonts.googleapis.com/css?family=Convergence|Satisfy' rel='stylesheet' type='text/css'/>

to

<link href='//fonts.googleapis.com/css?family=Convergence|Satisfy' rel='stylesheet' type='text/css'/>

Facebook block external http resources.

Answer 2

You can also just leave out the protocol-portion of the link:

<link href='//fonts.googleapis.com/css?family=Convergence|Satisfy' rel='stylesheet' type='text/css'/>

Answer 3

The problem is in the http protocol. Facebook apps would not load any resources that are not secure - ie not linked via https. I've had the same problem and changing the protocol prefix to 'https' worked.