{"id":921,"date":"2014-09-09T10:46:38","date_gmt":"2014-09-09T08:46:38","guid":{"rendered":"http:\/\/hesmid.nl\/test\/?p=921"},"modified":"2016-01-20T13:01:38","modified_gmt":"2016-01-20T12:01:38","slug":"fonts","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/fonts\/","title":{"rendered":"Fonts"},"content":{"rendered":"<p>Source:\u00a0<a href=\"http:\/\/www.awwwards.com\/20-best-web-fonts-from-google-web-fonts-and-font-face.html%20\">awwwards.com\/20-best-web-fonts-from-google-web-fonts-and-font-face<\/a><\/p>\n<p>Basically, there are two implementation models:<\/p>\n<p><strong><a href=\"http:\/\/www.awwwards.com\/20-best-web-fonts-from-google-web-fonts-and-font-face.html#services\">1. Web font embedding services<\/a><\/strong><\/p>\n<p><strong><a href=\"http:\/\/www.awwwards.com\/20-best-web-fonts-from-google-web-fonts-and-font-face.html#fontface\">2. Embedding fonts using the @font-face rule<\/a><\/strong><\/p>\n<h3 class=\"custom_post_h3\">Web font embedding services<\/h3>\n<p>Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers.\u00a0One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase.<!--more--><\/p>\n<p><strong>Implementation<\/strong><\/p>\n<p>1. Choose a font. You can add it to your collection or use \u201cquick-use\u201d to generate the code and options for that font.<\/p>\n<p>2. Copy and paste the code generated into your &lt;Head&gt;.<\/p>\n<pre class=\"dontquote prettyprint\">  &lt;head&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\"   href=\"<a class=\"linkification-ext\" title=\"Linkification: http:\/\/fonts.googleapis.com\/css?family=Tangerine\" href=\"http:\/\/fonts.googleapis.com\/css?family=Tangerine\">http:\/\/fonts.googleapis.com\/css?family=Tangerine<\/a>\"&gt;\r\n  &lt;\/head&gt;\r\n<\/pre>\n<p>Or import into your css stylesheet:<\/p>\n<pre class=\"dontquote prettyprint\">@import url(<a class=\"linkification-ext\" title=\"Linkification: http:\/\/fonts.googleapis.com\/css?family=Tangerine\" href=\"http:\/\/fonts.googleapis.com\/css?family=Tangerine\">http:\/\/fonts.googleapis.com\/css?family=Tangerine<\/a>);<\/pre>\n<p>3. The font is now accessible in your CSS code<\/p>\n<pre class=\"prettyprint\">      body {\r\n        font-family: 'Tangerine', serif;\r\n        font-size: 48px;\r\n      }\r\n<\/pre>\n<p><strong>Advanced url construction:<\/strong><\/p>\n<ul>\n<li>base URL:\n<pre>http:\/\/fonts.googleapis.com\/css<\/pre>\n<\/li>\n<\/ul>\n<ul>\n<li>add family parameter.<br \/>\nNote: replace spaces with + sign<\/p>\n<pre>http:\/\/fonts.googleapis.com\/css?family=Droid+Sans<\/pre>\n<\/li>\n<\/ul>\n<ul>\n<li>Separate multiple font families with a pipeline (|)\n<pre>http:\/\/fonts.googleapis.com\/css?family=Droid+Sans|Inconsolata<\/pre>\n<\/li>\n<\/ul>\n<ul>\n<li>Specify styles or weights using the colon (:)<br \/>\nitalic -&gt; italic or i<br \/>\nbold -&gt; bold or b, or a numeric weight such as 700<br \/>\nbold italic -&gt; bolditalic or bi<\/p>\n<pre>http:\/\/fonts.googleapis.com\/css?family=Droid+Sans:b|Inconsolata<\/pre>\n<\/li>\n<\/ul>\n<ul>\n<li>Specify\u00a0script subset(s) by adding the subset parameter\n<pre>http:\/\/fonts.googleapis.com\/css?family=Philosopher&amp;subset=cyrillic<\/pre>\n<\/li>\n<\/ul>\n<ul>\n<li>Optimize font requestsIf you only use the font for a small text, it is a good idea to specify the text. As with all query strings, you should URL encode the text.\n<pre>http:\/\/fonts.googleapis.com\/css?family=Inconsolata&amp;text=I%20Robot<\/pre>\n<p>Note: there&#8217;s no need to specify the <code>subset=<\/code> parameter when using <code>text=<\/code> as it allows you to refer to any character in the original font.<\/li>\n<\/ul>\n<h3>Embedding fonts using the @font-face rule<\/h3>\n<p>Fonts are hosted on the user\u2019s server independently of external services. @font-face was a deprecated CSS2 rule that has been re-introduced in CSS3 specifications and is <strong>supported by almost\u00a0all modern browsers.<\/strong><\/p>\n<p>A web font is a customized font which is supported by different browers and comes in formats\u00a0such as\u00a0<strong>TTF, WOFF, EOT and SVG.<\/strong><br \/>\n<a href=\"http:\/\/www.fontsquirrel.com\/\" target=\"_blank\">FONT SQUIRREL<\/a>\u00a0(free) offers\u00a0prepackaged @font-face kits with the required formats, CSS and HTML code and the\u00a0\u201c@Font-Face Generator\u201d tool.<\/p>\n<p>1. Select your favorite font from\u00a0Font Squirrel.<\/p>\n<p>2. Download the @font-face kit and test the sample code in stylesheet.css and demo.html files. All the font formats must be uploaded to your server.<\/p>\n<pre class=\"prettyprint\">@font-face {\r\n   font-family: 'ChunkFiveRegular';\r\n   src: url('Chunkfive-webfont.eot');\r\n   src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),\r\n   url('Chunkfive-webfont.woff') format('woff'),\r\n   url('Chunkfive-webfont.ttf') format('truetype'),\r\n   url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');\r\n   font-weight: normal;\r\n   font-style: normal;\r\n}\r\n<\/pre>\n<h2 class=\"custom_post_h3\"><\/h2>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Source:\u00a0awwwards.com\/20-best-web-fonts-from-google-web-fonts-and-font-face Basically, there are two implementation models: 1. Web font embedding services 2. Embedding fonts using the @font-face rule Web font embedding services Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers.\u00a0One of the most valued characteristics of GWF is the option to download a desktop [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":922,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[45,20],"tags":[37,74],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/921"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=921"}],"version-history":[{"count":4,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/921\/revisions"}],"predecessor-version":[{"id":1772,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/921\/revisions\/1772"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media\/922"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}