tag:crieit.net,2005:https://crieit.net/tags/Google%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/feed Crieitでタグ「Googleフォント」に投稿された最近の記事 2022-01-01T14:41:44+09:00 https://crieit.net/tags/Google%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/feed tag:crieit.net,2005:PublicArticle/17907 2022-01-01T14:41:44+09:00 2022-01-01T14:41:44+09:00 https://crieit.net/posts/use-googlefonts-in-diagramsnet-20220101 <h2 id="経緯"><a href="#%E7%B5%8C%E7%B7%AF">経緯</a></h2> <p>たまにしかやらないと忘れるので <a target="_blank" rel="nofollow noopener" href="https://app.diagrams.net">diagrams.net</a> (旧: draw.io) で <a target="_blank" rel="nofollow noopener" href="https://fonts.google.com">Google Fonts</a> を使用するための方法をメモ。</p> <h2 id="手順"><a href="#%E6%89%8B%E9%A0%86">手順</a></h2> <p><a href="https://crieit.now.sh/upload_images/04feac97054bc4a2f7bb53eb8e333f9961cb23ed9d7a0.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/04feac97054bc4a2f7bb53eb8e333f9961cb23ed9d7a0.jpg?mw=700" alt="Google Fonts で使いたいフォントを選択する" /></a></p> <p>まずはGoogle Fonts で使いたいフォントを選択します。ウェイトの一覧から選択すると右に選択済みのフォントについて Webフォント 用の HTMLタグ と css の指定が表示されるので、 css の名前をコピーします (上の画像では <code>Noto Serif JP</code>)。</p> <p><a href="https://crieit.now.sh/upload_images/fa59c7390cb41c234bc251ecaa1cb9a861cb23f72acd8.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/fa59c7390cb41c234bc251ecaa1cb9a861cb23f72acd8.jpg?mw=700" alt="diagrams.net で文字列を入力" /></a></p> <p>続いて diagrams.net で文字列を入力します。</p> <p><a href="https://crieit.now.sh/upload_images/f16de43659d3b13f85299aee315b5acc61cb2401a3d6d.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f16de43659d3b13f85299aee315b5acc61cb2401a3d6d.jpg?mw=700" alt="カスタムを選択" /></a></p> <p>この文字列を選択した状態で、右のメニューから「テキスト」タブ→「フォント」のプルダウンを開き、「カスタム…」を選択。</p> <p><a href="https://crieit.now.sh/upload_images/a6c1b08be8b08382e2c53c26f77a3b6a61cb24099160e.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/a6c1b08be8b08382e2c53c26f77a3b6a61cb24099160e.jpg?mw=700" alt="フォントを指定するダイアログ" /></a></p> <p>ダイアログが開くので、ラジオボタンで「Google Fonts」を選択して先程 Google Fonts でコピーしたフォント名を入力し、「適用」。</p> <p><a href="https://crieit.now.sh/upload_images/de3d880a9198d519a080c114c4378d1961cb24117925f.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/de3d880a9198d519a080c114c4378d1961cb24117925f.jpg?mw=700" alt="フォントが適用された" /></a></p> <p>これでフォントが適用されました。</p> <p>フォントが変わると (特に日本語のフォントはデフォルトではないので) 見違えますね。</p> <h2 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h2> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://shichimipan.com/it/tools/diagrams-net">diagrams.net（旧Draw.io）の使い方 | しちみぱん</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://alecriarstudio.hatenablog.com/entry/2019/10/06/152332">最強のドローツール「draw.io」 - Alecriar Studioの中の人の技術メモ</a></li> </ul> arm-band