{"id":17157,"date":"2013-05-15T21:01:00","date_gmt":"2013-05-15T13:01:00","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17157"},"modified":"2025-04-04T01:32:57","modified_gmt":"2025-04-03T17:32:57","slug":"google-webfont-effects","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/","title":{"rendered":"A Look Into: Google Web Font Effects"},"content":{"rendered":"<p>Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\">CSS3<\/a>. There are times when we need more styles for more stunning fonts, but it would very complicated to create by ourselves. Replacing it with images is still not that good an option.<\/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\/webfont-comparison\/\" class=\"ref-block__link\" title=\"Read More: 3 Free Web Font Services Compared\" rel=\"bookmark\"><span class=\"screen-reader-text\">3 Free Web Font Services Compared<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/webfont-comparison.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16817 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/webfont-comparison.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">3 Free Web Font Services Compared<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAll these years, websites are restricted to typical fonts such as Arial, Georgia, Times and so on. This...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Adding Stunning Effect with Google Webfont<\/h2>\n<p>Here\u2019s some good news. Google Webfont has introduced a feature, which allows us to apply decorative font styles \u2013 without the hassle. There are currently over <strong>25 font effects<\/strong> we can apply.<\/p>\n<p>To add the effect, we insert <code>effect=<\/code> parameter followed by the font effect API name in the Google Web Font stylesheet. In the following example, we added \u2018Multiple Shadow\u2019 font effect, which is specified with <code>shadow-multiple<\/code> (API name).<\/p>\n<pre>\r\n &lt;link href='http:\/\/fonts.googleapis.com\/css?family=Roboto+Condensed&effect=shadow-multiple' rel='stylesheet' type='text\/css'&gt;\r\n <\/pre>\n<p>Then, we simply add the class name to apply the effect to the font. The class name is specified with <code>font-effect-*<\/code> followed by the API name. Given the above example, the class name for Multiple Shadow effect would be <code>font-effect-shadow-multiple<\/code>.<\/p>\n<pre>\r\n &lt;p class=\"font-effect-shadow-multiple\"&gt;This is Awesome!&lt;\/p&gt;\r\n <\/pre>\n<p>This is how the Multiple Shadow font effect looks.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/multiple-shadow-font-effect.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>In case you are wondering how this effect is achieved, you can inspect the stylesheet, which will show you the following style rule.<\/p>\n<pre>\r\n .font-effect-shadow-multiple {\r\n text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;\r\n -webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;\r\n }\r\n <\/pre>\n<p>The multiple shadow effect is achieved with <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\">CSS3<\/a> <code>text-shadow<\/code> property, so the effect will only be displayed in Chrome, Firefox, Opera and Safari. Internet Explorer 9 (and earlier versions) does not support <code>text-shadow<\/code> property, but it has its own rule to define shadows with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-gb\/\">Shadow Filter<\/a>.<\/p>\n<h2>Adding Multiple Font Effect<\/h2>\n<p>We are allowed to add multiple effects to the stylesheet. In this example, we added three font effects at once: Multiple Shadow, Emboss, 3D. Each effect is separated with the pipeline sign <code>|<\/code>, as follows.<\/p>\n<pre>\r\n &lt;link href='http:\/\/fonts.googleapis.com\/css?family=Roboto+Condensed&effect=shadow-multiple|emboss|3d' rel='stylesheet' type='text\/css'&gt;\r\n <\/pre>\n<p>Here is how the <strong>Emboss<\/strong> font effect look.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/emboss-font-effect.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>And below is the <strong>3D<\/strong> effect that we\u2019ve just added.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/3d-font-effect.jpg\" width=\"500\" height=\"300\"><\/figure>\n<p>It is worth noting that we cannot add multiple effects into a single element, as the effect style rules will overwrite one another. Furthermore, you can head over to the demo page to see these effects in action.<\/p>\n<ul class=\"download download-2c\">\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/google-webfont-effects\/\">View Demo<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/google-webfont-effects\/\">Download Source<\/a> <\/li>\n<\/ul>\n<h2>Further Resource<\/h2>\n<p>In Google Webfont documentation you will see the other font effects you can apply, such as Fire, Fire Animation, Neon and many others.<\/p>\n<ul>\n<li> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developers.google.com\/fontsdocs\/getting_started\">Google Font API Documentation<\/a> \u2013 Google Webfont <\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when we need more styles for more stunning fonts, but it would very complicated to create by ourselves. Replacing it with images is still not&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],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Look Into: Google Web Font Effects - Hongkiat<\/title>\n<meta name=\"description\" content=\"Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when\" \/>\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\/google-webfont-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into: Google Web Font Effects\" \/>\n<meta property=\"og:description\" content=\"Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/\" \/>\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-15T13:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:32:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/multiple-shadow-font-effect.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into: Google Web Font Effects\",\"datePublished\":\"2013-05-15T13:01:00+00:00\",\"dateModified\":\"2025-04-03T17:32:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/\"},\"wordCount\":389,\"commentCount\":13,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/google-webfont-effects\\\/multiple-shadow-font-effect.jpg\",\"keywords\":[\"Google\",\"Google Fonts\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/\",\"name\":\"A Look Into: Google Web Font Effects - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/google-webfont-effects\\\/multiple-shadow-font-effect.jpg\",\"datePublished\":\"2013-05-15T13:01:00+00:00\",\"dateModified\":\"2025-04-03T17:32:57+00:00\",\"description\":\"Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/google-webfont-effects\\\/multiple-shadow-font-effect.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/google-webfont-effects\\\/multiple-shadow-font-effect.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/google-webfont-effects\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: Google Web Font Effects\"}]},{\"@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":"A Look Into: Google Web Font Effects - Hongkiat","description":"Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when","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\/google-webfont-effects\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: Google Web Font Effects","og_description":"Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when","og_url":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-05-15T13:01:00+00:00","article_modified_time":"2025-04-03T17:32:57+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/multiple-shadow-font-effect.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into: Google Web Font Effects","datePublished":"2013-05-15T13:01:00+00:00","dateModified":"2025-04-03T17:32:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/"},"wordCount":389,"commentCount":13,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/multiple-shadow-font-effect.jpg","keywords":["Google","Google Fonts"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/","url":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/","name":"A Look Into: Google Web Font Effects - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/multiple-shadow-font-effect.jpg","datePublished":"2013-05-15T13:01:00+00:00","dateModified":"2025-04-03T17:32:57+00:00","description":"Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/multiple-shadow-font-effect.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/google-webfont-effects\/multiple-shadow-font-effect.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/google-webfont-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: Google Web Font Effects"}]},{"@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-4sJ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17157","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=17157"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17157\/revisions"}],"predecessor-version":[{"id":73594,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17157\/revisions\/73594"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17157"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}