{"id":767,"date":"2023-12-08T20:45:04","date_gmt":"2023-12-08T20:45:04","guid":{"rendered":"https:\/\/web-design-eastbourne.co.uk\/News\/?p=767"},"modified":"2023-12-08T20:45:14","modified_gmt":"2023-12-08T20:45:14","slug":"choosing-the-correct-webfont-for-your-project","status":"publish","type":"post","link":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/","title":{"rendered":"Choosing the Correct Webfont for Your Project"},"content":{"rendered":"\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280-1024x682.jpg\" alt=\"Choosing the Correct Webfont for Your Project\" class=\"wp-image-769\" style=\"width:749px;height:auto\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280-1024x682.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280-300x200.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280-768x512.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280-1080x720.jpg 1080w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280.jpg 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-chosing-the-correct-webfont-for-your-project-a-comprehensive-guide-for-aspiring-web-designers\">Chosing the Correct Webfont for Your Project: A Comprehensive Guide for Aspiring Web Designers<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-\"><\/h2>\n\n\n\n<p>As an aspiring web designer, one of the crucial decisions you&#8217;ll make is choosing the correct webfont for your project. The right choice can significantly enhance the overall appearance and readability of your website, while the wrong choice can leave visitors feeling unimpressed and confused.<\/p>\n\n\n\n<p><br>In this step-by-step guide, we will walk you through the process of selecting the perfect webfont. From understanding the importance of website fonts to exploring the best and worst font examples, this comprehensive blog post will equip you with the knowledge and inspiration needed to make informed decisions and create visually appealing websites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-importance-of-website-fonts\">Importance of Website Fonts:<\/h2>\n\n\n\n<p>Website fonts play a vital role in conveying your brand&#8217;s personality and creating a positive user experience. Here are some reasons why selecting the right webfont is essential:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Readability<\/strong>: Clear and legible fonts ensure that visitors can effortlessly read the content on your website, regardless of the device they are using.<\/li>\n\n\n\n<li><strong>Consistency<\/strong>: A consistent font choice throughout the website establishes a cohesive and professional look, making it easier for users to navigate.<\/li>\n\n\n\n<li><strong>Brand Representation<\/strong>: Fonts can transmit the desired emotions and values associated with your brand. A well-chosen font adds depth and shape to your brand identity.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-typography-for-websites-key-considerations\">Typography for Websites: Key Considerations<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-assess-your-target-audience\">1. Assess Your Target Audience:<\/h3>\n\n\n\n<p>Understanding your target audience is crucial when choosing a webfont. Consider their demographics, preferences, and the purpose of your website. Are you targeting a younger audience, or a more mature one? Is your website for a creative industry or a more formal setting? These factors will help you narrow down your font choices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-establish-a-hierarchy\">2. Establish a Hierarchy:<\/h3>\n\n\n\n<p>Fonts have different weights, sizes, and styles that can be used to denote hierarchy and guide visitors through your website. Establishing a clear typographic hierarchy will enhance the visual appeal and readability of your content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-consider-device-compatibility\">3. Consider Device Compatibility:<\/h3>\n\n\n\n<p>Opt for webfonts that are compatible across various devices and browsers. Responsive design is a must in today&#8217;s mobile-first world, so ensure your chosen fonts are responsive and scalable to provide a seamless experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-test-for-legibility\">4. Test for Legibility:<\/h3>\n\n\n\n<p>Before making a final decision, test your font choices for legibility. Check if the fonts are easy to read across different screens and sizes. Don&#8217;t compromise on readability for the sake of aesthetics.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-choosing-website-fonts-best-practices-and-examples\">Choosing Website Fonts: Best Practices and Examples<\/h2>\n\n\n\n<p>Now that we&#8217;ve covered the key considerations, let&#8217;s dive into some best practices for choosing website fonts and explore examples of both the best and worst font choices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-best-website-fonts\">Best Website Fonts:<\/h3>\n\n\n\n<p>Choosing the best website fonts involves finding a balance between aesthetics, legibility, and compatibility. Here are a few popular choices:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-roboto\">Roboto<\/h4>\n\n\n\n<p>With its clean lines and versatility, Roboto is a fantastic choice for modern and professional websites.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Roboto-font-1024x444.jpg\" alt=\"Roboto font examples\" class=\"wp-image-771\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Roboto-font-1024x444.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Roboto-font-300x130.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Roboto-font-768x333.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Roboto-font-1080x468.jpg 1080w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Roboto-font.jpg 1262w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-open-sans\">Open Sans<\/h4>\n\n\n\n<p>Open Sans is a highly legible font that works well in both print and digital media. It is widely used due to its simplicity and versatility.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"390\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Open-Sans-font-1024x390.jpg\" alt=\"Open Sans font examples\" class=\"wp-image-772\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Open-Sans-font-1024x390.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Open-Sans-font-300x114.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Open-Sans-font-768x293.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Open-Sans-font-1536x585.jpg 1536w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Open-Sans-font-1080x412.jpg 1080w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Open-Sans-font.jpg 1708w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-montserrat\"><strong>Montserrat<\/strong><\/h4>\n\n\n\n<p>Montserrat is an excellent option for headings and titles, offering a distinct and contemporary look.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"216\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Montserrat-font-1024x216.jpg\" alt=\"Monserrat font examples\" class=\"wp-image-773\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Montserrat-font-1024x216.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Montserrat-font-300x63.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Montserrat-font-768x162.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Montserrat-font-1080x228.jpg 1080w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Montserrat-font.jpg 1480w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-raleway\">Raleway<\/h4>\n\n\n\n<p>Raleway is often used for headings and titles to create a professional and polished look. Its simplicity and readability also make it an ideal font for body text in brochures, websites, and presentations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"356\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Raleway-font-1024x356.jpg\" alt=\"Raleway font example\" class=\"wp-image-774\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Raleway-font-1024x356.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Raleway-font-300x104.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Raleway-font-768x267.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Raleway-font-1536x534.jpg 1536w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Raleway-font-1080x375.jpg 1080w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Raleway-font.jpg 1677w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-worst-website-fonts\">Worst Website Fonts:<\/h3>\n\n\n\n<p>To avoid making poor font choices, stay away from these examples:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-comic-sans\">Comic Sans<\/h4>\n\n\n\n<p>Comic Sans is often seen as unprofessional and overused. It is best suited for casual and playful projects.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"540\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/comic-sans-font-1024x540.jpg\" alt=\"Comic Sans font examples\" class=\"wp-image-775\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/comic-sans-font-1024x540.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/comic-sans-font-300x158.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/comic-sans-font-768x405.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/comic-sans-font-1080x569.jpg 1080w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/comic-sans-font.jpg 1320w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-papyrus\">Papyrus<\/h4>\n\n\n\n<p>Papyrus may have its place in certain contexts, but it is generally considered overused and outdated.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"139\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Papyrus-font-1024x139.jpg\" alt=\"Papyrus font example\" class=\"wp-image-776\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Papyrus-font-1024x139.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Papyrus-font-300x41.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Papyrus-font-768x104.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Papyrus-font-1536x209.jpg 1536w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Papyrus-font-1080x147.jpg 1080w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Papyrus-font.jpg 1684w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-impact\">Impact<\/h4>\n\n\n\n<p>Impact, while bold, can be difficult to read in large amounts of body text due to its heavy strokes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"606\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Impact-font-1024x606.jpg\" alt=\"Impact fon examples\" class=\"wp-image-777\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Impact-font-1024x606.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Impact-font-300x178.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Impact-font-768x455.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Impact-font.jpg 1059w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Google Fonts with Code Examples<\/h2>\n\n\n\n<p>With the vast array of fonts available, it&#8217;s important to choose the right ones that align with your website&#8217;s style. Fortunately, Google Fonts provides a wide selection of high-quality, easy-to-use fonts. In this article, we will explore how to utilize Google Fonts effectively, including code examples, and discuss the optimal placement of the code within an HTML web page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"450\" src=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Google-Fonts-1024x450.jpg\" alt=\"How to Use Google Fonts with Code Examples\" class=\"wp-image-770\" srcset=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Google-Fonts-1024x450.jpg 1024w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Google-Fonts-300x132.jpg 300w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Google-Fonts-768x338.jpg 768w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Google-Fonts-1536x675.jpg 1536w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Google-Fonts-1080x475.jpg 1080w, https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/Google-Fonts.jpg 1884w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Using Google Fonts: The Basics<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p>Google Fonts offers a diverse library of free, open-source fonts that can be easily integrated into any web page. To begin, <a href=\"https:\/\/fonts.google.com\/\">visit the Google Fonts website (fonts.google.com)<\/a> and explore the extensive collection. Once you have chosen the fonts that best suit your needs, follow these steps:<\/p>\n\n\n\n<p><strong>Step 1: Selecting Fonts<\/strong><\/p>\n\n\n\n<p>When on the Google Fonts website, browse through the available fonts, using filters and categories to narrow down your options. Simply click on the &#8216;Add&#8217; button below each font you wish to incorporate into your project.<\/p>\n\n\n\n<p><strong>Step 2: Customizing Fonts<\/strong><\/p>\n\n\n\n<p>Google Fonts offers various customization options to ensure your chosen fonts integrate seamlessly with your website&#8217;s design. Adjust the font weight, style, and subsets (which languages to support) to tailor the fonts precisely to your requirements.<\/p>\n\n\n\n<p><strong>Step 3: Embedding the Code<\/strong><\/p>\n\n\n\n<p>After customizing your fonts, click on the &#8216;Embed&#8217; tab. Here, you will find the code snippets necessary to integrate the selected fonts into your web page. Google Fonts provides two options: &#8216;Standard&#8217; and &#8216;@import.&#8217; For performance reasons, it&#8217;s recommended to use the &#8216;Standard&#8217; option, as it loads fonts asynchronously.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Where to Place the Code within the HTML Web Page: Best Practices<\/h3>\n\n\n\n<p>Proper placement of the code within the HTML web page ensures that the fonts load efficiently, enhancing both aesthetics and performance. Let&#8217;s explore the recommended practices for placing the code snippets appropriately:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Within the HTML Head Section:<\/strong><br>It is advisable to place the code snippet provided by Google Fonts within the\u00a0<code>&lt;head><\/code>\u00a0section of your web page. This ensures that the fonts are loaded and rendered before any content is displayed to the user. To do this, insert the following code within the opening and closing\u00a0<code>&lt;head><\/code>\u00a0tags of your HTML document:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Font+Name&amp;display=swap\" rel=\"stylesheet\"&gt;\n<\/code><\/pre>\n\n\n\n<p>Replace\u00a0<code>'Font+Name'<\/code>\u00a0with the actual name of the font you want to use, ensuring that the spaces in the font name are replaced with &#8216;+&#8217;. Multiple fonts can be included by separating them with the\u00a0<code>|<\/code>\u00a0symbol.<\/p>\n\n\n\n<p><br><strong>2. Applying the Font to Specific Elements:<\/strong><\/p>\n\n\n\n<p>Once the code snippet is placed within the\u00a0<code>&lt;head><\/code>\u00a0section, you can apply the chosen font to specific elements in your HTML document. To apply a Google Font, simply add the CSS\u00a0<code>font-family<\/code>\u00a0property to the desired element within the opening and closing\u00a0<code>&lt;style><\/code>\u00a0tags of your HTML document. For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n  h1 {\n    font-family: 'Font Name', sans-serif;\n  }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>Remember to replace&nbsp;<code>'Font Name'<\/code>&nbsp;with the actual name of the font you have selected.<br>In summary, by following these steps and best practices, you can effectively use Google Fonts within your HTML web page, enhancing the visual appeal and user experience. Remember to balance aesthetics with performance by selecting only the necessary fonts and optimizing their placement within your web page. Happy designing!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h3>\n\n\n\n<p>Congratulations! You now have a comprehensive understanding of how to choose the correct webfont for your project. Remember to consider your target audience, establish a typographic hierarchy, and test for readability across devices.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chosing the Correct Webfont for Your Project: A Comprehensive Guide for Aspiring Web Designers As an aspiring web designer, one of the crucial decisions you&#8217;ll make is choosing the correct webfont for your project. The right choice can significantly enhance the overall appearance and readability of your website, while the wrong choice can leave visitors [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":769,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_edit_lock":["1702068317:2"],"_thumbnail_id":["769"],"_et_pb_use_builder":["off"],"_et_pb_old_content":[""],"_et_gb_content_width":[""],"ast-featured-img":["disabled"],"theme-transparent-header-meta":[""],"adv-header-id-meta":[""],"stick-header-meta":[""],"astra-migrate-meta-layouts":[""],"footnotes":[""],"_links_to":[""],"_links_to_target":[""],"_edit_last":["2"],"_yoast_indexnow_last_ping":["1702068314"],"cmplz_hide_cookiebanner":[""],"_yoast_wpseo_primary_category":["12"],"_yoast_wpseo_focuskw":["Choosing the Correct Webfont for Your Project"],"_yoast_wpseo_metadesc":["Chosing the Correct Webfont for Your Project - our guide will help. Learn how to use Google Fonts with code examples."],"_yoast_wpseo_linkdex":["64"],"_yoast_wpseo_content_score":["30"],"_yoast_wpseo_inclusive_language_score":["90"],"_yoast_wpseo_focuskeywords":["[]"],"_yoast_wpseo_keywordsynonyms":["[\"\"]"],"_yoast_wpseo_estimated-reading-time-minutes":["7"],"_yoast_wpseo_wordproof_timestamp":[""],"_cmplz_scanned_post":["1"],"_et_dynamic_cached_shortcodes":["a:0:{}"],"_et_dynamic_cached_attributes":["a:0:{}"]},"categories":[12,9],"tags":[],"class_list":["post-767","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-typography","category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Choosing the Correct Webfont for Your Project - Web Design Latest News<\/title>\n<meta name=\"description\" content=\"Chosing the Correct Webfont for Your Project - our guide will help. Learn how to use Google Fonts with code examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Choosing the Correct Webfont for Your Project - Web Design Latest News\" \/>\n<meta property=\"og:description\" content=\"Chosing the Correct Webfont for Your Project - our guide will help. Learn how to use Google Fonts with code examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Design Latest News\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ScriptedArtWebDesign\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/keir.chapman.9\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-08T20:45:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-08T20:45:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"853\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Keir Chapman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@scriptedart\" \/>\n<meta name=\"twitter:site\" content=\"@scriptedart\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keir Chapman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Choosing the Correct Webfont for Your Project - Web Design Latest News","description":"Chosing the Correct Webfont for Your Project - our guide will help. Learn how to use Google Fonts with code examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/","og_locale":"en_GB","og_type":"article","og_title":"Choosing the Correct Webfont for Your Project - Web Design Latest News","og_description":"Chosing the Correct Webfont for Your Project - our guide will help. Learn how to use Google Fonts with code examples.","og_url":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/","og_site_name":"Web Design Latest News","article_publisher":"https:\/\/www.facebook.com\/ScriptedArtWebDesign\/","article_author":"https:\/\/www.facebook.com\/keir.chapman.9\/","article_published_time":"2023-12-08T20:45:04+00:00","article_modified_time":"2023-12-08T20:45:14+00:00","og_image":[{"width":1280,"height":853,"url":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280.jpg","type":"image\/jpeg"}],"author":"Keir Chapman","twitter_card":"summary_large_image","twitter_creator":"@scriptedart","twitter_site":"@scriptedart","twitter_misc":{"Written by":"Keir Chapman","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/#article","isPartOf":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/"},"author":{"name":"Keir Chapman","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#\/schema\/person\/52653b471130e58f9af7a0b6168fa59a"},"headline":"Choosing the Correct Webfont for Your Project","datePublished":"2023-12-08T20:45:04+00:00","dateModified":"2023-12-08T20:45:14+00:00","mainEntityOfPage":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/"},"wordCount":1167,"publisher":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#organization"},"image":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/#primaryimage"},"thumbnailUrl":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280.jpg","articleSection":["Typography","Web Design"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/","url":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/","name":"Choosing the Correct Webfont for Your Project - Web Design Latest News","isPartOf":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#website"},"primaryImageOfPage":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/#primaryimage"},"image":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/#primaryimage"},"thumbnailUrl":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280.jpg","datePublished":"2023-12-08T20:45:04+00:00","dateModified":"2023-12-08T20:45:14+00:00","description":"Chosing the Correct Webfont for Your Project - our guide will help. Learn how to use Google Fonts with code examples.","breadcrumb":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/#primaryimage","url":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280.jpg","contentUrl":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/12\/words-3583294_1280.jpg","width":1280,"height":853,"caption":"Close-up of raised, engraved text on a metallic plaque, emphasizing the words \u201cmust heed all warnings and bodily injury.\u201d Much like choosing the correct webfont for your project, attention to detail ensures clarity and safety. The image has a warm, vintage tone."},{"@type":"BreadcrumbList","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/choosing-the-correct-webfont-for-your-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/web-design-eastbourne.co.uk\/News\/scripted-art-web-design-latest-news\/"},{"@type":"ListItem","position":2,"name":"Choosing the Correct Webfont for Your Project"}]},{"@type":"WebSite","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#website","url":"https:\/\/web-design-eastbourne.co.uk\/News\/","name":"Scripted Art Web Design News","description":"Grow with us","publisher":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/web-design-eastbourne.co.uk\/News\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#organization","name":"Scripted Art Web Design News","url":"https:\/\/web-design-eastbourne.co.uk\/News\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#\/schema\/logo\/image\/","url":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/HomepageHeader.gif","contentUrl":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-content\/uploads\/2023\/10\/HomepageHeader.gif","width":906,"height":601,"caption":"Scripted Art Web Design News"},"image":{"@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ScriptedArtWebDesign\/","https:\/\/x.com\/scriptedart","https:\/\/www.youtube.com\/@scriptedart9508","https:\/\/www.pinterest.co.uk\/ScriptedArt\/"]},{"@type":"Person","@id":"https:\/\/web-design-eastbourne.co.uk\/News\/#\/schema\/person\/52653b471130e58f9af7a0b6168fa59a","name":"Keir Chapman","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/b5ad7430b93b73105b405f21a65e815c83b99649782f316c6ec41fc628b32445?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b5ad7430b93b73105b405f21a65e815c83b99649782f316c6ec41fc628b32445?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b5ad7430b93b73105b405f21a65e815c83b99649782f316c6ec41fc628b32445?s=96&d=mm&r=g","caption":"Keir Chapman"},"description":"I am a self-motivated, passionate website designer and developer. I have over ten years of experience in building websites and have developed a broad skill set including web design, frontend and backend development, and SEO. Using my growing knowledge base I have built my own company (scriptedart.co.uk) creating websites,\u00a0e-commerce stores and producing custom graphics and web app functionality for a range of local businesses.","sameAs":["https:\/\/keirchapman.co.uk\/","https:\/\/www.facebook.com\/keir.chapman.9\/","https:\/\/www.linkedin.com\/in\/keir-chapman-6a138158\/"],"url":"https:\/\/web-design-eastbourne.co.uk\/News\/author\/webdesigneastbournenewsblogadmin7\/"}]}},"_links":{"self":[{"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/posts\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":1,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":778,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/posts\/767\/revisions\/778"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/media\/769"}],"wp:attachment":[{"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/web-design-eastbourne.co.uk\/News\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}