{"id":1844,"date":"2015-11-11T19:24:23","date_gmt":"2015-11-11T19:24:23","guid":{"rendered":"http:\/\/cssreset.com\/?p=1844"},"modified":"2015-11-11T19:24:23","modified_gmt":"2015-11-11T19:24:23","slug":"quick-tip-how-to-use-csss-font-face-rule","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/quick-tip-how-to-use-csss-font-face-rule\/","title":{"rendered":"Quick Tip: How to Use CSS’s @font-face Rule"},"content":{"rendered":"

Gone are the days of being limited to using only a handful of fonts in web design because of compatibility issues. Google Fonts<\/a> is a great resource that provides free fonts for web designers, but everyone is using it. If you want your fonts to really stand out from the crowd, CSS’s @font-face selector is the tool to use. CSS’s @font-face rule allows web designers to use any<\/em>\u00a0 font they’d like on a website. As long as the font files are on the site’s server, any user should be able to view the site and the correct font, regardless of the different computers or browsers they might be using.<\/p>\n

Using @font-face is simple. All you have to do is upload your font to the server and include the @font-face rule in your CSS file, like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. @font-face{<\/span><\/div><\/li>\n
  2.   font-family<\/span>:<\/span> "Your Font Name"<\/span>;<\/span><\/div><\/li>\n
  3.   src:<\/span> url<\/span>(<\/span>\/path\/to\/your\/font.ttf<\/span>)<\/span>;<\/span><\/div><\/li>\n
  4. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    And just like that, all your users will be able to see exactly<\/em> the font you want them to see.<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    Gone are the days of being limited to using only a handful of fonts in web design because of compatibility issues. Google Fonts is a great resource that provides free fonts for web designers, but everyone is using it. If […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,6,10],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1844"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1844"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1844\/revisions"}],"predecessor-version":[{"id":1846,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1844\/revisions\/1846"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}