{"id":19339,"date":"2020-12-28T02:54:05","date_gmt":"2020-12-28T10:54:05","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19339"},"modified":"2020-12-29T13:03:51","modified_gmt":"2020-12-29T21:03:51","slug":"html-change-font","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-change-font\/","title":{"rendered":"Change Font HTML: A How-To Guide"},"content":{"rendered":"\n<p><em>The font-family CSS rule lets you define the font of an HTML web document. To refer to external fonts, you can use the url() method to define a font face. Or, you can embed a font CSS file from a site like Google Fonts.<\/em><\/p>\n\n\n\n<p>As developers, there will be a time when we won\u2019t want to use the default font that\u2019s populated when our HTML is processed. This article aims to show you how to change the font in your HTML document using best practices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Change Font in HTML<\/h2>\n\n\n\n<p>There are three ways to change the font of a web page in HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Using a built-in font with the font-family rule.<\/li><li>Using the font-face rule to refer to an external font.<\/li><li>Using an external CSS style sheet to style the fonts on a web page.<\/li><\/ul>\n\n\n\n<p>In this article, we&#8217;ll talk about each of these methods of changing a font.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Change Font: Built-in Font-Family<\/h2>\n\n\n\n<p>The first way we can change our font is by using the font-family property in our inline styling. This can be done like so:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;p style=&quot;font-family:wingdings;&quot; id=&quot;wingdings&quot;&gt;New York&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p>We simply use the <em>font-family<\/em> property to indicate which font we would like to use in our block of text. Many of the standard fonts are readily available to use.<\/p>\n\n\n\n<p>It\u2019s a good idea to have a backup font, just in case the first font-choice cannot be loaded. It\u2019s as easy as adding a comma and the new font-family name. I always end with a generic grouping as well in that one edge case that the first two are not available.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;p style=&quot;font-family: Roboto, Lato, sans-serif&quot; \nid=&quot;roboto-plus-backups&quot;&gt;New York&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p>The generic grouping at the end is just the default sans-serif font for whatever device the client is using. The generic family names that are available to us: <strong>monospace<\/strong>, <strong>serif<\/strong>, <strong>sans-serif<\/strong>, <strong>cursive<\/strong>, and <strong>fantasy<\/strong>. You can also access some specific fonts like Times New Roman.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Change Font: Using a font-face<\/h2>\n\n\n\n<p>You can use the font-face rule to import a font from an external source onto your web page.<\/p>\n\n\n\n<p>To use this approach, you must have access to an external font document. Font documents usually have the extension &#8220;.ttf&#8221;.<\/p>\n\n\n\n<p>Let&#8217;s take a look at how to change a font using the font-face attribute. Here is the CSS style rule we need to use:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>@font-face {\n\tfont-family: &quot;Open Sans&quot;;\n\tsrc: url(yoururl);\n}<\/pre><\/div>\n\n\n\n<p>We use the font-face style attribute to declare our new font. The font-family attribute defines the name of our new font. src: url() instructs our CSS document on where to find our font. The value of &#8220;yoururl&#8221; should be the URL of your text font.<\/p>\n\n\n\n<p>Our font will not change our web page just yet. We have to tell our CSS style sheet which elements should use our new font:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>h1, h2, h3 {\n\tfont-family: &quot;Open Sans&quot;;\n}<\/pre><\/div>\n\n\n\n<p>This code tells our <a href=\"https:\/\/careerkarma.com\/blog\/what-is-css\/\">CSS style sheet<\/a> to apply the &#8220;Open Sans&#8221; font to some elements on our web page. h1, h2, h3 is a CSS selector that applies our style to the elements listed. These elements are HTML headings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change Font HTML: External CSS Font<\/h2>\n\n\n\n<p>Some sites such as Google Fonts let you embed a font onto your site using a CSS style sheet. These styles let you define font types using CSS attributes. In this instance, we\u2019ll try to use the \u2018Bangers\u2019 and the \u2018Yellowtail\u2019 font from Google Fonts:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;p id=&quot;sans-serif&quot; style=&quot;font-family: Bangers, sans-serif&quot; &gt;New York&lt;\/p&gt;\n&lt;p id=&quot;cursive&quot; style=&quot;font-family: Yellowtail, cursive&quot; &gt;New York&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p>If you were to run the code above in your IDE of choice and load it, it will default to the generic fonts. If you would like to use these fonts, you can though with a few simple clicks:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Visit <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">Google Fonts<\/a>.<\/li><li>Take the time to play around with the site if you\u2019d like. There\u2019s so many options for fonts here. you can customize the sample text with whatever you\u2019d like. There&#8217;s an input at the top of the web page for you to enter in what you\u2019d like.<\/li><li>Search for \u2018Yellowtail\u2019 and click on it. You should come to a screen with detailed information about the font. Look for a &#8220;<strong>+ Select This Style<\/strong>&#8221; button and click on it.<\/li><li>A sidebar drawer should have popped out with information about your selection. It\u2019ll stay open while you browse more fonts. Click the <strong>Browse Fonts<\/strong> link up at the top of the screen and search for \u2018Bangers\u2019. Walk through the same process as you did for \u2018Yellowtail\u2019.<\/li><li>On the sidebar, you\u2019ll see a tab for \u2018Embed\u2019. Click on it.<\/li><li>The <em>&lt;link&gt;<\/em> option should already be highlighted. Copy and paste the <em>&lt;link&gt;<\/em> into the head of your HTML.<\/li><li>Follow the guidelines given for how to use each font in CSS. They give recommended backup fonts as well.<\/li><li>That\u2019s it! You\u2019re ready to use these fonts in your document.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n &lt;head&gt;\n   &lt;meta charset=&quot;utf-8&quot;&gt;\n   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\n   &lt;title&gt;repl.it&lt;\/title&gt;\n   &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; \/&gt;\n&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css2?family=Bangers&amp;family=Yellowtail&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;\n \n &lt;\/head&gt;\n &lt;body&gt;\n   &lt;p id=&quot;courier&quot;&gt;New York&lt;\/p&gt;\n   &lt;p id=&quot;roboto&quot;&gt;New York&lt;\/p&gt;\n   &lt;p id=&quot;raleway&quot; style=&quot;font-family: Raleway, sans-serif&quot;&gt;New York&lt;\/p&gt;\n   &lt;p id=&quot;serif&quot; style=&quot;font-family: Courier New&quot;&gt;New York&lt;\/p&gt;\n   &lt;p id=&quot;monospace&quot; style=&quot;font-family: Roboto Monospace, monospace&quot;&gt;New York&lt;\/p&gt;\n   &lt;p id=&quot;sans-serif&quot; style=&quot;font-family: Bangers, Anton, sans-serif&quot; &gt;New York&lt;\/p&gt;\n   &lt;p id=&quot;cursive&quot; style=&quot;font-family: Yellowtail, cursive&quot; &gt;New York&lt;\/p&gt;\n   &lt;p id=&quot;roboto-condensed&quot; style=&quot;font-family: Roboto Condensed, sans-serif&quot;&gt;New York&lt;\/p&gt;\n &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>The working demo above shows both built-in and third party fonts being used. Try your hand at importing other fonts!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>You can change an HTML font by using the font-family attribute or by using an external CSS style sheet with custom fonts. To embed a custom font into the CSS of your site, you can use the font-face rule.<\/p>\n\n\n\n<p>Do you want to learn more about coding in HTML? Read our <a href=\"https:\/\/careerkarma.com\/blog\/learn-html\/\">How to Learn HTML guide<\/a>. In this guide you&#8217;ll find top tips on how to learn HTML as well as guidance on the best online courses.<\/p>\n","protected":false},"excerpt":{"rendered":"The font-family CSS rule lets you define the font of an HTML web document. To refer to external fonts, you can use the url() method to define a font face. Or, you can embed a font CSS file from a site like Google Fonts. As developers, there will be a time when we won\u2019t want&hellip;","protected":false},"author":77,"featured_media":19340,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-19339","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Change Font HTML: A How-To Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Changing the font on an HTML document is fairly straightforward. In this article, we\u2019ll talk about fonts that are readily accessible to us and how to import a font from a third party to use in our website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/html-change-font\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Change Font HTML: A How-To Guide\" \/>\n<meta property=\"og:description\" content=\"Changing the font on an HTML document is fairly straightforward. In this article, we\u2019ll talk about fonts that are readily accessible to us and how to import a font from a third party to use in our website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-change-font\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-28T10:54:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T21:03:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/jon-tyson-x5BnZEywCUg-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"768\" \/>\n\t<meta property=\"og:image:height\" content=\"1020\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Change Font HTML: A How-To Guide\",\"datePublished\":\"2020-12-28T10:54:05+00:00\",\"dateModified\":\"2020-12-29T21:03:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/\"},\"wordCount\":886,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/jon-tyson-x5BnZEywCUg-unsplash.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/\",\"name\":\"Change Font HTML: A How-To Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/jon-tyson-x5BnZEywCUg-unsplash.jpg\",\"datePublished\":\"2020-12-28T10:54:05+00:00\",\"dateModified\":\"2020-12-29T21:03:51+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Changing the font on an HTML document is fairly straightforward. In this article, we\u2019ll talk about fonts that are readily accessible to us and how to import a font from a third party to use in our website.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/jon-tyson-x5BnZEywCUg-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/jon-tyson-x5BnZEywCUg-unsplash.jpg\",\"width\":768,\"height\":1020,\"caption\":\"\u2018New York\u2019 illustrated in different fonts.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-change-font\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Change Font HTML: A How-To Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Change Font HTML: A How-To Guide | Career Karma","description":"Changing the font on an HTML document is fairly straightforward. In this article, we\u2019ll talk about fonts that are readily accessible to us and how to import a font from a third party to use in our website.","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:\/\/careerkarma.com\/blog\/html-change-font\/","og_locale":"en_US","og_type":"article","og_title":"Change Font HTML: A How-To Guide","og_description":"Changing the font on an HTML document is fairly straightforward. In this article, we\u2019ll talk about fonts that are readily accessible to us and how to import a font from a third party to use in our website.","og_url":"https:\/\/careerkarma.com\/blog\/html-change-font\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-12-28T10:54:05+00:00","article_modified_time":"2020-12-29T21:03:51+00:00","og_image":[{"width":768,"height":1020,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/jon-tyson-x5BnZEywCUg-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Change Font HTML: A How-To Guide","datePublished":"2020-12-28T10:54:05+00:00","dateModified":"2020-12-29T21:03:51+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/"},"wordCount":886,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/jon-tyson-x5BnZEywCUg-unsplash.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-change-font\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/","url":"https:\/\/careerkarma.com\/blog\/html-change-font\/","name":"Change Font HTML: A How-To Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/jon-tyson-x5BnZEywCUg-unsplash.jpg","datePublished":"2020-12-28T10:54:05+00:00","dateModified":"2020-12-29T21:03:51+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Changing the font on an HTML document is fairly straightforward. In this article, we\u2019ll talk about fonts that are readily accessible to us and how to import a font from a third party to use in our website.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-change-font\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/jon-tyson-x5BnZEywCUg-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/jon-tyson-x5BnZEywCUg-unsplash.jpg","width":768,"height":1020,"caption":"\u2018New York\u2019 illustrated in different fonts."},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-change-font\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"Change Font HTML: A How-To Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19339"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19339\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/19340"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}