【HTML/CSS】font-familyで指定できる種類とサンプル一覧[WINDOWS/MAC]

<p class="t8-family-1">これはサンプルです。</p>

.t8-family-1 {
font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体',sans-serif;　
}

<p class="t8-family-2">これはサンプルです。</p>

.t8-family-2 {
font-family: YuGothic,'Yu Gothic',sans-serif;
}

<p class="t8-family-3">This is a sample.</p>

.t8-family-3 {
font-family: 'Arial',sans-serif;
}

<p class="t8-family-4">This is a sample.</p>

.t8-family-4 {
font-family: 'Arial Black',sans-serif;
}

<p class="t8-family-5">This is a sample.</p>

.t8-family-5 {
font-family: 'Comic Sans MS',sans-serif;
}

<p class="t8-family-6">This is a sample.</p>

.t8-family-6 {
font-family: 'Courier',sans-serif;
}

<p class="t8-family-7">This is a sample.</p>

.t8-family-7 {
font-family: 'Georgia',sans-serif;
}

<p class="t8-family-8">This is a sample.</p>

.t8-family-8 {
font-family: 'Impact',sans-serif;
}

<p class="t8-family-9">This is a sample.</p>

.t8-family-9 {
font-family: 'Tahoma', sans-serif;
}

<p class="t8-family-10">This is a sample.</p>

.t8-family-10 {
font-family: 'Times New Roman',sans-serif;
}

<p class="t8-family-11">This is a sample.</p>

.t8-family-12 {
font-family: 'Trebuchet MS',sans-serif;
}

<p class="t8-family-12">これはサンプルです。</p>

.t8-family-12 {
font-family: 'メイリオ', Meiryo,sans-serif;
}

<p class="t8-family-13">これはサンプルです。</p>

.t8-family-13 {
font-family: 'Meiryo UI',sans-serif;
}

<p class="t8-family-14">これはサンプルです。</p>

.t8-family-14 {
font-family: 'Yu Gothic UI', sans-serif;
}

<p class="t8-family-15">これはサンプルです。</p>

.t8-family-15 {
font-family: 'ＭＳ ゴシック', sans-serif;
}

<p class="t8-family-16">これはサンプルです。</p>

.t8-family-16 {
font-family: 'ＭＳ Ｐゴシック','MS PGothic', sans-serif;
}

<p class="t8-family-17">これはサンプルです。</p>

.t8-family-17 {
font-family: 'MS UI Gothic', sans-serif;
}

<p class="t8-family-18">これはサンプルです。</p>

