{"id":840,"date":"2014-06-17T11:34:00","date_gmt":"2014-06-17T02:34:00","guid":{"rendered":"http:\/\/www.dream-net.org\/blog\/?p=840"},"modified":"2014-06-17T11:34:00","modified_gmt":"2014-06-17T02:34:00","slug":"%e3%80%90%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%80%91%e3%80%8cgoogle-web-fonts%e3%80%8d%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9","status":"publish","type":"post","link":"https:\/\/dream-net.org\/blog\/?p=840","title":{"rendered":"\u3010\u30d5\u30a9\u30f3\u30c8\u3011\u300cGoogle Web fonts\u300d\u306e\u4f7f\u3044\u65b9"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#Google_Web_fonts\"><span class=\"toc_number toc_depth_1\">1<\/span> \u3010\u30d5\u30a9\u30f3\u30c8\u3011\u4eca\u3055\u3089\u805e\u3051\u306a\u3044\u300cGoogle Web fonts\u300d\u306e\u4f7f\u3044\u65b9<\/a><\/li><li><a href=\"#1\"><span class=\"toc_number toc_depth_1\">2<\/span> 1.\u597d\u304d\u306a\u30d5\u30a9\u30f3\u30c8\u3092\u9078\u3076<\/a><\/li><li><a href=\"#2\"><span class=\"toc_number toc_depth_1\">3<\/span> 2.\u30e9\u30a4\u30bb\u30f3\u30b9\u3092\u78ba\u8a8d<\/a><\/li><li><a href=\"#2-2\"><span class=\"toc_number toc_depth_1\">4<\/span> 2.\u30da\u30fc\u30b8\u306b\u7d44\u307f\u8fbc\u3080<\/a><\/li><li><a href=\"#i\"><span class=\"toc_number toc_depth_1\">5<\/span> \u5b8c\u6210<\/a><\/li><\/ul><\/div>\n<h2 style=\"color: #0083b9; background: #fffd73;\"><span id=\"Google_Web_fonts\">\u3010\u30d5\u30a9\u30f3\u30c8\u3011\u4eca\u3055\u3089\u805e\u3051\u306a\u3044\u300cGoogle Web fonts\u300d\u306e\u4f7f\u3044\u65b9<\/span><\/h2>\n<p>\u30d1\u30bd\u30b3\u30f3\u306b\u30d5\u30a9\u30f3\u30c8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u306a\u304f\u3066\u3082\u3001\u597d\u307f\u306e\u30d5\u30a9\u30f3\u30c8\u3092\u30b5\u30a4\u30c8\u4e0a\u3067\u8868\u793a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308bWeb\u30d5\u30a9\u30f3\u30c8\u3002\u6700\u8fd1\u306f\u305a\u3044\u3076\u3093\u7a2e\u985e\u3082\u5897\u3048\u3001\u3053\u308c\u307e\u3067\u753b\u50cf\u3067\u5bfe\u5fdc\u3057\u3066\u304d\u305f\u30af\u30fc\u30eb\u306a\u30d5\u30a9\u30f3\u30c8\u3092\u3001\u30c6\u30ad\u30b9\u30c8\u3067\u5b9f\u73fe\u3055\u305b\u3066\u3044\u308b\u30b5\u30a4\u30c8\u3082\u591a\u304f\u306a\u3063\u3066\u304d\u307e\u3057\u305f\u3002<br \/>\n\u4e2d\u3067\u3082\u3001Google\u304c\u63d0\u4f9b\u3059\u308bWeb fonts\u306f\u7a2e\u985e\u304c\u8c4a\u5bcc\u3002\u30a2\u30ab\u30a6\u30f3\u30c8\u767b\u9332\u306e\u5fc5\u8981\u3082\u306a\u304f\u3001\u5546\u7528\u30fb\u975e\u5546\u7528\u3068\u3082\u306b\u7121\u511f\u3067\u5229\u7528\u3067\u304d\u308b\u3068\u3044\u3046\u3042\u308a\u304c\u305f\u3044\u3082\u306e\u3067\u3059\u3002<br \/>\n\u4eca\u56de\u306fWeb\u30d5\u30a9\u30f3\u30c8\u3092\u307e\u3060\u4f7f\u3063\u305f\u3053\u3068\u304c\u306a\u3044\u3001\u3068\u3044\u3046\u65b9\u306b\u3001\u3053\u306e\u300cGoogle Web fonts\u300d\u306e\u4f7f\u3044\u65b9\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<h2 style=\"color: #0083b9; background: #fffd73;\"><span id=\"1\">1.\u597d\u304d\u306a\u30d5\u30a9\u30f3\u30c8\u3092\u9078\u3076<\/span><\/h2>\n<p>Google Web fonts\u3067\u3001\u30d5\u30a9\u30f3\u30c8\u3092\u9078\u3073\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/www.google.com\/fonts\" target=\"_blank\">https:\/\/www.google.com\/fonts<\/a> \u53f3\u5074\u306b\u306f\u30b5\u30f3\u30d7\u30eb\u304c\u8868\u793a\u3055\u308c\u3066\u304a\u308a\u3001\u4e0a\u90e8\u306e\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u306b\u6587\u5b57\u3092\u5165\u529b\u3059\u308b\u3068\u3001\u305d\u306e\u6587\u5b57\u304c\u30b5\u30f3\u30d7\u30eb\u306b\u53cd\u6620\u3055\u308c\u307e\u3059\u3002 <img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/013.jpg\" alt=\"\" \/><\/p>\n<p>\u5de6\u30e1\u30cb\u30e5\u30fc\u3067\u306f\u300cSerif Sans\u300d\u300cSerif\u300d\u306a\u3069\u66f8\u4f53\u3092\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u3067\u9078\u629e\u53ef\u80fd\u3002\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u52d5\u304b\u305b\u3070\u30d5\u30a3\u30eb\u30bf\u30fc\u3092\u304b\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u306e\u3067\u3001\u597d\u307f\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u7c21\u5358\u306b\u691c\u7d22\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30fbThickness\u3000\u592a\u3055<br \/>\n\u30fbSlant \u659c\u4f53<br \/>\n\u30fbWidth \u6587\u5b57\u9593<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/022.jpg\" alt=\"\" \/><\/p>\n<p>\u30b5\u30f3\u30d7\u30eb\u306e\u53f3\u4e0b\u306b\u4e26\u30763\u3064\u306e\u30dc\u30bf\u30f3\u306e\u3046\u3061\u3001\u4e00\u756a\u5de6\u7aef\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u305d\u306e\u30d5\u30a9\u30f3\u30c8\u306e\u5168\u3066\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u898b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/032.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"color: #0083b9; background: #fffd73;\"><span id=\"2\">2.\u30e9\u30a4\u30bb\u30f3\u30b9\u3092\u78ba\u8a8d<\/span><\/h2>\n<p>3\u3064\u306e\u30dc\u30bf\u30f3\u306e\u3046\u3061\u3001\u53f3\u7aef\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u305d\u306e\u30d5\u30a9\u30f3\u30c8\u306e\u8a73\u7d30\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30e9\u30a4\u30bb\u30f3\u30b9\u60c5\u5831\u3082\u3053\u3053\u306b\u66f8\u304b\u308c\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u78ba\u8a8d\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/042.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"color: #0083b9;\"><span id=\"2-2\">2.\u30da\u30fc\u30b8\u306b\u7d44\u307f\u8fbc\u3080<\/span><\/h2>\n<p>\u30d5\u30a9\u30f3\u30c8\u304c\u6c7a\u5b9a\u3057\u305f\u3089\u30013\u3064\u306e\u30dc\u30bf\u30f3\u306e\u3046\u3061\u3001\u771f\u3093\u4e2d\u3092\u30af\u30ea\u30c3\u30af\u3002<br \/>\n\u3053\u3053\u3067\u30d5\u30a9\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u6c7a\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/052.jpg\" alt=\"\" \/><\/p>\n<p><strong>\u2460\u66f8\u4f53\u3092\u9078\u3073\u307e\u3057\u3087\u3046\u3002<\/strong><br \/>\n\u300c1. Choose the styles you want:\u300d\u306b\u3042\u308b\u66f8\u4f53\u306b\u30c1\u30a7\u30c3\u30af\u3092\u5165\u308c\u3066\u3001\u9078\u629e\u3057\u307e\u3059\u3002<br \/>\n\u53f3\u5074\u306b\u30b5\u30f3\u30d7\u30eb\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u53c2\u8003\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u7a2e\u985e\u3068\u3057\u3066\u306f\u300c\u30ce\u30fc\u30de\u30eb\u300d\u300c\u30ce\u30fc\u30de\u30eb\u659c\u4f53\u300d\u300c\u592a\u5b57\u300d\u300c\u592a\u5b57\u659c\u4f53\u300d\u306a\u3069\u3002<br \/>\n\u305f\u3060\u3057\u3001\u30d5\u30a9\u30f3\u30c8\u306b\u3088\u3063\u3066\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u66f8\u4f53\u306e\u6570\u306f\u7570\u306a\u308a\u307e\u3059\u306e\u3067\u3001\uff11\u7a2e\u985e\u3057\u304b\u306a\u3044\u5834\u5408\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n<p><strong>\u2461\u4f7f\u3044\u305f\u3044\u6587\u5b57\u306e\u7a2e\u985e\u3092\u9078\u629e\u3057\u307e\u3059\u3002<\/strong><br \/>\n\u300cChoose the character sets you want:\u300d\u3067\u6587\u5b57\u306e\u7a2e\u985e\u3092\u9078\u629e\u3057\u307e\u3059\u3002<br \/>\n\u3053\u3061\u3089\u3082\u30d5\u30a9\u30f3\u30c8\u306b\u3088\u3063\u3066\u7570\u306a\u308a\u307e\u3059\u304c\u3001Latin\uff08\u30e9\u30c6\u30f3\u6587\u5b57\uff09\u3001Greek\uff08\u30ae\u30ea\u30b7\u30e3\u6587\u5b57\uff09\u3001Cyrillic\uff08\u30ad\u30ea\u30eb\u6587\u5b57\uff09\u306a\u3069\u304b\u3089\u9078\u629e\u53ef\u80fd\u3002Latin\uff08\u30e9\u30c6\u30f3\u6587\u5b57\uff09\u3057\u304b\u306a\u3044\u30d5\u30a9\u30f3\u30c8\u3082\u305f\u304f\u3055\u3093\u3042\u308a\u307e\u3059\u304c\u3001\u901a\u5e38\u306fLatin\u306e\u307f\u3067\u554f\u984c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<p><strong>\u2462\u30da\u30fc\u30b8\u306b\u7d44\u307f\u8fbc\u3080<\/strong><br \/>\n\u30da\u30fc\u30b8\u4e2d\u307b\u3069\u306e\u300cAdd this code to your website\u300d\u306e\u30b3\u30fc\u30c9\u3092head\u30bf\u30b0\u5185\u306b\u8cbc\u4ed8\u3051\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/062.jpg\" alt=\"\" \/><\/p>\n<p>\u3061\u306a\u307f\u306b\u3001HTML\u5185\u3067\u306f\u306a\u304f\u3001CSS\u306bimport\u3067\u30d5\u30a9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u305f\u3044\u5834\u5408\u306f\u3001<br \/>\n\u4e0a\u90e8\u306e\u30bf\u30d6@import\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u8868\u793a\u3055\u308c\u305f\u30bd\u30fc\u30b9\u3092CSS\u306b\u30b3\u30d4\u30fc\uff06\u30da\u30fc\u30b9\u30c8\u3059\u308c\u3070OK\u3002<br \/>\n\u540c\u69d8\u306b\u3001JavaScript\u3067\u306e\u633f\u5165\u3082\u30b3\u30d4\u30da\u3067\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/072.jpg\" alt=\"\" \/><\/p>\n<p>\u2463CSS\u3092\u66f8\u304f<br \/>\n\u300c4.Integrate the fonts into your CSS:\u300d\u306e\u30b3\u30fc\u30c9\u3092\u30b3\u30d4\u30fc\u3057\u3066\u3001CSS\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<br \/>\n\u66f8\u304d\u65b9\u3084\u4f7f\u7528\u4f8b\u3082\u6559\u3048\u3066\u304f\u308c\u3066\u3044\u3066\u3001\u89aa\u5207\u3067\u3059\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/082.jpg\" alt=\"\" \/><\/p>\n<h2 style=\"color: #0083b9; background: #fffd73;\"><span id=\"i\">\u5b8c\u6210<\/span><\/h2>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/06\/092.jpg\" alt=\"\" \/><\/p>\n<pre id=\"line1\">&lt;!doctype html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\"UTF-8\"&gt;\r\n&lt;title&gt; Google Web Fonts\u306e\u30c7\u30e2\u30da\u30fc\u30b8&lt;\/title&gt;\r\n&lt;link href='<a href=\"view-source:http:\/\/fonts.googleapis.com\/css?family=Alegreya:700,900\">http:\/\/fonts.googleapis.com\/css?family=Alegreya:700,900<\/a>' rel='stylesheet' type='text\/css'&gt;  &lt;link href='<a href=\"view-source:http:\/\/fonts.googleapis.com\/css?family=IM+Fell+Great+Primer:400italic\">http:\/\/fonts.googleapis.com\/css?family=IM+Fell+Great+Primer:400italic<\/a>' rel='stylesheet' type='text\/css'&gt;\r\n&lt;style type=\"text\/css\"&gt;\r\n#container{\r\nwidth:640px;\r\nmargin:100px auto 100px auto;\r\n}\r\np.font01{\r\nfont-family: 'Alegreya', serif;\r\nfont-size:40px;\r\n} \r\np.font02{\r\nfont-family: 'IM Fell Great Primer', serif;\r\nfont-size:20px;\r\nline-height:26px;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id=\"container\"&gt;\r\n&lt;p class=\"font01\"&gt;Try Web Fonts!&lt;\/p&gt;\r\n&lt;p class=\"font02\"&gt;Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the &amp;lt;font&amp;gt; tag in 1995, which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities.    The CSS2 specification was released in 1998 and attempted to improve the font selection process by adding font matching, synthesis and download. These techniques did not gain much use, and were removed in the CSS2.1 specification. However, Internet Explorer added support for the font downloading feature in version 4.0, released in 1997.[1] Font downloading was later included in the CSS3 fonts module, and has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has subsequently increased interest in Web typography, as well as the usage of font downloading.&lt;\/p&gt;  &lt;p class=\"font01\"&gt;\uff08wikipedia\uff09\r\n&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Contents1 \u3010\u30d5\u30a9\u30f3\u30c8\u3011\u4eca\u3055\u3089\u805e\u3051\u306a\u3044\u300cGoogle Web fonts\u300d\u306e\u4f7f\u3044\u65b92 1.\u597d\u304d\u306a\u30d5\u30a9\u30f3\u30c8\u3092\u9078\u30763 2.\u30e9\u30a4\u30bb\u30f3\u30b9\u3092\u78ba\u8a8d4 2.\u30da\u30fc\u30b8\u306b\u7d44\u307f\u8fbc\u30805 \u5b8c\u6210 \u3010\u30d5\u30a9\u30f3\u30c8\u3011\u4eca\u3055\u3089\u805e\u3051\u306a\u3044\u300cGoogle W [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":847,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45,8],"tags":[],"class_list":["post-840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","category-8"],"_links":{"self":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=840"}],"version-history":[{"count":2,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/840\/revisions"}],"predecessor-version":[{"id":853,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/840\/revisions\/853"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/media\/847"}],"wp:attachment":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}