{"id":302359,"date":"2021-08-24T06:24:15","date_gmt":"2021-08-24T06:24:15","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=302359"},"modified":"2021-08-24T06:24:18","modified_gmt":"2021-08-24T06:24:18","slug":"how-to-add-custom-font-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/","title":{"rendered":"How to add custom font in Magento 2"},"content":{"rendered":"\n<p> Magento already provide you a set of built-in fonts, but you can easily include custom font file in your custom theme as well. This guide will describe how to include font in your theme easily.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Please follow the below steps to include the custom fonts:<\/strong><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Add font file to your theme directory at below location.  <code>app\/design\/frontend\/&lt;your_vendor_name&gt;\/&lt;your_theme_name&gt;\/web\/fonts<\/code>\/<\/li><li>Declare the Custom font by adding the\u00a0<code>.lib-font-face mixin in below file<\/code>. <code>app\/design\/frontend\/&lt;your_vendor_name&gt;\/&lt;your_theme_name&gt;\/web\/css<\/code>\/source\/_typography.less <\/li><\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">.lib-font-face(\n@family-name:&#039;&lt;custom-font-name&gt;&#039;,\n@font-path:&#039;@{basedir}fonts\/custom_font_filename&#039;,\n@font-weight:&lt;font_weight&gt;,\n@font-style:&lt;font_style&gt;\n);<\/pre>\n\n\n\n<p>where <code>@{basedir} <\/code>stands for the\u00a0<code>app\/design\/frontend\/&lt;you_vendor_name&gt;\/&lt;your_theme_name&gt;\/web<\/code><br>Note: lib-font-face requires  you to have font in all the listed formats which are &#8220;eot, woff, woff2, ttf and svg&#8221;. If you don&#8217;t have font file in any format then it would give you 404 errors.<br><br><\/p>\n\n\n\n<p><strong>If you have font file only in one format then also you can easily add the font file by creating mixin only for that font type.<\/strong><\/p>\n\n\n\n<p><strong><br><\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">.lib-ttf-font-face(\n    @family-name,\n    @font-path,\n    @font-weight: normal,\n    @font-style: normal\n) {\n    @font-face{\n        font-family: @family-name;\n        src: url(&#039;@{font-path}.ttf&#039;) format(&#039;truetype&#039;);\n        font-weight: @font-weight;\n        font-style: @font-style;\n    }\n}\n\n.lib-ttf-font-face(\n  @family-name:&#039;&lt;custom-font-name&gt;&#039;,\n  @font-path: &#039;@{baseDir}fonts\/&lt;custom-font-file-name&gt;&#039;,\n  @font-weight: &lt;font-weight&gt;,\n  @font-style: &lt;font-style&gt;\n);<\/pre>\n\n\n\n<p>We hope it will help you. Thank you!!<\/p>\n\n\n\n<p>If any issue or doubt please feel free to mention in comment section.<\/p>\n\n\n\n<p>We would be happy to help. Happy Coding!!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento already provide you a set of built-in fonts, but you can easily include custom font file in your custom theme as well. This guide will describe how to include font in your theme easily. Please follow the below steps to include the custom fonts: Add font file to your theme directory at below location. <a href=\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":375,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2070],"class_list":["post-302359","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-magento2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to add custom font in Magento 2 - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add custom font in Magento 2 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Magento already provide you a set of built-in fonts, but you can easily include custom font file in your custom theme as well. This guide will describe how to include font in your theme easily. Please follow the below steps to include the custom fonts: Add font file to your theme directory at below location. [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-24T06:24:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-24T06:24:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Radhika Garg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Radhika Garg\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/\"},\"author\":{\"name\":\"Radhika Garg\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1bfed7985110d44a908d093a4e322727\"},\"headline\":\"How to add custom font in Magento 2\",\"datePublished\":\"2021-08-24T06:24:15+00:00\",\"dateModified\":\"2021-08-24T06:24:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/\"},\"wordCount\":166,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/\",\"name\":\"How to add custom font in Magento 2 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2021-08-24T06:24:15+00:00\",\"dateModified\":\"2021-08-24T06:24:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add custom font in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/1bfed7985110d44a908d093a4e322727\",\"name\":\"Radhika Garg\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2319613aaa0bc878e7855f009fc5a889134810d78fa0d1e693180b36f82156a3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2319613aaa0bc878e7855f009fc5a889134810d78fa0d1e693180b36f82156a3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Radhika Garg\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/radhika-garg178\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add custom font in Magento 2 - Webkul Blog","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:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to add custom font in Magento 2 - Webkul Blog","og_description":"Magento already provide you a set of built-in fonts, but you can easily include custom font file in your custom theme as well. This guide will describe how to include font in your theme easily. Please follow the below steps to include the custom fonts: Add font file to your theme directory at below location. [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2021-08-24T06:24:15+00:00","article_modified_time":"2021-08-24T06:24:18+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Radhika Garg","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Radhika Garg","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/"},"author":{"name":"Radhika Garg","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1bfed7985110d44a908d093a4e322727"},"headline":"How to add custom font in Magento 2","datePublished":"2021-08-24T06:24:15+00:00","dateModified":"2021-08-24T06:24:18+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/"},"wordCount":166,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/","name":"How to add custom font in Magento 2 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2021-08-24T06:24:15+00:00","dateModified":"2021-08-24T06:24:18+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-add-custom-font-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add custom font in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/1bfed7985110d44a908d093a4e322727","name":"Radhika Garg","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2319613aaa0bc878e7855f009fc5a889134810d78fa0d1e693180b36f82156a3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2319613aaa0bc878e7855f009fc5a889134810d78fa0d1e693180b36f82156a3?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Radhika Garg"},"url":"https:\/\/webkul.com\/blog\/author\/radhika-garg178\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/302359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/375"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=302359"}],"version-history":[{"count":4,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/302359\/revisions"}],"predecessor-version":[{"id":302377,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/302359\/revisions\/302377"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=302359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=302359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=302359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}