できる！「LINE Seed JP」FONTの使い方
Desktop バージョン
-　リモートサーバー編　-

LINE Seed フォントは、 LINEヤフー社が初めて開発したフォントシリーズで、この「LINE Seed JP」は、商用・非商用を問わず無償で利用できます。
フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。
以下は、リモートサーバーにインストールされたフォントから読み込む例について述べます。


１．LINE Seed JP フォントファイルを「LINE Seed」サイトよりダウンロード


LINE Seed サイトで、LINE Seed JP（日本語版）をダウンロードします。

２．ダウンロードした「LINE_Seed_JP.zip」を解凍


（１）「LINE_Seed_JP.zip」の解凍し、サーバーへアップロードします

（２）Desktopフォルダを開きます

（３）OTFフォルダを開きます（使用するファイル）


このページの使用例及びデモでは、Desktop/OTF/LINESeedJP_OTF_Bd.otfを使用します。


３．LINE Seed JP フォントの表示HTMLの作成


フォントファイルを読み込むためには、そのファイルの規定のfont-family名（フォント名）が必要です。
LINE Seed JP フォントについて、フォントファイル名とfont-family名（フォント名）の対応は下表のとおりです。

フォントファイル名とfont-family名の対応
フォントファイル名font-family名（フォント名）備考
　LINESeedJP_OTF_Th.otf　　LINE Seed JP_OTF Thin
　LINESeedJP_OTF_Rg.otf　LINE Seed JP_OTF Reguler
　LINESeedJP_OTF_Bd.otf　LINE Seed JP_OTF Bold このページの使用例及びデモで使用
　LINESeedJP_OTF_Eb.otf　LINE Seed JP_OTF ExtraBold　

フォント名は、Desktop/OTFフォルダ内のフォントファイル名をダブルクリックすると、該当フォントの情報が表示されます(下画像）。
その表示されたフォントの情報の左上部分（赤枠）に表示されています。


　フォントファイル名のダブルクリックで表示される該当フォントの情報（LINESeedJP_OTF_Bd.otfの例）

（１）CSS

Webフォントの利用を指定する@font-face は CSS のアットルールで、テキストを表示するための独自フォントを指定します。

　
CSS 例

<style>
   @font-face {
        font-family: 'LINE Seed JP_OTF Bold';   //既定のfont-family名
        src: url('line-seed/Desktop/OTF/LINESeedJP_OTF_Bd.otf');  //フォントファイルのパス（URL)
    } 
    .lineseedbold {   //class名またはHTMLタグ名（例：body）
        font-family: 'LINE Seed JP_OTF Bold';
        font-size: 3.5rem;
        //color: green;
    }
</style>

（２）HTML body

表示したい文字をbody内に記述します。ここの例では、使用class名は lineseedbold です（上記（１）CSS参照）。


　
HTML body 例

・・・
<body>

   <p class="lineseedbold">LINE Seed JP_OTF Bold 角丸ゴシック</p>

</body>
</html>

（３）HTML まとめ

HTML まとめ（LINE Seed JP_OTF Bold 角丸ゴシック）のデモは こちら≫
また、「LINE Seed JP」 Desktopフォルダ内４つのOTFフォントのデモは こちら≫ 


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LINE Seed Font demo</title>

<style>
    @font-face {
        font-family: 'LINE Seed JP_OTF Bold';
        src: url('line-seed/Desktop/OTF/LINESeedJP_OTF_Bd.otf');
    } 
    .lineseedbold {
        font-family: 'LINE Seed JP_OTF Bold';
        font-size: 3.5rem;
        //color: green;
    }

</style>

</head>
<body>

   <p class="lineseedbold">LINE Seed JP_OTF Bold 角丸ゴシック</p>

</body>
</html>
 

<style>
   @font-face {
        font-family: 'LINE Seed JP_OTF Bold';   //既定のfont-family名
        src: url('line-seed/Desktop/OTF/LINESeedJP_OTF_Bd.otf');  //フォントファイルのパス（URL)
    } 
    .lineseedbold {   //class名またはHTMLタグ名（例：body）
        font-family: 'LINE Seed JP_OTF Bold';
        font-size: 3.5rem;
        //color: green;
    }
</style>
 

   <p class="lineseedbold">LINE Seed JP_OTF Bold 角丸ゴシック</p>


©LY Corporation


 最終更新日：2024.11.20（Debut）