オススメのフリー日本語フォント

使いやすい丸みのある太くかわいいデザイン

基本的に個人利用無料

商用版では有料多し

お試し版で常用漢字込だと有料版のものもあるよ

詳しくは各リンク先のライセンスを確認してね

fontのインストール: 解凍先の .ttf ファイルを C:\Windows\Fonts にコピー

Googleフォント 日本語

BOOTH 日本語 ¥0

view source

JavaScript

var links = [
  {
    title:"フィバ文字",
    href:"https://booth.pm/ja/items/215917",
    src:"fev.jpg",
  },
  {
    title:"子パンダフォント",
    href:"https://atelierkotatu.booth.pm/items/3689711",
    src:"kopanda.jpg",
  },
  {
    title:"つなぎゴシック",
    href:"https://mokuzai.booth.pm/items/3885939",
    src:"tunagi.jpg",
  },
  {
    title:"コラットカドマル",
    href:"https://booth.pm/ja/items/2213504",
    src:"flat_kadomaru.jpg",
  },
  {
    title:"ベストテンFONT",
    href:"https://flopdesign.booth.pm/items/2747965",
    src:"bestten.jpg",
  },

  {
    title:"藍と白のゆきぐに",
    href:"https://booth.pm/ja/items/3054852",
    src:"aitosiro.jpg",
  },
  {
    title:"Zen Maru Gothic",
    href:"https://fonts.google.com/specimen/Zen+Maru+Gothic",
    src:"zenmaru.png",
  },

/*

  {
    title:"",
    href:"https://",
    src:"",
  },
*/
];

$(function(){
  $demo = $('#demo');
  links.forEach(function(v){
    var a = $('<a>', {href:v.href}).text(v.title);
    if(v.src){
      var img = $('<img>', {src:v.src, alt:v.title});
      a.append(img);
    }
    $demo.append(a);
  });
});

CSS

#demo a{
  display:inline-block;
  width:360px;
}
#demo img{
  display:block;
  max-width:360px;
}
#demo h4{
  color:#000;
  font-size:24px;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-font/font-free/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。