ScrollRevealでgoogleフォントを読み込んだSVG画像を使う

#ScrollRevealとは
スクロールした時に要素がふわっと表示されるアニメーションを簡単に実装できるライブラリです。
軽量かつ、jQueryなどのライブラリに依存せず、cssも必要ないため、スクロールアニメーションをパパッと実装できます。
ScrollReveal

#なんでハマったか
今回はSVGのフォントにgooglefontsを使いたかったのです。
また、SVG画像はアウトライン化せずに、使用したいところでした。

###失敗例

1. imgタグで呼び出す　→　googlefontsが読み込めませんでした。
2. svgタグで呼び出す　→　svgタグの中のいろーーーんなタグ全てにScrollRevealが適用される。結果表示されず。（ヘッダーフッター以外全てにScrollRevealを適用したかったので細かい範囲指定が面倒だった）

#結論
objectタグで呼び出す　→　別documentとして扱われるらしく、ScrollRevealがのみに適用され、googlefontsも問題なく読み込んだ。

html

<object type="image/svg+xml" data="hoge.svg" class="scrollreveal"></object>

hoge.svg

<svg>
<style type="text/css">
	@import url('https://fonts.googleapis.com/css?family=hoge:300');
	.hoge{font-family: 'hoge', sans-serif;
		font-weight: 300;}
</style>
・・・
以下省略