Fabric.js + Google Fonts

为君一笑 提交于 2019-12-03 21:15:51

We're planning to ditch Cufon soon, in favor of native text methods. We incorporated Cufon ~2 years back when native text methods weren't very cross-browser available (see this test of mine from back in the days). Once we drop it, it will probably be an optional module, for cases when compatibility in older clients is important.

First link the google font in the <head>

<link href='http://fonts.googleapis.com/css?family=Oswald|Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento' rel='stylesheet' type='text/css'>

Create a div/span

<span class="txtFont" style="font-family:Oswald" onclick="change_font_family('Oswald')">Oswald</span>

In Javascript

function change_font_family(font_family)
{
   canvas.getActiveObject().set("fontFamily", font_family);
   canvas.renderAll();
}

I had the problem just this time.

You have to load the font in dom before you can use it in canvas with fabric.

So you can create an element, wich has the style attribute with the font you want.

For some my solotion may be interesting. I create a select where the user can select the font. In this select each get the attribute font-family.

Look at this:

Why a new answer? Because the key in the store is the font, which was not mentioned directly.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!