Zenn
🎨

LinuxのWebブラウザ上のFigmaでローカルフォントを参照する

2023/10/26に公開
5件
Figma
Linux
font
Arch Linux
tech

環境

Archlinux

$ uname -r
6.5.6-arch2-1

Google Chrome
117.0.5938.88

問題

ブラウザ上のFigmaで特定のテキストを編集しようとすると、fontが見つからないので代替テキストを選択するモーダルが出る。


画像はFigmaのヘルプページより引用

私の場合、実際には"SF Pro Text" などが見つからないとFigma上で言ってきた。

先に結論

これをインストールすれば、Linuxのブラウザ上のfigmaからローカルフォントを参照できる 👍
https://github.com/Figma-Linux/figma-linux-font-helper

以下諸々の調査記録

font(SF Pro Text) のインストール自体

Archlinuxの場合 https://aur.archlinux.org/packages/apple-fonts があるのでこれでいける

yay -S apple-fonts
  • SF Pro Text とかも入るはず。
  • 自分の環境の場合
    /user/share/fonts/OTF/ の下に入っていた。

私の場合font自体はインストールされていた。

まず fc-list でみつかる

$ fc-list  |grep SF-Pro-Text | head -3
/usr/share/fonts/OTF/SF-Pro-Text-BlackItalic.otf: SF Pro Text:style=Black Italic
/usr/share/fonts/OTF/SF-Pro-Text-Regular.otf: SF Pro Text:style=Regular
/usr/share/fonts/OTF/SF-Pro-Text-Thin.otf: SF Pro Text:style=Thin

chromeでも実際に使える

でもFigma(on browser) で使えない。なぜ?

FigmaのヘルプページのManage missing fonts にはこう書いてあった。

Make sure the Figma font service is installed and working (browser only)
You need to install the Figma font service to use your local fonts in Figma's browser app. To confirm it's working:

ブラウザからFigmaを使う場合 Figma font service というのがないとローカルのフォントにアクセスできないらしい。
ローカルにインストールされているFigmaなら font serviceはいらない。

MacとWindowsはローカルマシンにインストールするFigma Font Serviceのインストーラーがここにある。でもLinuxはない。
Access local fonts on your computer

ちなみにローカルになくてもGoogle Web FontsにあるフォントならFigma上で使えるらしいんだが、今回の問題はローカルにはあるけど、Google Web FontsにはないフォントがFigma上で既に使われている場合に自分のマシンから編集できないという点。

Solution-1[ボツ案] LinuxにローカルのFigmaをインストールする

  • AURがあるけど、インストールしたら自分のマシンのglibcが新しすぎてlocal figmaが起動できなかった
  • repositoryをcloneして、npm install して... という方法をためしたけど、npm installに成功しても npm run build が通らなかった. もうちょい時間使えばこの方法でもいけたとは思うが。
  • snapやAppImageはなんか好きでないのでパス。

Solution-2[これでいけた] figma-linux-font-helper + ブラウザ上のFigma利用

Figmaのオフィシャルではないのだけどこんなのがある。素晴らしい。
https://github.com/Figma-Linux/figma-linux-font-helper

なるほど、localにhttpサーバーを立ててbrowser上のfigmaからアクセスする感じなんですね。
ちなみにRustで書かれている。

installするとこの辺のやつが生成されていた

  • 実行バイナリ ~/.local/share/figma-fonthelper/fonthelper
  • systemd の設定ファイル ~/.config/systemd/user/figma-fonthelper.service 
[Unit]
Description=Font Helper for Figma
After=systemd-user-sessions.service

[Service]
Type=simple
ExecStart=${XDG_CONFIG_HOME}/figma-fonthelper/fonthelper
ExecStop=/bin/bash -c '`which killall` fonthelper'
Restart=on-failure

[Install]
WantedBy=multi-user.target

インストール後にchromeのsite-settingから念の為figmaのapplication data(cookie etc..)を削除して、再度ログインした。

これでこれまでMissing fontsモーダルが出て編集できなかった箇所が編集できるようになった。

Figmaの "Account Setting" でも font serviceがEnabledになっていることがわかる。

(2024.01.22 追記) UserAgentを偽装しないとFigmaがFontHelperへ問い合わせてくれない

google-chrome --user-agent='Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'

こちらの2024.01.12のFigma Forumの投稿にこの問題を見つけた方がいました。
Requests to font-helper on linux stopped working - General Discussion - Figma Community Forum

Discussion

tomllatomlla

memo
なんか、figma側から認識されていなくなった。
$ systemctl --user status figma-fonthelper.service
しても同じ

tomllatomlla

portを変えてみる(defaultの 18412 から 44950)

これをまずためした。

vim ~/.config/figma-linux/settings.json

でポートを変えて、

systemctl --user restart figma-fonthelper.service

ポートのチェック

ss -tulpn |grep fonthelper
tcp   LISTEN 0      128                                    127.0.0.1:44950      0.0.0.0:*    users:(("fonthelper",pid=40232,fd=4))

変わっているので、figmaのトップページ(https://www.figma.com/files/recents-and-sharing/recently-viewed)
の "左上の自分の名前ボタン" -> "Settings" -> "Account"タブ -> "Fonts" を見てみるが、相変わらず

Local fonts are currently not supported for this operating system.

tomllatomlla

UserAgentをこれにするといけた

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36