{"id":317979,"date":"2021-08-07T15:00:45","date_gmt":"2021-08-07T12:00:45","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-a-web-font\/"},"modified":"2021-08-07T15:00:45","modified_gmt":"2021-08-07T12:00:45","slug":"what-is-a-web-font","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-a-web-font\/","title":{"rendered":"#What Is a Web Font?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2ba7065df84\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2ba7065df84\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-web-font\/#Desktop_Fonts_vs_Web_Fonts\" >Desktop Fonts vs. Web Fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-web-font\/#A_Brief_History_of_Web_Fonts\" >A Brief History of Web Fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-web-font\/#How_Web_Fonts_Work\" >How Web Fonts Work<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-web-font\/#Getting_Web_Fonts\" >Getting Web Fonts<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is a Web Font?&#8221;<\/strong><\/p>\n<div>\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-733157\" srcset=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/06\/google_fonts_hero.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/06\/google_fonts_hero.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/06\/google_fonts_hero.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Google Fonts Logo on Blue Background\" width=\"1200\" height=\"675\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Did you know that your web browser is automatically <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">download<\/a>ing and using fonts that aren\u2019t installed on your system? Web fonts help the pages you browse every day look better. Here\u2019s what they are and how they work.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Desktop_Fonts_vs_Web_Fonts\"><\/span>Desktop Fonts vs. Web Fonts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We all use fonts every day. Some of them come with your operating system, some come from applications like the Adobe Creative Suite or Microsoft Office, and some are ones that you download or purchase and install yourself. When they\u2019re installed, you can use these fonts in word processors, image editing software, and more. These are desktop fonts, and they\u2019re stored locally.<\/p>\n<figure style=\"width: 650px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-733170 size-full\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/06\/desktop_fonts.jpg?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"An example of desktop fonts.\" width=\"650\" height=\"361\" data-crediturl=\"https:\/\/www.shutterstock.com\/image-photo\/new-york-usa-july-26-2019-1463026928\" data-credittext=\"PixieMe \/ Shutterstock\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><figcaption class=\"wp-caption-text\"><span class=\"imagecredit\"><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.shutterstock.com\/image-photo\/new-york-usa-july-26-2019-1463026928\">PixieMe \/ Shutterstock<\/a><\/span><\/figcaption><\/figure>\n<p>Another type of font has become more important as our computing experience has moved online. These are Web Fonts\u2014typography stored on the cloud (and then cached in your browser) and used to generate the text that appears on websites.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"A_Brief_History_of_Web_Fonts\"><\/span>A Brief History of Web Fonts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In the early days of the internet, typography on web pages was limited to what fonts were installed on your system. If a font wasn\u2019t installed, the web page would load a standard \u201cfallback\u201d font that was more likely to be available. Because of this, web designers often chose default system fonts for their sites.<\/p>\n<p>Among these were Microsoft\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Core_fonts_for_the_Web\">Core Fonts for Web<\/a>, a set of typefaces made freely available for web design. This pack included widely used system fonts like Times New Roman, Arial, Comic Sans, and Trebuchet. Alternatively, designers could use font families such as Serif, Sans-Serif, and Monospace to specify the <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a> style of a font even if a specific one wasn\u2019t available.<\/p>\n<p>This changed in 2010 when Google launched\u00a0<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>, a vast open-source repository for free fonts that can be used anywhere on the web. Since then, other competitors, like Adobe\u2019s Typekit and web-hosted font plugins, have emerged. Millions of websites from around the world run on web fonts, including Google\u2019s productivity suite.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_Web_Fonts_Work\"><\/span>How Web Fonts Work<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The biggest Web Font provider, Google Fonts, is an expansive web library of over a thousand fonts. You can use them on your website by pulling them via CSS, and mobile developers can access these fonts when creating Android apps.<\/p>\n<p>When a web page uses Google Fonts, it pulls a font from Google\u2019s database and then displays the text in that font to you in your browser. These fonts are hosted on Google\u2019s server and are loaded nearly instantaneously. Other cloud font services work much the same way.<\/p>\n<p>Another alternative is using self-hosted, embedded fonts on the web instead. This is done through the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/WOFF\">Web Open Font Format<\/a> (WOFF)\u2014a compressed font file developed by Mozilla that\u2019s compatible with most modern web browsers. WOFF is useful if you want to embed a custom font that isn\u2019t available on a web font service.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Getting_Web_Fonts\"><\/span>Getting Web Fonts<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-731978\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/06\/Screenshot-Google-Fonts-Page.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Roboto Open Sans on a Black Background\" width=\"650\" height=\"350\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The Google Fonts repository and all the fonts under it are entirely free to use and accessible to everyone. It only uses fonts under an open license, and many of these fonts have become staples of web design, like Roboto, Lato, and Montserrat. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fonts.google.com\/\">Google hosts a website<\/a> that lists all of its available fonts and allows you to try them out and compare them with each other. Google also offers a database of free vector icons.<\/p>\n<p>Since these fonts are freely available, you can download the original font files for use on your desktop as well. Many websites host Google Fonts\u2019 repositories, including <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/google\/fonts\">Google\u2019s own Github<\/a>. You can use these fonts in projects, freely share them with others, and download them from other places on the internet for free.<\/p>\n<p>Many website builders and content managers like WordPress and Squarespace come with support for web fonts out of the box. If you\u2019re using a custom website, you need to upload the font file to your server and use CSS code to point to the font file that you want to use.<\/p>\n<p>If you\u2019d like to learn more about using web fonts for your website, check out this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/css\/css3_fonts.asp\">CSS Web Font Guide<\/a> from W3Schools.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to Install and Manage Fonts in Windows 10&#8217;s Settings App<\/em><\/strong><\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/730585\/what-is-a-web-font\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is a Web Font?&#8221; Did you know that your web browser is automatically downloading and using fonts that aren\u2019t installed on your system? Web fonts help the pages you browse every day look better. Here\u2019s what they are and how they work. Desktop Fonts vs. Web Fonts We all use fonts every day. Some&#8230;<\/p>\n","protected":false},"author":1,"featured_media":317980,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/06\/google_fonts_hero.jpg?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-317979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/317979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=317979"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/317979\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/317980"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=317979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=317979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=317979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}