.t8-family-18 {
font-family: 'ＭＳ 明朝', 'MS Mincho', 
sans-serif;

<p class="t8-family-19">これはサンプルです。</p>

.t8-family-19 {
font-family: 'ＭＳ Ｐ明朝','MS PMincho', sans-serif;
}

<p class="t8-family-20">This is a sample.</p>

.t8-family-20 {
font-family: 'Calibri', sans-serif;
}

<p class="t8-family-21">This is a sample.</p>

.t8-family-21 {
font-family: 'Cambria', sans-serif;
}

<p class="t8-family-22">This is a sample.</p>

.t8-family-22 {
font-family: 'Candara', sans-serif;
}

<p class="t8-family-23">This is a sample.</p>

.t8-family-23 {
font-family: 'Consolas', sans-serif;
}

<p class="t8-family-24">This is a sample.</p>

.t8-family-24 {
font-family: 'Constantia', sans-serif;
}

<p class="t8-family-25">This is a sample.</p>

.t8-family-25 {
font-family: 'Corbel', sans-serif;
}

<p class="t8-family-26">This is a sample.</p>

.t8-family-26 {
font-family: 'Ebrima', sans-serif;
}

<p class="t8-family-27">This is a sample.</p>

.t8-family-27 {
font-family: 'Franklin Gothic Medium', sans-serif;
}

<p class="t8-family-28">This is a sample.</p>

.t8-family-28 {
font-family: 'Gabriola', sans-serif;
}

<p class="t8-family-29">This is a sample.</p>

.t8-family-29 {
font-family: 'Gadugi', sans-serif;
}

<p class="t8-family-30">This is a sample.</p>

.t8-family-30 {
font-family: 'Javanese Text', sans-serif;
}

<p class="t8-family-31">This is a sample.</p>

.t8-family-31 {
font-family: 'Leelawadee UI', sans-serif;
}

<p class="t8-family-32">This is a sample.</p>

.t8-family-32 {
font-family: 'Lucida Console', sans-serif;
}

<p class="t8-family-33">This is a sample.</p>

.t8-family-33 {
font-family: 'Modern', sans-serif;
}

<p class="t8-family-34">This is a sample.</p>

.t8-family-34 {
font-family: 'Mongolian Baiti', sans-serif;
}

<p class="t8-family-35">This is a sample.</p>

.t8-family-35 {
font-family: 'MS Sans Serif',sans-serif;
}

<p class="t8-family-36">This is a sample.</p>

.t8-family-36 {
font-family: 'Mv Boli',sans-serif;
}

<p class="t8-family-38">This is a sample.</p>

.t8-family-38 {
font-family: 'Roman',sans-serif;
}

<p class="t8-family-39">This is a sample.</p>

.t8-family-39 {
font-family: 'Script',sans-serif;
}

<p class="t8-family-40">This is a sample.</p>

.t8-family-40 {
font-family: 'Segoe Print',sans-serif;
}

<p class="t8-family-41">This is a sample.</p>

.t8-family-41 {
font-family: 'Segoe UI',sans-serif;
}

<p class="t8-family-42">これはサンプルです。</p>

.t8-family-42 {
font-family: 'Segoe UI Black',sans-serif;
}

<p class="t8-family-43">This is a sample.</p>

.t8-family-43 {
font-family: 'Segoe UI Emoji',sans-serif;
}

<p class="t8-family-44">This is a sample.</p>

.t8-family-44 {
font-family: 'Segoe UI Historic',sans-serif;
}

<p class="t8-family-45">This is a sample.</p>

.t8-family-46 {
font-family: 'Segoe UI Symbol',sans-serif;
}

<p class="t8-family-47">This is a sample.</p>

.t8-family-47 {
font-family: 'Sitka Banner',sans-serif;
}

<p class="t8-family-48">This is a sample.</p>

.t8-family-48 {
font-family: 'Sitka Display',sans-serif;
}

<p class="t8-family-49">This is a sample.</p>

.t8-family-49 {
font-family: 'Sitka Heading',sans-serif;
}

<p class="t8-family-50">This is a sample.</p>

.t8-family-50 {
font-family: 'Sitka Text',sans-serif;
}

<p class="t8-family-51">This is a sample.</p>

.t8-family-51 {
font-family: 'Sitka Subheading',sans-serif;
}

<p class="t8-family-52">This is a sample.</p>

.t8-family-52 {
font-family: 'Sitka Small',sans-serif;
}

<p class="t8-family-53">This is a sample.</p>

.t8-family-53 {
font-family: 'Sylfaen',sans-serif;
}

<p class="t8-family-54">This is a sample.</p>

.t8-family-54 {
font-family: 'System',sans-serif;
}

<p class="t8-family-55">This is a sample.</p>

.t8-family-55 {
font-family: 'Terminal',sans-serif;
}

<p class="t8-family-56">これはサンプルです。</p>

.t8-family-56 {
font-family: 'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}

<p class="t8-family-57">これはサンプルです。</p>

.t8-family-57 {
font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

<p class="t8-family-58">これはサンプルです。</p>

.t8-family-58 {
font-family: 'ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',sans-serif;
}

<p class="t8-family-59">これはサンプルです。</p>

.t8-family-59 {
font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}

<p class="t8-family-60">これはサンプルです。</p>

.t8-family-60 {
font-family: 'ヒラギノ丸ゴ ProN','Hiragino Maru Gothic ProN',sans-serif;
}t

<p class="t8-family-1">これはサンプルです。</p>

.t8-family-61 {
font-family: 'klee',sans-serif;
}

<p class="t8-family-62">これはサンプルです。</p>

.t8-family-62 {
font-family: 'TsukuARdGothic-Regular',sans-serif;
}

<p class="t8-family-63">これはサンプルです。</p>

.t8-family-63 {
font-family: 'TsukuBRdGothic-Regular',sans-serif;
}

<p class="t8-family-64">これはサンプルです。</p>

.t8-family-65 {
font-family: 'Osaka',sans-serif;
}

<p class="t8-family-66">これはサンプルです。</p>

.t8-family-66 {
font-family: '游明朝体+36ポかな','YuMincho +36p Kana',sans-serif;
}

<p class="t8-family-67">This is a sample.</p>

.t8-family-67 {
font-family: 'Hannotate SC',sans-serif;

<p class="t8-family-68">This is a sample.</p>

.t8-family-68 {
font-family: 'Hannotate TC',sans-serif;
}

<p class="t8-family-70">This is a sample.</p>

.t8-family-70 {
font-family: 'HanziPen TC',sans-serif;
}

<p class="t8-family-1">This is a sample.</p>

.t8-family-71 {
font-family: 'Wawati SC',sans-serif;
}

<p class="t8-family-72">This is a sample.</p>

.t8-family-72 {
font-family: 'American Typewriter',sans-serif;
}

<p class="t8-family-73">This is a sample.</p>

.t8-family-73 {
font-family: 'Andale Mono',sans-serif;
}

<p class="t8-family-74">This is a sample.</p>

.t8-family-74 {
font-family: 'Arial Narrow',sans-serif;
}

<p class="t8-family-75">This is a sample.</p>

.t8-family-75 {
font-family: 'Arial Rounded MT Bold',sans-serif;
}

<p class="t8-family-76">This is a sample.</p>

.t8-family-76 {
font-family: 'Arial Unicode MS',sans-serif;
}

<p class="t8-family-77">This is a sample.</p>

.t8-family-77 {
font-family: 'Athelas',sans-serif;
}

<p class="t8-family-78">This is a sample.</p>

.t8-family-78 {
font-family: 'Avenir',sans-serif;
}

<p class="t8-family-1">This is a sample.</p>

.t8-family-1 {
font-family: 'Avenir Next',sans-serif;
}

<p class="t8-family-79">This is a sample.</p>

.t8-family-79 {
font-family: 'Avenir Next Condensed',sans-serif;
}

<p class="t8-family-80">This is a sample.</p>

.t8-family-80 {
font-family: 'Apple Chancery',sans-serif;
}

<p class="t8-family-81">This is a sample.</p>

.t8-family-81 {
font-family: 'Apple Symbols',sans-serif;
}

<p class="t8-family-82">This is a sample.</p>

.t8-family-82 {
font-family: 'Baskerville',sans-serif;
}

<p class="t8-family-83">This is a sample.</p>

.t8-family-83 {
font-family: 'Big Caslon',sans-serif;
}

<p class="t8-family-84">This is a sample.</p>

.t8-family-84 {
font-family: 'Bodoni 72',sans-serif;
}

<p class="t8-family-85">This is a sample.</p>

.t8-family-85 {
font-family: 'Bodoni 72 Oldstyle',sans-serif;
}

<p class="t8-family-86">This is a sample.</p>

.t8-family-86 {
font-family: 'Bodoni 72 Smallcaps',sans-serif;
}

<p class="t8-family-87">This is a sample.</p>

.t8-family-87 {
font-family: 'Bradley Hand',sans-serif;
}

<p class="t8-family-88">This is a sample.</p>

.t8-family-88 {
font-family: 'Brush Script MT',sans-serif;
}

<p class="t8-family-89">This is a sample.</p>

.t8-family-89 {
font-family: 'Chalkboard',sans-serif;
}

<p class="t8-family-90">This is a sample.</p>

.t8-family-90 {
font-family: 'Chalkboard SE',sans-serif;
}

<p class="t8-family-91">This is a sample.</p>

.t8-family-91 {
font-family: 'Chalkduster',sans-serif;
}

<p class="t8-family-92">This is a sample.</p>

.t8-family-92 {
font-family: 'Charter',sans-serif;
}

<p class="t8-family-93">This is a sample.</p>

.t8-family-93 {
font-family: 'Cochin',sans-serif;
}

<p class="t8-family-94">This is a sample.</p>

.t8-family-94 {
font-family: 'Copperplate',sans-serif;
}

<p class="t8-family-95">This is a sample.</p>

.t8-family-95 {
font-family: 'Courier',sans-serif;
}

<p class="t8-family-96">This is a sample.</p>

.t8-family-96 {
font-family: 'Courier New',sans-serif;
}

<p class="t8-family-97">This is a sample.</p>

.t8-family-97 {
font-family: 'Didot',sans-serif;
}

<p class="t8-family-98">This is a sample.</p>

.t8-family-98 {
font-family: 'DIN Alternate',sans-serif;
}

<p class="t8-family-99">This is a sample.</p>

.t8-family-99 {
font-family: 'DIN Condensed',sans-serif;
}

<p class="t8-family-100">This is a sample.</p>

.t8-family-100 {
font-family: 'Futura',sans-serif;
}

<p class="t8-family-101">This is a sample.</p>

.t8-family-101 {
font-family: 'Geneva',sans-serif;
}

<p class="t8-family-102">This is a sample.</p>

.t8-family-102 {
font-family: 'Georgia',sans-serif;
}

<p class="t8-family-103">This is a sample.</p>

.t8-family-103 {
font-family: 'Gill Sans',sans-serif;
}

<p class="t8-family-104">This is a sample.</p>

.t8-family-104 {
font-family: 'Gurmukhi MN',sans-serif;
}

<p class="t8-family-105">This is a sample.</p>

.t8-family-105 {
font-family: 'Helvetica',sans-serif;
}

<p class="t8-family-106">This is a sample.</p>

.t8-family-106 {
font-family: 'DIN Alternate',sans-serif;
}

<p class="t8-family-107">This is a sample.</p>

.t8-family-107 {
font-family: 'Helvetica Neue',sans-serif;
}

<p class="t8-family-108">This is a sample.</p>

.t8-family-108 {
font-family: 'Herculanum',sans-serif;
}

<p class="t8-family-109">This is a sample.</p>

.t8-family-109 {
font-family: 'HoeflerText-Regular','Hoefler Text',sans-serif;
}

<p class="t8-family-110">This is a sample.</p>

.t8-family-110 {
font-family: 'HoeflerText-Black',sans-serif;
}

<p class="t8-family-111">This is a sample.</p>

.t8-family-111 {
font-family: 'Iowan Old Style',sans-serif;
}

<p class="t8-family-112">This is a sample.</p>

.t8-family-112 {
font-family: 'Lucida Grande',sans-serif;
}

<p class="t8-family-113">This is a sample.</p>

.t8-family-113 {
font-family: 'Luminari',sans-serif;
}

<p class="t8-family-114">This is a sample.</p>

.t8-family-114 {
font-family: 'Marion',sans-serif;
}

<p class="t8-family-115">This is a sample.</p>

.t8-family-115 {
font-family: 'Marker Felt',sans-serif;
}

<p class="t8-family-116">This is a sample.</p>

.t8-family-116 {
font-family: 'Menlo',sans-serif;
}

<p class="t8-family-117">This is a sample.</p>

.t8-family-117 {
ont-family: 'Microsoft Sans Serif',sans-serif;
}

<p class="t8-family-118">This is a sample.</p>

.t8-family-118 {
font-family: 'Monaco',sans-serif;
}

<p class="t8-family-119">This is a sample.</p>

.t8-family-119 {
font-family: 'Noteworthy',sans-serif;
}

<p class="t8-family-120">This is a sample.</p>

.t8-family-120 {
font-family: 'Optima',sans-serif;
}

<p class="t8-family-121">This is a sample.</p>

.t8-family-121 {
font-family: 'Palatino',sans-serif;
}

<p class="t8-family-122">This is a sample.</p>

.t8-family-122 {
font-family: 'Papyrus',sans-serif;
}

<p class="t8-family-123">This is a sample.</p>

.t8-family-123 {
font-family: 'Papyrus-Condensed',sans-serif;
}

<p class="t8-family-124">This is a sample.</p>

.t8-family-124 {
font-family: 'Phosphate',sans-serif;
}

<p class="t8-family-125">This is a sample.</p>

.t8-family-125 {
font-family: 'Phosphate-Solid',sans-serif;
}

<p class="t8-family-126">This is a sample.</p>

.t8-family-126 {
font-family: 'Plantagenet Cherokee',sans-serif;
}

<p class="t8-family-127">This is a sample.</p>

.t8-family-127 {
font-family: 'PT Mono',sans-serif;
}

<p class="t8-family-128">This is a sample.</p>

.t8-family-128 {
font-family: 'PT Sans',sans-serif;
}

<p class="t8-family-129">This is a sample.</p>

.t8-family-129 {
font-family: 'PT Sans Caption',sans-serif;
}

<p class="t8-family-130">This is a sample.</p>

.t8-family-130 {
font-family: 'PT Sans Narrow',sans-serif;
}

<p class="t8-family-131">This is a sample.</p>

.t8-family-131 {
font-family: 'PT Serif',sans-serif;
}

<p class="t8-family-132">This is a sample.</p>

.t8-family-132 {
font-family: 'PT Serif Caption',sans-serif;
}

<p class="t8-family-133">This is a sample.</p>

.t8-family-133 {
font-family: 'San Fransisco',sans-serif;
}

<p class="t8-family-134">This is a sample.</p>

.t8-family-134 {
font-family: 'Savoye LET',sans-serif;
}

<p class="t8-family-135">This is a sample.</p>

.t8-family-135 {
font-family: 'Seravek',sans-serif;
}

<p class="t8-family-136">This is a sample.</p>

.t8-family-136 {
font-family: 'SignPainter',sans-serif;
}

<p class="t8-family-137">This is a sample.</p>

.t8-family-137 {
font-family: 'Silom',sans-serif;
}

<p class="t8-family-138">This is a sample.</p>

.t8-family-138 {
font-family: 'Skia',sans-serif;
}

<p class="t8-family-139">This is a sample.</p>

.t8-family-139 {
font-family: 'Skia-Regular_Black',sans-serif;
}

<p class="t8-family-140">This is a sample.</p>

.t8-family-140 {
font-family: 'Skia-Regular_Condensed',sans-serif;
}

<p class="t8-family-142">This is a sample.</p>

.t8-family-142 {
font-family: 'Superclarendon',sans-serif;
}

<p class="t8-family-143">This is a sample.</p>

.t8-family-143 {
font-family: 'Times',sans-serif;
}

<p class="t8-family-144">This is a sample.</p>

.t8-family-144 {
font-family: 'Trattatello',sans-serif;
}

<p class="t8-family-145">This is a sample.</p>

.t8-family-145 {
font-family: 'Zapfino',sans-serif;
}