{"id":24,"date":"2019-03-28T11:36:16","date_gmt":"2019-03-28T11:36:16","guid":{"rendered":"https:\/\/tailordev.co.uk\/?p=24"},"modified":"2019-03-28T11:36:55","modified_gmt":"2019-03-28T11:36:55","slug":"how-to-add-custom-fonts-in-react-native","status":"publish","type":"post","link":"https:\/\/tailordev.co.uk\/?p=24","title":{"rendered":"How to add custom fonts in React Native"},"content":{"rendered":"\n<h3 id=\"a4b9\">Adding \/ Linking fonts for IOS and Android at&nbsp;once<\/h3>\n\n\n\n<h4 id=\"6971\">1. First&nbsp;step<\/h4>\n\n\n\n<p>Collect all fonts you want to use for IOS and Android and place it in the directory inside your project. For example in&nbsp;<code>.\/assets\/fonts\/<\/code><\/p>\n\n\n\n<h4 id=\"ad0e\">2. Second&nbsp;step<\/h4>\n\n\n\n<p>Add the following line in your&nbsp;<code>package.json<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"rnpm\": {<br>   \"assets\": [\".\/path to your fonts\"]<br>}<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">in our example path is - .\/assets\/fonts<\/pre>\n\n\n\n<h4 id=\"05b7\">3. Third&nbsp;step<\/h4>\n\n\n\n<p>And finally, run in terminal:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ react-native link<\/pre>\n\n\n\n<p>After running link command you should see something like this in your terminal output:<\/p>\n\n\n\n<p> That\u2019s all! &#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f4a5; We are done. All your fonts are linked and can be used for both IOS and Android. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Here is a bit of explanation of what\u2019s going on:<\/strong><\/p><p>rnpm\u200a\u2014\u200ais react native package manager which now is part of React Native core. For earlier usage, we would need to rewrite the third step to rnpm link, but now react-native recognize `link` command by itself.<\/p><p>So on third step packager links fonts in Info.plst for IOS and creates fonts directory (android\/app\/src\/main\/assets\/fonts) for Android, where copies your fonts<\/p><p><br><\/p><\/blockquote>\n\n\n\n<p>For Full Details : <a href=\"https:\/\/medium.com\/@danielskripnik\/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4\">https:\/\/medium.com\/@danielskripnik\/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding \/ Linking fonts for IOS and Android at&nbsp;once 1. First&nbsp;step Collect all fonts you want to use for IOS and Android and place it in the directory inside your project. For example in&nbsp;.\/assets\/fonts\/ 2. Second&nbsp;step Add the following line in your&nbsp;package.json: &#8220;rnpm&#8221;: { &#8220;assets&#8221;: [&#8220;.\/path to your fonts&#8221;]} in our example path is &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[8,9],"_links":{"self":[{"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/24"}],"collection":[{"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":1,"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":26,"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/24\/revisions\/26"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tailordev.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}