{"id":3982,"date":"2016-11-29T16:15:52","date_gmt":"2016-11-29T10:45:52","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=3982"},"modified":"2022-07-01T14:24:00","modified_gmt":"2022-07-01T08:54:00","slug":"using-external-fonts-in-dynamics-365","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2016\/11\/using-external-fonts-in-dynamics-365\/","title":{"rendered":"Using External Fonts in Dynamics 365"},"content":{"rendered":"<p><strong>Introduction<\/strong><\/p>\n<p>There are various scenarios where we need to develop client extensions in Dynamics CRM to achieve our task. HTML web resources can make a huge difference in Dynamics CRM when we want to create custom web pages to extend our business logic.<\/p>\n<p>Web pages with custom fonts give us that added advantage needed to develop elegant and attractive web pages.<\/p>\n<p>Dynamics 365 allows creating following types of web resources:<\/p>\n<ul>\n<li><em>Webpage (HTML)<\/em><\/li>\n<li><em>Silverlight (XAP)<\/em><\/li>\n<li><em>Script (JScript)<\/em><\/li>\n<li><em>Image (JPG, PNG, GIF, ICO)<\/em><\/li>\n<li><em>Stylesheet (XSL)<\/em><\/li>\n<li><em>Data (XML)<\/em><\/li>\n<li><em>CSS<\/em><\/li>\n<\/ul>\n<p>Adding custom fonts in Dynamics CRM directly is not possible but there is a workaround to add custom fonts in CRM.<\/p>\n<ol>\n<li>Go to Settings \u2192\u00a0Customizations \u2192\u00a0Customize the System.<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-3999 size-large\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/1-1024x282.jpg\" alt=\"1\" width=\"665\" height=\"183\" \/><\/p>\n<ol start=\"2\">\n<li>After the Default Solution page is opened, go to Web Resources section and click on New to create a new web resource.<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4000\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/2.jpg\" alt=\"2\" width=\"665\" height=\"169\" \/><\/p>\n<ol start=\"3\">\n<li>Create a new Stylesheet (CSS) web resource and browse the font file as shown below. Carefully name the web resource, as we used the <em>.css <\/em>extension in our original font file name.<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4001\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/3.jpg\" alt=\"3\" width=\"590\" height=\"387\" \/>\u00a04. Once you have created the font css web resource, go to your style sheet which was used to store all the style sheet information for your \u00a0 \u00a0webpage. And add the reference of your font using the <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_font-face_rule.asp\">@font-face<\/a> rule in your style sheet as shown below:<\/p>\n<pre class=\"lang:default decode:true\">\/*Add Swiss 721 BT Bold Condensed font family*\/\r\n@font-face {\r\n    font-family: 'Swiss721BTBoldCondensed';\r\n    src: url('..\/styles\/fonts\/Swiss721BTBoldCondensed.ttf.css');  \r\n}<\/pre>\n<p>Create a CSS Class to be used for UI elements.<\/p>\n<pre class=\"lang:default decode:true\">.myCustomDiv {  \r\n    font-family: Swiss721BTBoldCondensed;\r\n    font-size: 20px;\r\n}<\/pre>\n<p><strong>Glossary:<\/strong><\/p>\n<p>font-family: The name of the font, which will be used to access the form in style classes.<\/p>\n<p>src: The path of the font where it is stored. In our case it is the URL of the font web resource.<\/p>\n<ol start=\"5\">\n<li>Now we can use the <em>Swiss721BTBoldCondensed <\/em>font for our UI elements like div, buttons, etc.<\/li>\n<li>After the implementation the font\u2019s look and feel changes to as shown in the image below.<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4002\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/6.jpg\" alt=\"6\" width=\"665\" height=\"104\" \/><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4003\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/6a.jpg\" alt=\"6a\" width=\"669\" height=\"109\" \/><strong>Note:-<\/strong><\/p>\n<ul>\n<li>There are cases where some of the browsers (like Internet Explorer &amp; Edge) only support specific file formats consisting of the custom font being included in the Dynamics CRM environment to be used for our UI elements.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4005\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/note.jpg\" alt=\"note\" width=\"669\" height=\"105\" \/><\/p>\n<ul>\n<li>\u00a0As shown in the above image, it can be seen that the font file \u201cSwiss721BTBoldCondensed.ttf.css\u201d didn\u2019t get applied in the \u2018Internet Explorer\u2019 browser.<\/li>\n<li>\u00a0To reflect the changes, the font file with \u2018.eot\u2019 format should also be included in the CRM.<\/li>\n<li>\u00a0Use the steps 1, 2 &amp; 3, to import the file \u201cSwiss721BTBoldCondensed.eot.css\u201d in your environment.<\/li>\n<li>\u00a0Then add the reference of your font in your style sheet as shown below:<\/li>\n<\/ul>\n<p><strong>Note that different name is given to the font-family so that the browser can detect that the font is from a different file.<\/strong><\/p>\n<pre class=\"lang:default decode:true\">\/*Add Swiss 721 BT Bold Condensed font family*\/\r\n@font-face {\r\n    font-family: 'Swiss721BTBoldCondensedIE';\r\n    src: url('..\/styles\/fonts\/Swiss721BTBoldCondensed.eot.css');  \r\n}<\/pre>\n<p>Update the CSS Class to be used for UI elements.<\/p>\n<pre class=\"lang:default decode:true\">.myCustomDiv {  \r\nfont-family: Swiss721BTBoldCondensed, Fallback, Swiss721BTBoldCondensedIE;\r\n    font-size: 20px;\r\n}<\/pre>\n<ul>\n<li>And the result is as shown below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4004\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/last.jpg\" alt=\"last\" width=\"665\" height=\"118\" \/><\/p>\n<p><strong>Conclusion:<\/strong><\/p>\n<p>Implementation of external fonts in Dynamics 365 can be a better way to enhance the user experience and make your web resources more user-friendly.<\/p>\n<p>Visit <a href=\"https:\/\/www.inogic.com\/blog\/\" target=\"_blank\" rel=\"noopener noreferrer\">Inogic Blogs<\/a> to explore more about Dynamics CRM (Dynamics 365)!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction There are various scenarios where we need to develop client extensions in Dynamics CRM to achieve our task. HTML web resources can make a huge difference in Dynamics CRM when we want to create custom web pages to extend our business logic. Web pages with custom fonts give us that added advantage needed to\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2016\/11\/using-external-fonts-in-dynamics-365\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":3991,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,24,25,66],"tags":[447,1784],"class_list":["post-3982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-dynamics-crm-2016","category-dynamics-crm-2016-update-1","category-web-resources-2","tag-custom-fonts-in-dynamics-crm","tag-using-external-fonts-in-dynamics-365"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/3982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=3982"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/3982\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/3991"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=3982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=3982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=3982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}