えむじぃのアプリ開発

えむじぃのアプリ開発

元大手IT企業SE、現ベンチャー企業CTOのブログです。

【C#】新しいフォントを追加

今回はシステムに登録されていない新しいフォントを追加する方法をこの記事で説明します。

この記事のポイント・@font-face、Web.Configの設定

新しいフォントの追加

@font-faceの登録

まず初めにCSSに@font-faceを使ってfontを設定します。

@font-face {
    /* font name */
    font-family: "thin_line";
    /* font path */
    src: url("../fonts/Thin_Line_Font.woff") format("woff"), 
         url("../fonts/Thin_Line_Font.otf") format("opentype");
}

 

クラス名の登録

先ほど登録した@font-faceを使ってクラス名を設定します。

.thinlineClass {
    font-family: "thin_line";
}

 

View側の設定

先ほど登録したクラス名を使用します。

<h3 class="thinlineClass">It should show up in the font you added.</h3>

これで追加したフォントで表示されるはず…でも、表示されない。他に設定が必要なのか調べてみたところ…Web.Configに設定が必要みたいなので以下の設定を追加

 

Web.Configに追加

<system.webserver>
    <staticcontent>
        <mimemap fileextension=".eot" minetype="application/vnd.ms-fontobject" />
        <mimemap fileextension=".ttf" minetype="application/octet-stream" />
        <mimemap fileextension=".svg" minetype="image/svg+xml" />
        <mimemap fileextension=".woff" minetype="application/x-woff" />
    </staticcontent>
</system.webserver>

Web.Configに設定し、デプロイすると…追加したフォントで表示されました。

 

<