{"id":874,"date":"2011-07-03T11:51:09","date_gmt":"2011-07-03T08:51:09","guid":{"rendered":"http:\/\/jml.kapsi.fi\/jussi\/?p=874"},"modified":"2019-01-15T09:14:15","modified_gmt":"2019-01-15T07:14:15","slug":"googlen-web-fontit","status":"publish","type":"post","link":"https:\/\/jml.kapsi.fi\/jussi\/2011\/07\/03\/googlen-web-fontit\/","title":{"rendered":"Googlen web-fontit"},"content":{"rendered":"<p>Webdesignereiden perinteinen riesa on www-sivujen ulkoasun ja sivunrakennustekniikoiden ristiriita; HTML ja CSS eiv\u00e4t luonnostaan tarjoa riitt\u00e4vi\u00e4 mahdollisuuksia sivujen ulkoasujen visiuaaliseen esitt\u00e4miseen. My\u00f6s k\u00e4ytett\u00e4viss\u00e4 oleva fonttivalikoima on varsin rajoittunut riippuvainen k\u00e4ytt\u00e4jien konelle asennettua oleviin fontteihin. Fonttirajoitusta on pyritty kiert\u00e4m\u00e4\u00e4n erilaisilla tekniikoilla. Nyt Google on julkaissut oman ratkaisunsa fonttiongelmaan.<\/p>\n<p><!--more--><\/p>\n<p><a href=\"http:\/\/www.google.com\/webfonts\/\">Google Web Fonts<\/a> tarjoaa erinomaisen <a href=\"http:\/\/www.google.com\/webfonts\/v2\">fonttiselaimen<\/a>, jonka avulla on mahdollista selata l\u00e4hes kahtasataa vapasti k\u00e4ytett\u00e4v\u00e4\u00e4 fonttia.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/jml.kapsi.fi\/jussi\/wp-content\/uploads\/2011\/07\/Google_Web_Fonts1-550x302.png\" alt=\"Googlen Web-fontit\" title=\"Google Web Fonts\" width=\"550\" height=\"302\" class=\"aligncenter size-medium wp-image-879\" srcset=\"https:\/\/jml.kapsi.fi\/jussi\/wp-content\/uploads\/2011\/07\/Google_Web_Fonts1-550x302.png 550w, https:\/\/jml.kapsi.fi\/jussi\/wp-content\/uploads\/2011\/07\/Google_Web_Fonts1.png 885w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/p>\n<p>Fonttikirjastosta voi valita suosikkifontteja omaan kokoelmaansa ja fonttien k\u00e4ytt\u00e4minen omilla www-sivuilla on helppoa. Fontti liitet\u00e4\u00e4n sivulle yhdell\u00e4 &lt;head&gt; -osioon m\u00e4\u00e4ritelt\u00e4v\u00e4ll\u00e4 linkill\u00e4, CSS-importilla tai Javascriptill\u00e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/jml.kapsi.fi\/jussi\/wp-content\/uploads\/2011\/07\/Google_Web_Fonts_include1-550x141.png\" alt=\"Googlen Web-fontti - lis\u00e4yslinkki\" title=\"Google_Web_Fonts_include\" width=\"550\" height=\"141\" class=\"aligncenter size-medium wp-image-880\" srcset=\"https:\/\/jml.kapsi.fi\/jussi\/wp-content\/uploads\/2011\/07\/Google_Web_Fonts_include1-550x141.png 550w, https:\/\/jml.kapsi.fi\/jussi\/wp-content\/uploads\/2011\/07\/Google_Web_Fonts_include1.png 694w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/p>\n<p>Kokelin tekniikkaa omalla <a href=\"http:\/\/jml.kapsi.fi\/jussi\/portfolio\/\">k\u00e4yntikorttisivullani<\/a> ja se tuntuu toimivan oikein mukavasti. K\u00e4ytt\u00f6\u00f6notto meni n\u00e4in:<\/p>\n<h2>Googlen Web-fonttien k\u00e4ytt\u00f6\u00f6notto<\/h2>\n<p>Ensiksi etsin fonttiselaimella sopivan fontin, jonka upotuslinkin lis\u00e4sin sivun <code class=\"language-markup\">&lt;head&gt;<\/code> -osioon:<\/p>\n<pre>\r\n<code class=\"language-markup\">&lt;head&gt; \r\n&lt;link href='http:\/\/fonts.googleapis.com\/css?family=Quattrocento&v2' rel='stylesheet' type='text\/css'&gt;<\/code>\r\n<\/pre>\n<p>Sen j\u00e4lkeen lis\u00e4sin fontin sivun CSS-m\u00e4\u00e4rityksiin:<\/p>\n<pre><code class=\"language-css\">font-family: 'Quattrocento', georgia, serif;<\/code><\/pre>\n<p>Siin\u00e4 kaikki :)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Webdesignereiden perinteinen riesa on www-sivujen ulkoasun ja sivunrakennustekniikoiden ristiriita; HTML ja CSS eiv\u00e4t luonnostaan tarjoa riitt\u00e4vi\u00e4 mahdollisuuksia sivujen ulkoasujen visiuaaliseen esitt\u00e4miseen. My\u00f6s k\u00e4ytett\u00e4viss\u00e4 oleva fonttivalikoima on varsin rajoittunut riippuvainen k\u00e4ytt\u00e4jien konelle asennettua oleviin fontteihin. Fonttirajoitusta on pyritty kiert\u00e4m\u00e4\u00e4n erilaisilla tekniikoilla. Nyt Google on julkaissut oman ratkaisunsa fonttiongelmaan.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,559,4,25],"tags":[135,30,134,133],"class_list":["post-874","post","type-post","status-publish","format-standard","hentry","category-artikkeli","category-design","category-verkkojulkaiseminen","category-web","tag-css","tag-google","tag-html","tag-web-fonts"],"_links":{"self":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/posts\/874","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/comments?post=874"}],"version-history":[{"count":12,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/posts\/874\/revisions"}],"predecessor-version":[{"id":2365,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/posts\/874\/revisions\/2365"}],"wp:attachment":[{"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/media?parent=874"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/categories?post=874"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jml.kapsi.fi\/jussi\/wp-json\/wp\/v2\/tags?post=874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}