手書き風フォントにしたい

凍結

0 夜 iPhone

サイト内全ての文字を手書き風の
フォントに変えて温かみをだしたいです。

HEAD間編集の所をは今の所以下のようになっているんですが、どういった風に書き換えたら
手書き風になりますか？

<style>
@charset "UTF-8";

/* Template & Designed by Towako. */
/* https://ninawas.me */

/* ウェブフォントの読み込み */
@font-face {
font-family: 'IPA 明朝';
font-display: swap;
/* テキストが読み込まれてからフォントを適用する */
src: url('https://cdn.leafscape.be/IPAfont/ipam_web.woff2') format("woff2");
}

/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。

http://ipafont.ipa.go.jp/ipa_font_license_v1.html

-------------------------------------------------*/
/* ここまで */

/* 全体に適用する */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-weight: normal;
font-family: 游明朝, 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'IPA 明朝', serif;
}

08/26 12:01

返信

コメント投稿検索

4 夜 iPhone

>>3

丁寧に教えてくれてありがとうございました！
助かりました！

08/30 03:16

返信

3 しち SOG03

>>2
（前回名前を入れ忘れましたが>>1です）
そのフォントでしたらWEBフォントがあるので使用できます。
▼Leafscape » 851手書き雑フォント

Leafscape » 851手書き雑フォント

851手書き雑フォントフォントをwebフォント向けにカスタマイズしたファイルです。

leafscape.be

読み込むWEBフォントをこの『851手書き雑フォント』のみにしたCSSが以下です。

>>0の『/* ウェブフォントの読み込み */』以下を書き換えてください。
━━━━━━━━━━

/* ウェブフォントの読み込み */
@font-face
{
font-family: "手書き雑フォント";
font-display: swap; /* テキストが読み込まれてからフォントを適用する */
src: url("https://cdn.leafscape.be/tegaki_zatsu/851tegaki_zatsu_web.woff2") format("woff2");
}
/* ここまで */

/* 全体に適用する */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-weight: normal;
font-family: "手書き雑フォント", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
}

━━━━━━━━━━
もともとあったWEBフォント『IPA 明朝』は、使わないとのことですので削除しています。

『手書き雑フォント』より後のフォントはとりあえず従来のまま明朝体にしてありますが、お好みで変えて大丈夫です。
*　font-family: "手書き雑フォント", "○○", "××", "△△";
というように、〝とにかく『手書き雑フォント』が一番始めに書いてあれば〟OKです。
（始めに書いてあるものほどフォント適用の優先順位が高くなるため）

【参考】
▼【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例

【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例

この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。

willcloud.jp

08/28 21:49

返信

2 Anonymous iPhone

>>1

どのフォントか書いてなくて、すいません。

明朝体ではななく、851手書き雑フォントというものにしたいです。が、どこをどう書き換えればいいのか分からないので教えて欲しいです…

お願いします。m(__)m

08/28 12:22

返信

1 Anonymous SOG03

>>0 使いたい「手書き風フォント」は決まっていますか？
何のフォントをお使いになりたいのか明示してもらえれば、どこをどう書き換えればいいのかすぐお答えできますが……。

「IPA 明朝」というWEBフォントが読み込まれる設定になっていますが、このフォントを適用したいわけではないんですよね……？（明朝体なので）

手書き風フォントということならWEBフォントを使うことになります。
例えば以下のようなサイトで公開されているものが使用できます。

▼Leafscape » 手書き

Leafscape » 手書き

leafscape.be

▼Browse Fonts - Google Fonts