{"id":75,"date":"2023-06-28T10:22:02","date_gmt":"2023-06-28T10:22:02","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&#038;p=75"},"modified":"2023-06-28T10:32:37","modified_gmt":"2023-06-28T10:32:37","slug":"html-fonts-reference","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-fonts-reference\/","title":{"rendered":"HTML &#8211; Fonts Reference"},"content":{"rendered":"\n<p>Fonts play a crucial role in web design, allowing developers to create visually appealing and engaging websites. With HTML, you have a range of options to customize the appearance of your text using different font families, sizes, styles, and more. In this reference guide, we&#8217;ll explore various HTML font-related tags and attributes to help you enhance your web typography skills.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Font Families<\/h2>\n\n\n\n<p>HTML provides a set of font families that you can use to style your text. Here are a few examples:<\/p>\n\n\n\n<ul>\n<li>Serif Fonts: Times New Roman, Georgia, serif.<\/li>\n\n\n\n<li>Sans-Serif Fonts: Arial, Verdana, sans-serif.<\/li>\n\n\n\n<li>Monospaced Fonts: Courier New, Consolas, monospace.<\/li>\n<\/ul>\n\n\n\n<p>To specify the font family for an HTML element, use the <strong>font-family<\/strong> CSS property or the face attribute within the deprecated <code>font<\/code> tag.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Font Sizes<\/h2>\n\n\n\n<p>You can control the size of your text using different units of measurement. Some commonly used units include pixels (<code>&lt;strong&gt;px&lt;\/strong&gt;<\/code>), ems (<code>&lt;strong&gt;em&lt;\/strong&gt;<\/code>), and percentages (<code>&lt;strong&gt;%&lt;\/strong&gt;<\/code>). For example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p style=&quot;font-size: 16px;&quot;&gt;This text has a font size of 16 pixels.&lt;\/p&gt;\n&lt;p style=&quot;font-size: 1.2em;&quot;&gt;This text has a font size of 1.2 times the parent element&#039;s font size.&lt;\/p&gt;\n&lt;p style=&quot;font-size: 80%;&quot;&gt;This text has a font size of 80% of the parent element&#039;s font size.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Font Styles<\/h2>\n\n\n\n<p>HTML allows you to apply different styles to your text, such as bold, italic, and underline. Here&#8217;s how you can use them:<\/p>\n\n\n\n<ul>\n<li>Bold: &lt;strong&gt; or &lt;b&gt; tags.<\/li>\n\n\n\n<li>Italic: &lt;em&gt; or &lt;i&gt; tags.<\/li>\n\n\n\n<li>Underline: &lt;u&gt; tag.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;p&gt;This is &lt;strong&gt;bold&lt;\/strong&gt; text.&lt;\/p&gt;\n&lt;p&gt;This is &lt;em&gt;italic&lt;\/em&gt; text.&lt;\/p&gt;\n&lt;p&gt;This is &lt;u&gt;underlined&lt;\/u&gt; text.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Google Fonts<\/h2>\n\n\n\n<p>In addition to the standard fonts, you can utilize Google Fonts to expand your font choices. Google Fonts provides a wide selection of free, open-source fonts that you can easily integrate into your web projects. To use Google Fonts, include the following code in the &lt;head&gt; section of your HTML file.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/css?family=Font1|Font2|Font3&quot;&gt;<\/code><\/pre>\n\n\n\n<p>Replace <code>Font1<\/code>, <code>Font2<\/code>, and <code>Font3<\/code> with the names of the desired fonts from the Google Fonts library. Then, you can use these fonts by specifying the font family in your CSS or HTML code.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/css?family=Open+Sans|Roboto&quot;&gt;\n\n&lt;style&gt;\n  p {\n    font-family: &#039;Open Sans&#039;, sans-serif;\n    font-size: 18px;\n    font-weight: bold;\n  }\n\n  h1 {\n    font-family: &#039;Roboto&#039;, sans-serif;\n    font-size: 24px;\n    font-style: italic;\n  }\n&lt;\/style&gt;\n\n&lt;p&gt;This paragraph uses the Open Sans font.&lt;\/p&gt;\n&lt;h1&gt;This heading uses the Roboto font.&lt;\/h1&gt;<\/code><\/pre>\n\n\n\n<p>Remember to replace <code>Font1<\/code> and <code>Font2<\/code> with the names of the desired Google Fonts.<\/p>\n\n\n\n<p>By using these HTML font-related tags and attributes, along with external font libraries like Google Fonts, you can greatly enhance the visual appeal of your web pages. Experiment with different combinations and find the typography that best suits your design and content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fonts play a crucial role in web design, allowing developers to create visually appealing and engaging websites. With HTML, you have a range of options to customize the appearance of your text using different font families, sizes, styles, and more. In this reference guide, we&#8217;ll explore various HTML font-related tags and attributes to help you [&hellip;]<\/p>\n","protected":false},"featured_media":43,"comment_status":"open","ping_status":"closed","template":"","meta":[],"categories":[2],"tags":[],"subject":[7,9],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML - Fonts Reference<\/title>\n<meta name=\"description\" content=\"Fonts play a crucial role in web design, allowing developers to create visually appealing and engaging websites\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/topic\/html-fonts-reference\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML - Fonts Reference\" \/>\n<meta property=\"og:description\" content=\"Fonts play a crucial role in web design, allowing developers to create visually appealing and engaging websites\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-fonts-reference\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-28T10:32:37+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-fonts-reference\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-fonts-reference\/\",\"name\":\"HTML - Fonts Reference\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2023-06-28T10:22:02+00:00\",\"dateModified\":\"2023-06-28T10:32:37+00:00\",\"description\":\"Fonts play a crucial role in web design, allowing developers to create visually appealing and engaging websites\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-fonts-reference\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-fonts-reference\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-fonts-reference\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"http:\/\/local.tutorials\/topic\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML &#8211; Fonts Reference\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML - Fonts Reference","description":"Fonts play a crucial role in web design, allowing developers to create visually appealing and engaging websites","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":"http:\/\/local.tutorials\/topic\/html-fonts-reference\/","og_locale":"en_US","og_type":"article","og_title":"HTML - Fonts Reference","og_description":"Fonts play a crucial role in web design, allowing developers to create visually appealing and engaging websites","og_url":"http:\/\/local.tutorials\/topic\/html-fonts-reference\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2023-06-28T10:32:37+00:00","og_image":[{"width":640,"height":360,"url":"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@brightwhizmag","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-fonts-reference\/","url":"http:\/\/local.tutorials\/topic\/html-fonts-reference\/","name":"HTML - Fonts Reference","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2023-06-28T10:22:02+00:00","dateModified":"2023-06-28T10:32:37+00:00","description":"Fonts play a crucial role in web design, allowing developers to create visually appealing and engaging websites","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-fonts-reference\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-fonts-reference\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-fonts-reference\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"http:\/\/local.tutorials\/topic\/"},{"@type":"ListItem","position":3,"name":"HTML &#8211; Fonts Reference"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic\/75"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/topic"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=75"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=75"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}