{"id":10385,"date":"2026-05-13T11:57:41","date_gmt":"2026-05-13T10:57:41","guid":{"rendered":"https:\/\/josepgonzalez.com\/fuentes-tipografias-wordpress\/"},"modified":"2026-10-31T16:39:37","modified_gmt":"2026-10-31T15:39:37","slug":"add-fonts-wordpress","status":"publish","type":"post","link":"https:\/\/josepgonzalez.com\/en\/add-fonts-wordpress\/","title":{"rendered":"How to Add New Fonts to WordPress"},"content":{"rendered":"<p>If you have landed on this post, you are tired of the default typography in your WordPress, and you are right. To stand out among the billions of websites that exist we have to be different, so today\u2019s post is about <strong>how to add custom fonts to your WordPress website<\/strong> without dying in the attempt. And we do it with current methods, because since I wrote the first version of this article the way to do it has changed quite a bit.<\/p>\n<p>Fonts are an important part of our website design and can even help us define our brand. Although do not think you must use your logo typeface for the whole website. No. Stop thinking that. You can use it to highlight certain things, but NOT for everything.<\/p>\n<h2>What options do you have today to change fonts in WordPress<\/h2>\n<p>There are several ways, depending on how your website is built:<\/p>\n<ul>\n<li><strong>With your visual page builder<\/strong> (like Elementor): the simplest option if you already use it. You will see how in the next section.<\/li>\n<li><strong>With the WordPress Font Library<\/strong>, if you use a block theme (Site Editor).<\/li>\n<li><strong>With a plugin<\/strong> that downloads Google Fonts to your server.<\/li>\n<li><strong>Uploading your own fonts<\/strong> (for example, your brand typeface).<\/li>\n<\/ul>\n<h2>1. With Elementor (and other page builders)<\/h2>\n<p>If your website is built with <a href=\"https:\/\/josepgonzalez.com\/en\/visual-page-builder\/\">a visual page builder like Elementor<\/a>, you can define the global fonts for the whole website in <strong>Site Settings &gt; Global Fonts<\/strong>: you choose the font for headings, text and buttons, and it applies on all pages. It is the fastest and most consistent way, and it also lets you change them in one place whenever you want. With Elementor Pro you can also upload <strong>custom fonts<\/strong>.<\/p>\n<h2>2. With the WordPress Font Library<\/h2>\n<p>Since WordPress 6.5, block themes include a <strong>Font Library<\/strong>. From <strong>Site Editor &gt; Styles &gt; Typography<\/strong> you can install fonts from Google Fonts or upload your own and apply them to the whole website without plugins. An important detail: the fonts are hosted on your own server, which helps with privacy and speed.<\/p>\n<h2>3. Hosting Google Fonts on your own server<\/h2>\n<p>Most developers use <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Google Fonts<\/strong><\/a>: they are reliable and, of course, free. But today it is important to know that <strong>loading them directly from Google\u2019s servers<\/strong> sends the visitor\u2019s IP address to Google, and that has caused GDPR compliance problems in Europe (including rulings in Germany). The solution is to <strong>host them on your own server<\/strong>:<\/p>\n<ul>\n<li>With a plugin like <strong>OMGF<\/strong> (Optimize My Google Fonts), which downloads and serves the fonts locally.<\/li>\n<li>From the options of your page builder or optimization plugin (some include local loading of Google Fonts).<\/li>\n<li>By downloading the fonts from Google Fonts and uploading them to your website in <strong>WOFF2<\/strong> format.<\/li>\n<\/ul>\n<p>As for the plugin I used in the previous version of this post, <em>Easy Google Fonts<\/em>, it stopped being updated regularly some time ago and does not work well with current themes, so I no longer recommend it.<\/p>\n<h2>Best practices with fonts<\/h2>\n<ul>\n<li><strong>A maximum of 2 typefaces:<\/strong> one for headings and another for text. More fonts give a bad first impression, a messy website and, most importantly, slow down loading.<\/li>\n<li><strong>Load only the weights you use<\/strong> (regular and bold, for example), not the whole family. Even better, use <em>variable fonts<\/em>.<\/li>\n<li><strong>Use WOFF2 format and <code>font-display: swap<\/code><\/strong> so text is visible while the font downloads.<\/li>\n<li><strong>Take care of readability:<\/strong> text size (at least 16 px on mobile), line spacing and good contrast.<\/li>\n<li><strong>Measure the impact:<\/strong> I said it back then and I will not get tired of repeating it, loading speed is very important. Review it in <a href=\"https:\/\/josepgonzalez.com\/en\/website-loading-speed\/\">how to measure your website\u2019s loading speed<\/a>.<\/li>\n<\/ul>\n<h2>Frequently asked questions<\/h2>\n<h3>Can I use fonts that are not from Google?<\/h3>\n<p>Yes. You can upload your own fonts (checking that their license allows web use) with Elementor Pro, with the WordPress Font Library or with custom font plugins.<\/p>\n<h3>Do fonts affect my website speed?<\/h3>\n<p>Yes. The more fonts and weights you load, the heavier the page. That is why it is worth limiting them.<\/p>\n<h3>Is it legal to use Google Fonts on my website?<\/h3>\n<p>Yes, but to respect your visitors\u2019 privacy it is recommended to serve them from your own server and not from Google.<\/p>\n<p>And that is it for this short tutorial on <strong>how to add custom fonts to our WordPress website<\/strong>! I hope it has helped you. As always, if you have any comment you can leave it below and share this post on your networks. And if you have any questions about <a href=\"https:\/\/josepgonzalez.com\/en\/what-is-wordpress\/\">WordPress<\/a> and want me to go deeper on it, contact me. Your requests are orders for me.<\/p>\n<p>If you want typography sorted out from the start, I handle it in my <a href=\"https:\/\/josepgonzalez.com\/en\/wordpress-web-designer\/\">WordPress web design<\/a> service.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you have landed on this post, you are tired of the default typography in your WordPress, and you are right. To stand out among the billions of websites that exist we have to be different, so today\u2019s post is about how to add custom fonts to your WordPress website without dying in the attempt. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10645,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[92],"tags":[],"class_list":["post-10385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-en"],"_links":{"self":[{"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/posts\/10385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/comments?post=10385"}],"version-history":[{"count":2,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/posts\/10385\/revisions"}],"predecessor-version":[{"id":10728,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/posts\/10385\/revisions\/10728"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/media\/10645"}],"wp:attachment":[{"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/media?parent=10385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/categories?post=10385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/josepgonzalez.com\/en\/wp-json\/wp\/v2\/tags?post=10385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}