{"id":9366,"date":"2025-10-07T21:06:40","date_gmt":"2025-10-07T12:06:40","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?page_id=9366"},"modified":"2026-04-03T16:24:36","modified_gmt":"2026-04-03T07:24:36","slug":"recommend-google-fonts","status":"publish","type":"page","link":"https:\/\/code-plus.jp\/gp\/recommend-google-fonts\/","title":{"rendered":"\u304a\u3059\u3059\u3081\u306e Google Fonts"},"content":{"rendered":"<!-- \u25bc.page-\u304a\u3059\u3059\u3081\u306e Google Fonts \uff08\/recommend-google-fonts\/\uff09\r\n* \u30da\u30fc\u30b8\u30af\u30e9\u30b9\uff1apg-saragfntckfk\uff08WordPress\u304c\u5c0f\u6587\u5b57\u3067\u3057\u304b\u51fa\u529b\u3067\u304d\u306a\u3044\u305f\u3081\uff09\r\n* \u8b58\u5225\u30b3\u30fc\u30c9\uff1agfntCkfK\uff08section\/dept \u306e\u30af\u30e9\u30b9\u540d, \u753b\u50cf\u540d\u306b\u4f7f\u7528\uff09\r\n====================================== -->\r\n<!-- font\uff1aYakuhan, Number -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/yakuhanjp@4.0.0\/dist\/css\/yakuhanmp.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Lusitana&display=swap&text=\u00a50123456789!#$%&()-^@[;:],.\/=~|{+*}<>?_`)\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sarap422\/font-shippori-mincho-b1-otf@1.0.0\/font-face.css&text=\u00a50123456789!#$%&()-^@[;:],.\/=~|{+*}<>?_`)\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<!-- font\uff1aGothic\uff08Mono, Vertical, Etc\uff09 -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/code-plus.jp\/gp\/wp-content\/themes\/zaratan\/commons\/fonts\/GenShinGothic\/font-face.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=M+PLUS+1:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=BIZ+UDPGothic:wght@400;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<!-- font\uff1aMincho -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sarap422\/font-shippori-mincho-otf@1.0.0\/font-face.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Shippori+Mincho&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+JP:wght@400..800&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=BIZ+UDPMincho&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<!-- font\uff1aRounded -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/yakuhanjp@4.0.0\/dist\/css\/yakuhanrp.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/code-plus.jp\/gp\/wp-content\/themes\/zaratan\/commons\/fonts\/LINESeedJP\/font-face.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/code-plus.jp\/gp\/wp-content\/themes\/zaratan\/commons\/fonts\/ShinRetro\/font-face.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/code-plus.jp\/gp\/wp-content\/themes\/zaratan\/commons\/fonts\/Mobo\/font-face.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<!-- font\uff1aSans-Serif -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sarap422\/font-lato@0.1.0\/font-face.adjusted.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Jost:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sarap422\/font-hanken-grotesk@1.0.5\/font-face.adjusted.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sarap422\/font-overused-grotesk@1.1.5\/font-face.adjusted.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Google+Sans:wght@400..700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Google+Sans+Flex:wght@1..1000&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Onest:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Hind:wght@300;400;500;600;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto+Flex:wdth,wght@25..151,400..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Zalando+Sans:wght@200..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Stack+Sans+Text:wght@200..700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Elms+Sans:wght@100..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Gothic+A1:wght@300;400;500;600;700;800;900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Raleway:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<!-- font\uff1aCondensed -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sarap422\/font-dinish@1.0.0\/font-face.adjusted.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sarap422\/font-d-din@1.0.0\/font-face.adjusted.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@300;400;500;600;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Special+Gothic+Condensed+One&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto+Condensed:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Gothic:wdth@75..100&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@300;400;500;600;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<!-- font\uff1aSerif -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@300;400;500;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+Pro:wght@300;400;600;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Infant:wght@300;400;500;600;700&display=swap&text=\u00a50123456789!#$%&()-^@[;:],.\/=~|{+*}<>?_`);\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Brygada+1918:wght@400..700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Frank+Ruhl+Libre:wght@300..900&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Libre+Bodoni:wght@300..700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Libre+Caslon+Text:wght@400;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Crimson+Text:wght@300;400;600;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Prata&display=swap&text=\u00a50123456789!#$%&()-^@[;:],.\/=~|{+*}<>?_`);\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@300;400;500;600;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Cardo:wght@400;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Marcellus&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<!-- font\uff1aCursive, Etc -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Dancing+Script:wght@400..700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Waterfall&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Allura&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Tangerine:wght@400;700&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Great+Vibes&display=swap\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<!-- font\uff1aCode, Symbol -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/@sarap422\/font-hackgen@1.0.0\/font-face.css\" media=\"print\" onload='this.media=\"all\"' \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Nanum+Gothic:wght@400;700;800&display=swap&text=\u00a50123456789!#$%&()-^@[;:],.\/=~|{+*}<>?_\uffe3\uff3f\u30fd\u30fe\u309d\u309e\u3003\u4edd\u3005\u3006\u3007\u30fc\u2015\u2010\uff0f\uff3c\uff5e\u2225\uff5c\u2026\u2025''\uff08\uff09\u3014\u3015\uff3b\uff3d\uff5b\uff5d\u3008\u3009\u300a\u300b\u300c\u300d\u300e\u300f\u3010\u3011\uff0b\uff0d\u00b1\u00d7\u00f7\uff1d\u2260\uff1c\uff1e\u2266\u2267\u221e\u2234\u2642\u2640\u00b0\u2032\u2033\u2103\uffe5\uff04\uffe0\uffe1\uff05\uff03\uff06\uff0a\uff20\u00a7\u2606\u2605\u25cb\u25cf\u25ce\u25c7\u25c6\u25a1\u25a0\u25b3\u25b2\u25bd\u25bc\u203b\u3012\u2192\u2190\u2191\u2193\u3013\u2208\u220b\u2286\u2287\u2282\u2283\u222a\u2229\u2227\u2228\u21d2\u21d4\u2200\u2203\u2220\u22a5\u2312\u2202\u2207\u2261\u2252\u226a\u226b\u221a\u223d\u221d\u2235\u222b\u222c\u00c5\u2030\u266f\u266d\u266a\u3251\u3314\u3322\u334d\u3318\u3327\u3303\u3336\u3351\u3357\u330d\u3326\u3323\u332b\u334a\u333b\u2252\u2261\u222b\u222e\u2211\u221a\u22a5\u2220\u221f\u22bf\u2235\u2229\u222a\" media=\"print\" onload='this.media=\"all\"' \/>\r\n\r\n\r\n\r\n\r\n<!-- \u25bc.page -->\r\n<div class=\"pg-saragfntckfk\">\r\n\r\n\r\n<!-- .mezzala\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0a\uff09 -->\r\n<hr class=\"spacer-mezzala\" \/>\r\n\r\n<hr id=\"ch-Partition\" anchor \/>\r\n<header class=\"page-header mx-auto\">\r\n  <!-- \u30d1\u30f3\u304f\u305a\u30ea\u30b9\u30c8 --><div><!-- breadcrumb.php -->\n\n<nav class=\"breadcrumb leckermaul mx-auto py-0.5r\">\n  <ul class=\"breadcrumb-wrapper\">\n    <!-- \u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u8868\u793a -->\n    <li><a href=\"https:\/\/code-plus.jp\/gp\/\"><i><\/i>\u30c8\u30c3\u30d7<\/a><\/li>\n\n          <!-- \u56fa\u5b9a\u30da\u30fc\u30b8\uff08\u305d\u308c\u4ee5\u5916\uff09\uff1a \u5148\u7956\u30da\u30fc\u30b8\u540d\u3068\u3001\u73fe\u5728\u306e\u30da\u30fc\u30b8\u540d\u3092\u8868\u793a -->\n      <li class=\"current_page_item\"><a>HTML\/CSS<\/a><\/li>    <!-- \/\/\/if (is_page()) -->\n\n  <\/ul>\n<\/nav><\/div>\r\n<\/header><!-- \/\/\/.inheader -->\r\n\r\n\r\n\r\n\r\n<!-- .section -->\r\n<section class=\"sect-gfntCkfK-Intro\">\r\n  <div class=\"section__interior mx-auto\">\r\n    <div class=\"hgroup-wrapper\">\r\n      <h2 class=\"hdg-chapter ta-center\">\u304a\u3059\u3059\u3081\u306e Google Fonts<\/h2>\r\n      <p class=\"ta-center\">\uff08\u203bGoogle Fonts \u3067\u306a\u3044\u3082\u306e\u3082\u3061\u3087\u3053\u3061\u3087\u3053\u3042\u308a\u307e\u3059\uff09<\/p>\r\n    <\/div><!-- \/\/\/.hgroup -->\r\n\r\n    <div class=\"chest-wrapper mt-1r\">\r\n      <p class=\"pos-relative\">\r\n        <label for=\"previewText1\" class=\"pin-topLeft pinupA1\">&nbsp;Preview text1&nbsp;<\/label>\r\n        <input id=\"previewText1\" class=\"input w-100p bdrs-999e\" type=\"text\" name=\"previewText1\" value='The most important thing is to \"ENJOY\" your life! -to be Happy-' \/>\r\n      <\/p>\r\n      <p class=\"pos-relative mt-0.5r\">\r\n        <label for=\"previewText2\" class=\"pin-topLeft pinupA1\">&nbsp;Preview text2&nbsp;<\/label>\r\n        <input id=\"previewText2\" class=\"input w-100p bdrs-999e\" type=\"text\" name=\"previewText2\" value='\u543e\u8f29\u306f<dfn>CAT<\/dfn>\u3067\u3042\u308b\u3002\u540d\u524d\u306f\u307e\u3060<dfn>None<\/dfn>\u3002\u4f55\u3067\u3082 <dfn><b class=\"bold\">&0123-456-789!<\/b><\/dfn> \u6ce3\u3044\u3066\u3044\u305f\u4e8b\u3060\u3051\u306f\u8a18\u61b6\u3057\u3066\u3044\u308b\u3002' \/>\r\n      <\/p>\r\n    <\/div><!-- \/\/\/.chest -->\r\n  <\/div><!-- \/\/\/.interior -->\r\n<\/section>\r\n\r\n\r\n\r\n<!-- \u25bc\u76ee\u6b21\r\n-------------------------------------- -->\r\n<div id=\"js-tocVCEA\" class=\"sect-gfntCkfK-Toc\">\r\n  <div class=\"section__interior mx-auto\">\r\n    <!-- \u2193\u3053\u3053\u306bJS\u3067\u76ee\u6b21\u304c\u633f\u5165\u3055\u308c\u307e\u3059 -->\r\n  <\/div>\r\n<\/div>\r\n<!-- \u25b2\/\/\/\u76ee\u6b21 -->\r\n\r\n\r\n\r\n<!-- \u25bcinppend\r\n-------------------------------------- -->\r\n<div id=\"js-apndVCEA\">\r\n  <!-- \u2193\u3053\u3053\u306b\u52d5\u7684\u306b\u751f\u6210\u3055\u308c\u305f\u30b3\u30fc\u30c9\u304c\u633f\u5165\u3055\u308c\u307e\u3059 -->\r\n\r\n<\/div>\r\n\r\n\r\n<!-- template -->\r\n<template id=\"js-tmplVCEA\">\r\n  <ins class=\"templique-insert\">\r\n    <!-- \u3053\u3053\u306b.insertAdjacentHTML('beforeend')\u304c\u633f\u5165\u3055\u308c\u307e\u3059 -->\r\n\r\n  <\/ins>\r\n<\/template>\r\n<!-- \u25b2\/\/\/inppend -->\r\n\r\n\r\n<!-- .Endnote -->\r\n<div class=\"dept-gfntCkfK-Endnote\" style=\"contain-intrinsic-size:1000px;\">\r\n<\/div><!-- \/\/\/.department -->\r\n\r\n\r\n\r\n\r\n<!-- .mediano\uff08\u4f59\u767d\u8abf\u6574\uff1apage\u4e0b\uff09 -->\r\n<hr class=\"spacer-mediano\" \/>\r\n\r\n<\/div><!-- \/\/\/\u25b2.page -->\r\n\r\n\r\n\r\n\r\n<script>\r\n(function () {\r\n  \/\/append-template.js\r\n  let inptVCEAs = Array.prototype.slice.call(document.querySelectorAll(\".input\")); \/\/Arr.NodeList\r\n  let previewText1 = document.querySelector('input[name=\"previewText1\"]').value || 'The most important thing is to \"ENJOY\" your life! -to be Happy-';\r\n  let previewText2 = document.querySelector('input[name=\"previewText2\"]').value || '\u543e\u8f29\u306f<dfn>CAT<\/dfn>\u3067\u3042\u308b\u3002\u540d\u524d\u306f\u307e\u3060<dfn>None<\/dfn>\u3002\u4f55\u3067\u3082 <dfn><b class=\"bold\">&0123-456-789!<\/b><\/dfn> \u6ce3\u3044\u3066\u3044\u305f\u4e8b\u3060\u3051\u306f\u8a18\u61b6\u3057\u3066\u3044\u308b\u3002';\r\n\r\n  \/\/ fontLangs \/ fontNames \u3092\u5916\u5074\u30b9\u30b3\u30fc\u30d7\u306b\u79fb\u52d5\uff08TOC\u3068\u5171\u6709\uff09\r\n  const fontLangs = [\r\n`ja-GP`, `ja-HiraGP`, `ja-YuGP`, `ja-NotoGP`, `ja-LatoGP`, `ja-M1GP`, `ja-BizGP`, `ja-GensVGP`, `en-JostGP`, `en-KumbGP`, `en-LatoGP`, `en-HankGP`, `en-OverGP`, `en-PopGP`, `en-SrcGP`, `en-GgleGP`, `en-GgleFGP`, `en-NoblGP`, `en-UrbnGP`, `en-OnesGP`, `en-HindGP`, `en-RoboFGP`, `en-SpecFGP`, `en-ZalaGP`, `en-StackGP`, `en-ElmsGP`, `en-A1GP`, `en-OfitGP`, `en-MontGP`, `en-RaleGP`, `en-DDinGP`, `en-DiniCN`, `en-OswaCN`, `en-BebaCN`, `en-RoboCN`, `en-SpecCN`, `en-LeagCN`, `en-BarlCN`, `ja-ShipMP`, `ja-ShipOMP`, `ja-NotoMP`, `ja-BizMP`, `en-CinzMP`, `en-SrcMP`, `en-RuhlMP`, `en-BaskMP`, `en-BodoMP`, `en-CaslMP`, `en-CrimMP`, `en-CormMP`, `en-PrFrMP`, `en-CardMP`, `en-MarcMP`, `en-DancCS`, `en-WateCS`, `en-AlluCS`, `en-TangCS`, `en-VibeCS`, `ja-M1RP`, `ja-LineRP`, `ja-MoboRP`, `ja-SRetRP`, `ja-HackGP`, `ja-NotoMonoGP`, `ja-NanuGP`\r\n  ];\r\n\r\n  const fontNames = [\r\n`ja-GP`, `\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4\u30b7\u30c3\u30af`, `\u6e38\u30b4\u30b7\u30c3\u30af`, `Noto Sans`, `Lato`, `M PLUS 1`, `BIZ UDPGothic`, `Gen Shin Gothic`, `Jost`, `Kumbh Sans`, `Lato`, `Hanken Grotesk`, `Overused Grotesk`, `YakuHanJP,Poppins`, `Source Sans Pro`, `Google Sans`, `Google Sans Flex`, `Nobel, Urbanist`, `Urbanist`, `Onest`, `Hind`, `Roboto Flex`, `Special Gothic`, `Zalando Sans`, `Stack Sans Text`, `Elms Sans`, `Gothic A1`, `Outfit`, `Montserrat`, `Raleway`, `D-DIN-PRO`, `Dinish Condensed`, `Oswald`, `Bebas Neue`, `Roboto Condensed`, `Special Gothic Condensed One`, `League Gothic`, `Barlow Condensed`, `Shippori Mincho`, `Shippori Mincho OTF`, `Noto Serif`, `BIZ UDPMincho`, `Cinzel`, `Source Serif Pro`, `Frank Ruhl Libre`, `Libre Baskerville`, `Libre Bodoni`, `Libre Caslon Text`, `Crimson Text`, `Cormorant Garamond`, `Playfair Display`, `Cardo`, `Marcellus`, `Dancing Script`, `Waterfall`, `Allura`, `Tangerine`, `Great Vibes`, `M PLUS Rounded 1c`, `LINE Seed JP_OTF`, `\u30e2\u30dc-Regular`, `Shin Retro Maru Gothic`, `HackGen`, `Noto Sans Mono CJK JP`, `Nanum Gothic`\r\n  ];\r\n\r\n  \/\/ ====================================\r\n  \/\/ \u76ee\u6b21\u751f\u6210\uff08DOMContentLoaded \u30671\u56de\u306e\u307f\uff09\r\n  \/\/ ====================================\r\n  function fnApndTocVCEA() {\r\n    const tocWrap = document.querySelector('#js-tocVCEA .section__interior');\r\n    if (!tocWrap) return;\r\n\r\n    const items = fontLangs.map((lang, i) =>\r\n      `<li class=\"slide\"><a class=\"button is-outlined\" href=\"#${lang}\">${fontNames[i]}<\/a><\/li>`\r\n    ).join('\\n');\r\n\r\n    tocWrap.innerHTML = `\r\n<nav class=\"gfntCkfK-toc-nav\">\r\n<ul class=\"shelf-wrapper\">\r\n${items}\r\n<\/ul>\r\n<\/nav>`;\r\n  }\r\n\r\n  function fnApndTmplVCEA() {\r\n    let apndVCEA = document.querySelector(\"#js-apndVCEA\"); \/\/HTMLElement\r\n    let tmplVCEA = document.querySelector(\"#js-tmplVCEA\");\r\n    let frmtVCEA = document.createDocumentFragment();\r\n\r\n    \/\/ Clear existing content\r\n    apndVCEA.innerHTML = '';\r\n\r\n    const fontFamilies = [\r\n`font-family: \"YakuHanJP\", \"Roboto\", \"Kumbh Sans\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", var(--ff-hiragp), var(--ff-gothic);`, \r\n`font-family: \"\u6e38\u30b4\u30b7\u30c3\u30af\u4f53\", \"YuGothic\", \"\u6e38\u30b4\u30b7\u30c3\u30af\", \"Yu Gothic\", sans-serif;`, \r\n`font-family: \"YakuHanJP\", \"Roboto\", \"Noto Sans\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Roboto\", \"Lato\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Lato\", \"M PLUS 1\", sans-serif;`, \r\n`font-family: \"YakuHanJP\", \"Roboto\", \"BIZ UDPGothic\", sans-serif;`, \r\n`font-family: \"YakuHanJP\", \"Gen Shin Gothic\", sans-serif;`, \r\n`font-family: \"YakuHanJP\", \"Jost\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Kumbh Sans\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Lato\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Hanken Grotesk\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Overused Grotesk\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\",\"Poppins\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Source Sans Pro\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Google Sans\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Google Sans Flex\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Nobel\", \"Urbanist\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Urbanist\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Onest\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Hind\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Roboto Flex\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Special Gothic\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Zalando Sans\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Stack Sans Text\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Elms Sans\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Gothic A1\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Outfit\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Montserrat\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Raleway\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"D-DIN-PRO\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Dinish Condensed\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Oswald\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Bebas Neue\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Roboto Condensed\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Special Gothic Condensed One\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"League Gothic\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanJP\", \"Barlow Condensed\", var(--ff-gothic);`, \r\n`font-family: \"YakuHanMP\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Noto Serif\", \"Noto Serif JP\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Shippori Mincho B1\", \"BIZ UDPMincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Cinzel\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Source Serif Pro\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Frank Ruhl Libre\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Libre Baskerville\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Libre Bodoni\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Libre Caslon Display\", \"Libre Caslon Text\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Crimson Text\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Cormorant Infant\", \"Cormorant Garamond\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Prata\", \"Playfair Display\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Cardo\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Marcellus\", \"Shippori Mincho OTF\", \"Shippori Mincho\", serif;`, \r\n`font-family: \"YakuHanMP\", \"Dancing Script\", cursive;`, \r\n`font-family: \"YakuHanMP\", \"Waterfall\", cursive;`, \r\n`font-family: \"YakuHanMP\", \"Allura\", cursive;`, \r\n`font-family: \"YakuHanMP\", \"Tangerine\", cursive;`, \r\n`font-family: \"YakuHanMP\", \"Great Vibes\", cursive;`, \r\n`font-family: \"YakuHanRP\", \"M PLUS Rounded 1c\", sans-serif;`, \r\n`font-family: \"YakuHanRP\", \"LINE Seed JP_OTF\", sans-serif;`, \r\n`font-family: \"YakuHanRP\", \"\u30e2\u30dc-Regular\", sans-serif;`, \r\n`font-family: \"YakuHanRP\", \"Shin Retro Maru Gothic\", sans-serif;`, \r\n`font-family: \"HackGen\", var(--ff-monospace);`, \r\n`font-family: \"Noto Sans Mono CJK JP\", monospace;`, \r\n`font-family: \"Nanum Gothic\", monospace;`\r\n    ];\r\n\r\n    fontLangs.forEach((fontLang, index) => {\r\n      let clonVCEA = tmplVCEA.content.cloneNode(true); \/\/template\u3092\u8907\u88fd\r\n      let fontFamily = fontFamilies[index];\r\n      let fontName = fontNames[index];\r\n      clonVCEA.querySelector(\".templique-insert\").insertAdjacentHTML('beforeend', `\r\n<!-- .section -->\r\n<hr id=\"${fontLang}\" anchor \/>\r\n<section lang=\"${fontLang}\" class=\"sect-gfntCkfK-Font\">\r\n<div class=\"section__interior mx-auto\">\r\n<div class=\"hgroup-wrapper\">\r\n<h3 class=\"fz-md c-text-600\">${fontFamily}<\/h3>\r\n<\/div><!-- \/\/\/.hgroup -->\r\n<ul class=\"carton-wrapper cartonA\">\r\n<li class=\"slide bd-bottom fw-300\">\r\n<h4 class=\"fz-sm\">Light 300<\/h4>\r\n<p class=\"fz-sol fw-300\">${previewText1}<\/p>\r\n<p class=\"c-text-700 fw-300\">${previewText2}<\/p>\r\n<\/li>\r\n<li class=\"slide bd-bottom fw-400\">\r\n<h4 class=\"fz-sm\">Regular 400<\/h4>\r\n<p class=\"fz-sol fw-400\">${previewText1}<\/p>\r\n<p class=\"c-text-700 fw-400\">${previewText2}<\/p>\r\n<\/li>\r\n<li class=\"slide bd-bottom fw-500\">\r\n<h4 class=\"fz-sm\">Medium 500<\/h4>\r\n<p class=\"fz-sol fw-500\">${previewText1}<\/p>\r\n<p class=\"c-text-700 fw-500\">${previewText2}<\/p>\r\n<\/li>\r\n<li class=\"slide bd-bottom fw-600\">\r\n<h4 class=\"fz-sm\">SemiBold 600<\/h4>\r\n<p class=\"fz-sol fw-600\">${previewText1}<\/p>\r\n<p class=\"c-text-700 fw-600\">${previewText2}<\/p>\r\n<\/li>\r\n<li class=\"slide bd-bottom fw-700\">\r\n<h5 class=\"fz-sm mb-1r\">Bold 700<\/h5>\r\n<h3 class=\"fz-sol fw-700\">${previewText1}<\/h3>\r\n<p class=\"c-text-700 fw-700\">${previewText2}<\/p>\r\n<\/li>\r\n<\/ul><!-- \/\/\/.carton -->\r\n<\/div><!-- \/\/\/.interior -->\r\n<\/section>\r\n`);\r\n      frmtVCEA.appendChild(clonVCEA); \/\/fragment\u306b\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u907f\u3051\u308b\r\n    });\r\n    apndVCEA.appendChild(frmtVCEA); \/\/\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u51e6\u7406\u306f\u3053\u3053\u3060\u3051\r\n  }; \/\/\/fnApndTmplVCEA;\r\n\r\n  \/\/DOM\u30ed\u30fc\u30c9\u306e\u30a4\u30d9\u30f3\u30c8\u547c\u3073\u51fa\u3057\r\n  window.addEventListener('DOMContentLoaded', function (e) {\r\n    fnApndTocVCEA(); \/\/ \u76ee\u6b21\u306f1\u56de\u3060\u3051\u751f\u6210\r\n    fnApndTmplVCEA();\r\n  });\r\n\r\n  \/\/\u30a4\u30f3\u30d7\u30c3\u30c8\u6642\u306e\u30a4\u30d9\u30f3\u30c8\uff0f\u30a4\u30d9\u30f3\u30c8\u547c\u3073\u51fa\u3057\r\n  let fnForInptVCEA = function () {\r\n    for (let n = 0; n < inptVCEAs.length; n++) {\r\n      inptVCEAs[n].addEventListener('input', function (e) {\r\n        previewText1 = document.querySelector('input[name=\"previewText1\"]').value || 'The most important thing is to \"ENJOY\" your life! -to be Happy-';\r\n        previewText2 = document.querySelector('input[name=\"previewText2\"]').value || '\u543e\u8f29\u306f<dfn>CAT<\/dfn>\u3067\u3042\u308b\u3002\u540d\u524d\u306f\u307e\u3060<dfn>None<\/dfn>\u3002\u4f55\u3067\u3082 <dfn><b class=\"bold\">&0123-456-789!<\/b><\/dfn> \u6ce3\u3044\u3066\u3044\u305f\u4e8b\u3060\u3051\u306f\u8a18\u61b6\u3057\u3066\u3044\u308b\u3002';\r\n        fnApndTmplVCEA(); \/\/ Re-generate content\r\n      });\r\n    };\r\n  }(); \/\/\/Event('input');\r\n})(); \/\/\/function();\r\n<\/script>","protected":false},"excerpt":{"rendered":"\u304a\u3059\u3059\u3081\u306e Google Fonts \uff08\u203bGoogle Fonts \u3067\u306a\u3044\u3082\u306e\u3082\u3061\u3087\u3053\u3061\u3087\u3053\u3042\u308a\u307e\u3059\uff09 &nbsp;Preview text1&nbsp; &nbsp;Preview text2&nbsp;","protected":false},"author":1,"featured_media":11649,"parent":0,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":{"0":"post-9366","1":"page","2":"type-page","3":"status-publish","4":"has-post-thumbnail","6":"category-html-css"},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/9366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=9366"}],"version-history":[{"count":10,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/9366\/revisions"}],"predecessor-version":[{"id":11696,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/pages\/9366\/revisions\/11696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/11649"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=9366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=9366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=9366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}