{"id":17133,"date":"2013-05-10T23:01:10","date_gmt":"2013-05-10T15:01:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17133"},"modified":"2025-04-04T01:32:38","modified_gmt":"2025-04-03T17:32:38","slug":"optimize-google-webfonts","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/","title":{"rendered":"How to Optimize Google Web Font"},"content":{"rendered":"<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\">Google Web Font<\/a> is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the library. In spite of being served from fast Google servers, there are still a few areas that need improvement.<\/p>\n<p>So, let\u2019s see what we can do to improve Google Webfont\u2019s performance.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/typography-for-modern-websites\/\" class=\"ref-block__link\" title=\"Read More: Mastering Modern Web Typography: Essential Tips for Designers\" rel=\"bookmark\"><span class=\"screen-reader-text\">Mastering Modern Web Typography: Essential Tips for Designers<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/typography-for-modern-websites.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-10238 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/typography-for-modern-websites.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Mastering Modern Web Typography: Essential Tips for Designers<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tToday's digital text offers a variety of formatting options, thanks to ongoing advancements in web fonts and browser...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Delivering Certain Font Styles<\/h2>\n<p>Fonts in Google Webfont provide font styles like bold, italic, light. Adding all these font styles to the specification will increase the font size and also affect the page load performance.<\/p>\n<p>As we can see below, by deselecting some of the styles, the page load will turn much faster.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-style-selection.jpg\" width=\"500\" height=\"451\"><\/figure>\n<p>Google makes it easy for us to include only the styles that we need. In the following example, we select only the light and normal version of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\/specimen\/Roboto+Condensed\">Roboto Condensed<\/a> font family.<\/p>\n<pre>\r\n &lt;link href='http:\/\/fonts.googleapis.com\/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text\/css'&gt;\r\n <\/pre>\n<p>We can see from the screenshot below that the bold style is not rendered properly without specifying in the Google Webfont stylesheet.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/compare-bold.jpg\" width=\"500\" height=\"280\"><\/figure>\n<p>However, it gives us better load time as the browsers load fewer font files.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-style-performance.jpg\" width=\"500\" height=\"260\"><\/figure>\n<p>You can see the demo below.<\/p>\n<ul class=\"download download-1c\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/google-webfont-optimized\/\">View Demo<\/a> <\/li>\n<\/ul>\n<h2>Font Sub-setting<\/h2>\n<p>Several fonts in Google Webfont also provide multiple sets of character to support several languages. For example, the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\/specimen\/Roboto+Condensed\">Roboto Condensed<\/a> font family provides the character set for Cyrillic, Greek and Vietnamese characters. Google provides the option for easily selecting which character set we want to include.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-subset.jpg\" width=\"500\" height=\"144\"><\/figure>\n<p>By including these character sets, it will increase the font size and hurt the page load performance. So, leave what is not necessary unchecked.<\/p>\n<p>In this example, we added the <code>latin<\/code>, <code>greek<\/code>, and <code>cyrillic<\/code> characters. But, we only include the latin and greek set in the Google Webfont stylesheet, as follows.<\/p>\n<pre>\r\n &lt;link href='http:\/\/fonts.googleapis.com\/css?family=Roboto+Condensed&subset=latin,greek' rel='stylesheet' type='text\/css'&gt;\r\n <\/pre>\n<p>Hence, the cyrillic characters are not rendered with Roboto Condensed font family from Goole Webfont.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-cyrillic.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>See the the live demo to see the font in action.<\/p>\n<ul class=\"download download-1c\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/google-webfont-optimized\/\">View Demo<\/a> <\/li>\n<\/ul>\n<h2>Serving Certain Letters<\/h2>\n<p>There are times when we know the certain letters we are going to embed on the website. Thus, providing the entire font letters of the font family would become useless. Google Webfont provides the option for which to include only the characters that are necessary.<\/p>\n<p>We can include specific letters by adding the following <code>&text={letters}<\/code> next to the font family name. In the following example, we set the <strong>l<\/strong>, <strong>o<\/strong>, and <strong>g<\/strong> characters in the Google Webfont stylesheet, as follows.<\/p>\n<pre>\r\n &lt;link href='http:\/\/fonts.googleapis.com\/css?family=Roboto+Condensed&text=log' rel='stylesheet' type='text\/css'&gt;\r\n <\/pre>\n<p>That way, we can only use the letter <strong>l<\/strong>, <strong>o<\/strong>, and <strong>g<\/strong> from this font family, Roboto Condensed. The word <strong>logo<\/strong>, probably, is the perfect example, in our case; it renders all the letters included in our Google Webfont specification.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-certain-characters.jpg\" width=\"500\" height=\"280\"><\/figure>\n<p>By including only the necessary letters, it can significantly decrease the font size. It is worth noting, though, the letters we included are all the small letters. The capital letters of these letters, <strong>l<\/strong>, <strong>o<\/strong>, and <strong>g<\/strong> will not be served as well as all other excluded letters.<\/p>\n<ul class=\"download download-2c\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/google-webfont-optimized\/\">View Demo<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/google-webfont-optimized\/\">Download Source<\/a> <\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the library. In spite of being served from fast Google servers, there are still a few areas that need improvement. So, let\u2019s see what we can&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[37,4537,1250],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Optimize Google Web Font - Hongkiat<\/title>\n<meta name=\"description\" content=\"Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Optimize Google Web Font\" \/>\n<meta property=\"og:description\" content=\"Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-10T15:01:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:32:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-style-selection.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Optimize Google Web Font\",\"datePublished\":\"2013-05-10T15:01:10+00:00\",\"dateModified\":\"2025-04-03T17:32:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/\"},\"wordCount\":498,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/optimize-google-webfonts\\\/font-style-selection.jpg\",\"keywords\":[\"Google\",\"Google Fonts\",\"optimization\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/\",\"name\":\"How to Optimize Google Web Font - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/optimize-google-webfonts\\\/font-style-selection.jpg\",\"datePublished\":\"2013-05-10T15:01:10+00:00\",\"dateModified\":\"2025-04-03T17:32:38+00:00\",\"description\":\"Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/optimize-google-webfonts\\\/font-style-selection.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/optimize-google-webfonts\\\/font-style-selection.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/optimize-google-webfonts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Optimize Google Web Font\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Optimize Google Web Font - Hongkiat","description":"Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/","og_locale":"en_US","og_type":"article","og_title":"How to Optimize Google Web Font","og_description":"Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the","og_url":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-05-10T15:01:10+00:00","article_modified_time":"2025-04-03T17:32:38+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-style-selection.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Optimize Google Web Font","datePublished":"2013-05-10T15:01:10+00:00","dateModified":"2025-04-03T17:32:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/"},"wordCount":498,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-style-selection.jpg","keywords":["Google","Google Fonts","optimization"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/","url":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/","name":"How to Optimize Google Web Font - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-style-selection.jpg","datePublished":"2013-05-10T15:01:10+00:00","dateModified":"2025-04-03T17:32:38+00:00","description":"Google Web Font is one of the more popular ways for embedding custom font on a website. It is free, and there are many options to choose from in the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-style-selection.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/optimize-google-webfonts\/font-style-selection.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/optimize-google-webfonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Optimize Google Web Font"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4sl","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17133"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17133\/revisions"}],"predecessor-version":[{"id":73591,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17133\/revisions\/73591"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17133"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}