{"id":10608,"date":"2018-02-19T14:26:33","date_gmt":"2018-02-19T14:26:33","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=10608"},"modified":"2025-12-30T19:24:46","modified_gmt":"2025-12-30T17:24:46","slug":"custom-fonts","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/custom-fonts\/","title":{"rendered":"How to Add Custom Fonts to Your WordPress Website"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"10608\" class=\"elementor elementor-10608\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fb01340 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fb01340\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-51f7290\" data-id=\"51f7290\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ddaf712 elementor-widget elementor-widget-text-editor\" data-id=\"ddaf712\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tired of your run of the mill Sans Serif fonts like Arial, Helvetica, and others? Fed up with all of all those default fonts that you get? Surely you want to stand out from the crowd. So why not try a different font \u2014 a custom font.\u00a0<\/p><p>While Elementor comes pre-built with 800+ different Google fonts to choose from, sometimes, the default, easy Google fonts are simply not enough.<\/p><p>Given how beneficial it can be to invest in a website&#8217;s <a href=\"https:\/\/elementor.com\/blog\/guide-to-web-typography\/\" target=\"_blank\" rel=\"noopener\">web typography<\/a>, many web designers want to be able to create that extra branded and professional style, achieved only with custom fonts. Now, we bring you a new easy way to upload your own <strong>custom fonts<\/strong> with no additional fonts plugins.\u00a0<\/p><p>Simply upload your custom font formats, and see them instantly appear inside the widget <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"26 Best Fonts For Websites &amp; Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26955\">typography<\/a> settings. We&#8217;ve also added a seamless integration to Typekit fonts, letting you sync and use all your Typekit fonts with a simple click. Get total font control and change fonts as much as you&#8217;d like with Elementor.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-73bbbd14 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"73bbbd14\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-65269378\" data-id=\"65269378\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e9d6288 read-more-link elementor-widget elementor-widget-heading\" data-id=\"e9d6288\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/blog\/web-fonts\/\">Discover the 40 Best Fonts for Websites<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-272b1f4 blog-toc elementor-widget elementor-widget-heading\" data-id=\"272b1f4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c96d9ea blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"c96d9ea\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#add-custom-fonts-manually\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Add Custom Fonts to WordPress Manually<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#add-custom-fonts-using-elementor\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Add Custom Fonts to WordPress Using Elementor<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#find-custom-fonts\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Where to Find Custom Fonts\u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#font-weights-styles\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Font Weights and Styles\u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-193cd7b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"193cd7b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-25c4e42\" data-id=\"25c4e42\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3dff6f4 elementor-widget elementor-widget-menu-anchor\" data-id=\"3dff6f4\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"add-custom-fonts-manually\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a4d312 elementor-widget elementor-widget-heading\" data-id=\"4a4d312\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adding Custom Fonts to WordPress Manually<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a5cb222 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a5cb222\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-054b4bd\" data-id=\"054b4bd\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fa2bdab elementor-widget elementor-widget-text-editor\" data-id=\"fa2bdab\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There&#8217;s a method to add custom fonts to WordPress manually, but it requires some tech-savvy and may be difficult for some users.\u00a0<\/p><p>This method involves working with WordPress folders.\u00a0<\/p><p>1. Add a new \u201cfonts\u201d folder to your theme&#8217;s folder via an FTP client. The new folder should be located under <strong>wp-content\/themes\/fonts\u00a0<\/strong><\/p><p>2. Once, you&#8217;ve added the new \u201cfonts\u201d folder add all font files to it.<\/p><p>3. Now, open the theme\u2019s stylesheet (style.<a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"32030\">css<\/a>) and add the following code to it:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bbaaeb5 elementor-widget elementor-widget-code-highlight\" data-id=\"bbaaeb5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>@font-face {\n\tfont-family: 'nameofnewfont';\n\tsrc: url(\"\/fonts\/nameofnewfont.woff2\") format(\"woff2\"),\n\t\t url(\"\/fonts\/nameofnewfont.woff\") format(\"woff\");\n\tfont-weight: normal;\n\tfont-style: normal;\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8391800 elementor-widget elementor-widget-text-editor\" data-id=\"8391800\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>4. Configure the elements that will use this font by adding them to the same stylesheet.\u00a0<\/p><p>This method can be a pain for beginners. Whenever you\u2019d like to add configurations like \u201citalics\u201d or \u201cbold\u201d, you\u2019ll have to go through the same process and add those parameters. There is a lot of coding involved.<\/p><p>For those who don\u2019t want to deal with that technical mumbo jumbo \u2014 that\u2019s exactly where Elementor comes to the rescue. Check out this great <a href=\"https:\/\/youtu.be\/lskSCRBVU1k\">video tutorial<\/a>.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-379ccc6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"379ccc6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-698fcc5\" data-id=\"698fcc5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d7b2190 elementor-widget elementor-widget-menu-anchor\" data-id=\"d7b2190\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"add-custom-fonts-using-elementor\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-96af1cf elementor-widget elementor-widget-heading\" data-id=\"96af1cf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Add Custom Fonts to WordPress Using Elementor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7cffd0d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7cffd0d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-57ed277\" data-id=\"57ed277\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6e1ee28 elementor-widget elementor-widget-text-editor\" data-id=\"6e1ee28\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In order to get visitors to see custom fonts on your WordPress site, the fonts must be uploaded to your site as standard file formats. There are several such font formats, each offering support for different browsers. The font types include:<\/p><ul><li><strong>The Web Open Font Format (WOFF)<\/strong> \u2013 WOFF is the most recommended format to use since it is supported by all modern browsers<\/li><li><strong>The Web Open Font Format (WOFF 2.0)<\/strong> \u2013 TrueType (TTF) \/ OpenType (OTF) font that provides better compression than WOFF 1.0<\/li><li><strong>TrueType Fonts (TTF)<\/strong> \u2013 This font was developed in the late 1980s, by Apple and Microsoft.\u00a0<\/li><li><strong>SVG Fonts\/Shapes <\/strong>\u2013 SVG fonts allow SVG to be used as glyphs when displaying text. Make sure to use this format to support old versions of iPhone<\/li><li><strong>Embedded OpenType Fonts (EOT)<\/strong> \u2013 This font file works on IE, but not on other browsers. Make sure to use this format to support earlier versions of IE<\/li><\/ul><p>In Elementor, we&#8217;ve made it easy to upload your custom web font formats:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5b0259e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5b0259e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6f63f03\" data-id=\"6f63f03\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-97e6034 elementor-widget elementor-widget-text-editor\" data-id=\"97e6034\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>1. Head over to the WordPress Dashboard &gt; Elementor &gt; Custom Fonts, and click \u2018Add new\u2019.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-83f760d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"83f760d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6f92350\" data-id=\"6f92350\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0cac2fc elementor-widget elementor-widget-image\" data-id=\"0cac2fc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image4-r4q76nz4zo4xyovaaa92j2rnb1a14ls9h1rkdyugty.png\" title=\"image4\" alt=\"image4\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7a35a70 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7a35a70\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-30eb53b\" data-id=\"30eb53b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3caedd2 elementor-widget elementor-widget-text-editor\" data-id=\"3caedd2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>2. Now, add any font by adding the font name and uploading its <b>WOFF<\/b>, <b>WOFF2<\/b>, <b>TTF<\/b>, <b>SVG <\/b>or <b>EOT <\/b>file. It is recommended that you upload as many font files as possible, in order to provide support for the maximum number of browsers.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-de90bf0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"de90bf0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ee95f09\" data-id=\"ee95f09\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c9d445f elementor-widget elementor-widget-image\" data-id=\"c9d445f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image2-r4q76qsnk68sxir6ttgy8k2136w4rp3ghfq0tsq96g.png\" title=\"image2\" alt=\"image2\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ef023a9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ef023a9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8b9232b\" data-id=\"8b9232b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-691d3ec elementor-widget elementor-widget-text-editor\" data-id=\"691d3ec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>3. Once uploaded, your new custom fonts will be available in the typography controls of every widget that contains the text. Head over to Elementor and start using the new fonts in your pages. Add a heading or any other text widget, and under Style &gt; Typography choose your custom font.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7340bd3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7340bd3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cef11e6\" data-id=\"cef11e6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f50dd2c elementor-widget elementor-widget-image\" data-id=\"f50dd2c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"408\" height=\"717\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=408,h=717\/blog\/wp-content\/uploads\/2018\/02\/image1.png\" class=\"attachment-large size-large wp-image-38211\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=408\/blog\/wp-content\/uploads\/2018\/02\/image1.png 408w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=171\/blog\/wp-content\/uploads\/2018\/02\/image1-171x300.png 171w\" sizes=\"(max-width: 408px) 100vw, 408px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-929f9f5 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"929f9f5\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b395589\" data-id=\"b395589\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b46d52f elementor-widget elementor-widget-menu-anchor\" data-id=\"b46d52f\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"find-custom-fonts\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4243fa elementor-widget elementor-widget-heading\" data-id=\"e4243fa\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Where to Find Custom Fonts<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d0136b6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d0136b6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fee2c19\" data-id=\"fee2c19\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d7049bf elementor-widget elementor-widget-text-editor\" data-id=\"d7049bf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are many websites that offer free fonts, and the more sophisticated and unique premium fonts like Font Squirrel, DaFont, Fontsly, and others. But there are also some services that offer a more tailored experience, like Adobe Typekit.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4e4a9cc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4e4a9cc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-84708e3\" data-id=\"84708e3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-03a2839 elementor-widget elementor-widget-heading\" data-id=\"03a2839\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Adobe Typekit Now Available in Elementor<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0ac12a0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0ac12a0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3727fe8\" data-id=\"3727fe8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-968ba55 elementor-widget elementor-widget-image\" data-id=\"968ba55\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/image3-r4q6xf89sbhfsqam9af50eqh0mu3fr3a7atoi0jtg2.png\" title=\"image3\" alt=\"image3\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9030d5a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9030d5a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-82f0fc4\" data-id=\"82f0fc4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d2f7c4c elementor-widget elementor-widget-text-editor\" data-id=\"d2f7c4c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/typekit.com\/\">Adobe Typekit<\/a> is a subscription service for fonts which you can sync to your computer or use on a website. With Typekit, you can download any of the thousands of adobe fonts available, and use them on your site.\u00a0<\/p><p>Adobe offers 2 Typekit fonts for free, so you can try it out first and see how you like it.<\/p><p>The biggest advantage of using Typekit on web design projects is its seamless integration. Designers, who already use Photoshop, get instant access to thousands of professional fonts from within their interface, all synced and easily handy. They don&#8217;t need to deal with font downloads or a confusing setup.<\/p><p>Typekit works seamlessly with Elementor. You simply enter your Typekit key in the settings dashboard (Integrations tab), and instantly get all your Typekit fonts inside the various typography settings in Elementor. Using this integration, you don&#8217;t need to download, install or code anything to use your Typekit fonts.<\/p><p>Moving from Photoshop PSD to a finished live WordPress design has never been simpler, using this Typekit integration.<\/p><p>Under Elementor &gt; Settings &gt; Integrations you can add your Typekit Kit ID. Once you add it, click on \u2018Sync Kit&#8217;. Wait a few minutes, and you should see all your Typekit fonts in Elementor. After adding new fonts to your Typekit account, don&#8217;t forget to go back to the integrations page and sync your fonts again.<\/p><p><strong>Note:<\/strong> It may take a few minutes for Adobe to update their <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/cdn\/\"   title=\"What Is A CDN (Content Delivery Network)?\u00a02025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26956\">CDN<\/a> network and get your fonts into Elementor, so please be patient after adding your key.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6b839a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6b839a6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-93b942e\" data-id=\"93b942e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0d1778d elementor-widget elementor-widget-menu-anchor\" data-id=\"0d1778d\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"font-weights-styles\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8af1338 elementor-widget elementor-widget-heading\" data-id=\"8af1338\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Font Weights and Styles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4a0c903 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4a0c903\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fbb2387\" data-id=\"fbb2387\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3bf4bd1 elementor-widget elementor-widget-text-editor\" data-id=\"3bf4bd1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Custom fonts are grouped into families. Each font family includes its own set of weights and styles, uploaded separately.\u00a0<\/p><p>A font family could include a set of weights, spanning between 100-900, as well as Normal, <strong><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"How to Make Text Bold in HTML &#038; CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26954\">Bold<\/a><\/strong>, <strong>Bolder<\/strong> or Lighter weights. It can also include Normal, <em>Oblique<\/em> or <em>Italic<\/em> fonts. Any variation of weight &amp; style can be added separately to the font family group.<\/p><p>If you were to CSS code, you&#8217;d use commands like font-face, or font-style to make sure that the end result would be exactly as you want it, however, once you upload your font variations, you&#8217;ll be able to choose the font inside Elementor and adjust its weight and style accordingly and easily.<\/p><p><strong>Note:<\/strong> If you don&#8217;t upload a certain weight, it will not be available in the editor. Instead, supporting browsers \u2014 like Firefox, Safari, Chrome, and others, will fall back to the closest available weight.<\/p><p>So, while you can use default fonts, or add google fonts, you can also spice your game up a bit and use custom fonts. Find a custom font that will make your work stand out and start using custom fonts on your own WordPress website projects with <a href=\"https:\/\/elementor.com\/pro?utm_source=blog&amp;utm_medium=banner&amp;utm_campaign=customfonts\">Elementor Pro<\/a>.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c83b6b elementor-cta--skin-cover elementor-bg-transform elementor-bg-transform-zoom-out elementor-animated-content elementor-widget elementor-widget-call-to-action\" data-id=\"5c83b6b\" data-element_type=\"widget\" data-widget_type=\"call-to-action.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-cta\">\n\t\t\t\t\t<div class=\"elementor-cta__bg-wrapper\">\n\t\t\t\t<div class=\"elementor-cta__bg elementor-bg\" style=\"background-image: url(https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/pro-icons-cta.png);\" role=\"img\" aria-label=\"pro-icons-cta\"><\/div>\n\t\t\t\t<div class=\"elementor-cta__bg-overlay\"><\/div>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-cta__content\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-content-item elementor-cta__content-item elementor-cta__image elementor-animated-item--grow\">\n\t\t\t\t\t\t<img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=150,h=150\/blog\/wp-content\/uploads\/2017\/01\/White-logo-150x150.png\" class=\"attachment-thumbnail size-thumbnail wp-image-1806\" alt=\"Elementor Page Builder for WordPress\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=150\/blog\/wp-content\/uploads\/2017\/01\/White-logo-150x150.png 150w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2017\/01\/White-logo.png 300w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/>\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<h2 class=\"elementor-cta__title elementor-cta__content-item elementor-content-item elementor-animated-item--grow\">\n\t\t\t\t\t\tWant to Create More Unique Websites?\t\t\t\t\t<\/h2>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-cta__description elementor-cta__content-item elementor-content-item elementor-animated-item--grow\">\n\t\t\t\t\t\tUse Custom Fonts to build top-notch websites that clients desire. Upgrade to Pro and start building beautiful branded websites today.\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-cta__button-wrapper elementor-cta__content-item elementor-content-item elementor-animated-item--grow\">\n\t\t\t\t\t<a class=\"elementor-cta__button elementor-button elementor-size-md\" href=\"https:\/\/elementor.com\/pro?utm_source=blog&#038;utm_medium=banner&#038;utm_campaign=customfonts\">\n\t\t\t\t\t\tGet Pro \u2192\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elementor introduces Custom Fonts. Add your self-hosted &amp; Typekit fonts, and use them on your Elementor projects to create a unique brand language. <\/p>\n","protected":false},"author":4,"featured_media":10906,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15,32,43],"tags":[80,173],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-10608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-new-features","category-design","category-wordpress","tag-pro","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Custom Fonts to Your WordPress Website | Elementor<\/title>\n<meta name=\"description\" content=\"Tired of your run of the mill San Serif fonts like Arial, Helvetica, and others? Add custom fonts to WordPress using Elementor and stand out from the crowd!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/custom-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Custom Fonts to Your WordPress Website | Elementor\" \/>\n<meta property=\"og:description\" content=\"Tired of your run of the mill San Serif fonts like Arial, Helvetica, and others? Add custom fonts to WordPress using Elementor and stand out from the crowd!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/custom-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-19T14:26:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-30T17:24:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Pines\" \/>\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:\/\/elementor.com\/blog\/custom-fonts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"How to Add Custom Fonts to Your WordPress Website\",\"datePublished\":\"2018-02-19T14:26:33+00:00\",\"dateModified\":\"2025-12-30T17:24:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/\"},\"wordCount\":1210,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png\",\"keywords\":[\"Pro\",\"Video\"],\"articleSection\":[\"New Features\",\"Web Design\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/custom-fonts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/\",\"url\":\"https:\/\/elementor.com\/blog\/custom-fonts\/\",\"name\":\"How to Add Custom Fonts to Your WordPress Website | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png\",\"datePublished\":\"2018-02-19T14:26:33+00:00\",\"dateModified\":\"2025-12-30T17:24:46+00:00\",\"description\":\"Tired of your run of the mill San Serif fonts like Arial, Helvetica, and others? Add custom fonts to WordPress using Elementor and stand out from the crowd!\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/custom-fonts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png\",\"width\":1200,\"height\":628,\"caption\":\"custom fonts\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/custom-fonts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress\",\"item\":\"https:\/\/elementor.com\/blog\/category\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Custom Fonts to Your WordPress Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Custom Fonts to Your WordPress Website | Elementor","description":"Tired of your run of the mill San Serif fonts like Arial, Helvetica, and others? Add custom fonts to WordPress using Elementor and stand out from the crowd!","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:\/\/elementor.com\/blog\/custom-fonts\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Custom Fonts to Your WordPress Website | Elementor","og_description":"Tired of your run of the mill San Serif fonts like Arial, Helvetica, and others? Add custom fonts to WordPress using Elementor and stand out from the crowd!","og_url":"https:\/\/elementor.com\/blog\/custom-fonts\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2018-02-19T14:26:33+00:00","article_modified_time":"2025-12-30T17:24:46+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/custom-fonts\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/custom-fonts\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"How to Add Custom Fonts to Your WordPress Website","datePublished":"2018-02-19T14:26:33+00:00","dateModified":"2025-12-30T17:24:46+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/custom-fonts\/"},"wordCount":1210,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/custom-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png","keywords":["Pro","Video"],"articleSection":["New Features","Web Design","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/custom-fonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/custom-fonts\/","url":"https:\/\/elementor.com\/blog\/custom-fonts\/","name":"How to Add Custom Fonts to Your WordPress Website | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/custom-fonts\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/custom-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png","datePublished":"2018-02-19T14:26:33+00:00","dateModified":"2025-12-30T17:24:46+00:00","description":"Tired of your run of the mill San Serif fonts like Arial, Helvetica, and others? Add custom fonts to WordPress using Elementor and stand out from the crowd!","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/custom-fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/custom-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/custom-fonts\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2018\/02\/elementor-custom-font-typekit.png","width":1200,"height":628,"caption":"custom fonts"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/custom-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress","item":"https:\/\/elementor.com\/blog\/category\/wordpress\/"},{"@type":"ListItem","position":3,"name":"How to Add Custom Fonts to Your WordPress Website"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/10608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=10608"}],"version-history":[{"count":10,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/10608\/revisions"}],"predecessor-version":[{"id":149207,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/10608\/revisions\/149207"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/10906"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=10608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=10608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=10608"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=10608"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=10608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}