{"id":173,"date":"2014-03-08T02:24:03","date_gmt":"2014-03-08T02:24:03","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=173"},"modified":"2024-02-28T23:41:31","modified_gmt":"2024-02-28T23:41:31","slug":"fonts-with-css-font-face-rule","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/fonts-with-css-font-face-rule\/","title":{"rendered":"Fonts with CSS @font-face Rule"},"content":{"rendered":"<p>The CSS @font-face rule allows web developers to use any font to display text on a webpage. By using the @font-face rule you&#8217;ll no longer be restricted to using the limited amount of fonts that are available on the users computer.<!--more--><\/p>\n<p>To get the @font-face rule to work correctly, you will need to use the correct syntax as indicated below. <\/p>\n<pre class=\"language-css\"><code>@font-face {\r\n   font-family: 'CustomFont';\r\n   src: url('customfont.eot');\r\n   src: url('customfont.eot?#iefix') format('embedded-opentype'),\r\n   url('customfont.woff') format('woff'),\r\n   url('customfont.ttf')  format('truetype'),\r\n   url('customfont.svg#CustomFont') format('svg');\r\n}\r\n\r\nbody {\r\n   font-family: 'CustomFont', Helvetica, Arial, sans-serif;\r\n}<\/code><\/pre>\n<p>You may be wondering why we need to specify so many different font formats, short answer, browser compatibility.<br \/>\nHere are the formats for different web browsers:<\/p>\n<ul>\n<li>Internet Explorer &#8211; EOT<\/li>\n<li>Firefox (3.5+) &#8211; TTF \/ OTF \/ WOFF<\/li>\n<li>Chrome &#8211; SVG \/ TTF \/ OTF<\/li>\n<li>Opera &#8211; TTF \/ OTF<\/li>\n<li>Safari (3.2+) &#8211; TTF \/ OTF<\/li>\n<\/ul>\n<p>If you are looking for free fonts to use with the @font-face rule, you can try <a rel=\"nofollow\" href=\"http:\/\/www.dafont.com\">DaFont<\/a>, they have a large range of fonts that you can downloaded for free. You will then need to convert these fonts to different formats, one site you can try is <a rel=\"nofollow\" href=\"http:\/\/everythingfonts.com\/font-face\">everythingfonts.com<\/a>.<\/p>\n<p>I hope you have found this CSS Snippet useful, click here to find more <a href=\"https:\/\/www.cssportal.com\/css-snippets\">CSS Snippets<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The CSS @font-face rule allows web developers to use any font to display text on a webpage. By using the @font-face rule you&#8217;ll no longer be restricted to using the limited amount of fonts that are available on the users computer.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-173","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=173"}],"version-history":[{"count":3,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/173\/revisions"}],"predecessor-version":[{"id":544,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/173\/revisions\/544"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}