{"id":3259,"date":"2020-10-13T16:07:13","date_gmt":"2020-10-13T16:07:13","guid":{"rendered":"https:\/\/figand.net\/?p=3259"},"modified":"2020-10-13T16:07:13","modified_gmt":"2020-10-13T16:07:13","slug":"como-instalo-tipos-de-letra-personalizados-en-wordpress","status":"publish","type":"post","link":"https:\/\/figand.net\/en\/como-instalo-tipos-de-letra-personalizados-en-wordpress\/","title":{"rendered":"How to install custom fonts in WordPress?"},"content":{"rendered":"<p>Do you have a website built on WordPress and don't know how to install custom fonts? Have you noticed that the available fonts don't suit your taste? Using custom fonts different from the default ones is easier than you think! Here are two ways to do it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/a\/ae\/WordPress.svg\/1200px-WordPress.svg.png\" alt=\"WordPress - Wikipedia, la enciclopedia libre\" width=\"300\" height=\"187\"\/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">01. PLUGINS<\/h4>\n\n\n\n<p><strong>Use Any Font<\/strong><\/p>\n\n\n\n<p>This plugin allows you to upload fonts directly from your computer and supports formats like ttf, otf, eot, woff, svg, dfont, and suit. It works with major browsers such as Edge, Firefox, Chrome, Safari, Opera, and others. Font loading time is good since they are hosted directly on your site.<\/p>\n\n\n\n<p><strong>Easy Google Fonts<\/strong><\/p>\n\n\n\n<p>This plugin loads fonts directly from the Google Fonts database. This means:&nbsp;<em>Google Fonts<\/em>. Esto significa que:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The font doesn't need to be on your computer; it must be in the Google Fonts repository to load. <\/li>\n\n\n\n<li>It has 915 font types in its database. <\/li>\n\n\n\n<li>It has a system that allows you to suggest similar fonts if the one you need isn't available.<\/li>\n\n\n\n<li>Fonts will load from Google's server, so they won't take up space on your server.<\/li>\n\n\n\n<li>You won't have compatibility issues between browsers.<\/li>\n<\/ul>\n\n\n\n<p><strong>WP Google Fonts<\/strong><\/p>\n\n\n\n<p>This plugin allows you to add fonts from the Google Fonts repository with a limit of up to 6 per page. This is because an excess of fonts can slow down your page and make it look bad.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/max\/600\/1*OFsc0SD55jhi8cjo7aCA4w.jpeg\" alt=\"CSS. Tal vez te preguntes qu\u00e9 es CSS, pues\u2026 | by Ang\u00e9lica Vel\u00e1zquez | KAN  by MUKTEK Academy\"\/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">02. <strong>Insert with CSS:<\/strong><\/h4>\n\n\n\n<p>If you have the font installed on your computer or downloaded in your files, you can upload it to the server via FTP and then link it with CSS. You'll need to use a tool that converts your file to all compatible font formats so that all browsers can read it. <\/p>\n\n\n\n<p>You can do this from <a href=\"https:\/\/www.fontsquirrel.com\/tools\/webfont-generator\" target=\"_blank\" rel=\"noreferrer noopener\">\u201cGenerator\u201d de Font Squirrel<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now, upload the font via FTP with all its extensions to an existing directory or create one, for example, a folder called \"fonts\" in the root of the WordPress installation. <\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit the style sheet of your active theme:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>@font-face {&nbsp;&nbsp;&nbsp;<br>&nbsp; \/\/Nombre por el que llamaremos a la fuente&nbsp;&nbsp;&nbsp;&nbsp;<br>font-family: &#8216;tufuente&#8217;; &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp; \/\/Referencia de todo los formatos&nbsp;&nbsp;&nbsp;&nbsp; <br>src: url(&#8216;\/fuentes\/tufuente.eot&#8217;);&nbsp;&nbsp;&nbsp;&nbsp; <br>src: url(&#8216;\/fuentes\/tufuente.eot?#iefix&#8217;) format(&#8217;embedded-opentype&#8217;),&nbsp;&nbsp;&nbsp;&nbsp; <br>url(&#8216;\/fuentes\/tufuente.woff2&#8217;) format(&#8216;woff2&#8217;),&nbsp;&nbsp;&nbsp;&nbsp;<br>url(&#8216;\/fuentes\/tufuente.woff&#8217;) format(&#8216;woff&#8217;),&nbsp;&nbsp;&nbsp;&nbsp; <br>url(&#8216;\/fuentes\/tufuente.ttf&#8217;) format(&#8216;truetype&#8217;),&nbsp;&nbsp;&nbsp;&nbsp; <br>url(&#8216;\/fuentes\/tufuente.svg#tufuente&#8217;) format(&#8216;svg&#8217;);&nbsp;&nbsp;&nbsp;&nbsp; <br>font-weight: normal;&nbsp;&nbsp;&nbsp;&nbsp; <br>font-style: normal;<br>}<\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>In this example, \"tufuente\" will be replaced by the name of the font you upload. The src and url should be replaced by the path where your files were uploaded. In our example, the \"fonts\" folder in the WordPress root.<\/p>\n\n\n\n<p>Now just use it. For example, if you want to assign it to titles:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>h2, h3, h4{&nbsp;<br>&nbsp;&nbsp;&nbsp; font-family: &#8216;tufuente&#8217;;<br> }<\/td><td>h<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>And if the titles already have a different font assigned, or you're looking for the line and replace it, or you add !important to give priority to your modification:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>h1, h2, h3, h4{&nbsp;&nbsp;&nbsp;&nbsp; <br>font-family: &#8216;tufuente&#8217; !important;<br>}<br><\/td><td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/figand.net\/wp-content\/uploads\/2020\/10\/image-5.png\" alt=\"Fonts for Print, Products &amp; Screens | MyFonts\" class=\"wp-image-3262\" width=\"326\" height=\"155\"\/><\/figure>\n<\/div>\n\n\n<h4 class=\"wp-block-heading\">Download Fonts!<\/h4>\n\n\n\n<p>If you're not sure where to download your favorite fonts, here's a list of websites where you'll find almost unlimited fonts of any style:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.myfonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">MyFonts<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.dafont.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">dafonts<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.fontsquirrel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Squirrel<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.fonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">fonts<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.1001freefonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">1001freefonts<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.google.com\/webfonts\" target=\"_blank\" rel=\"noreferrer noopener\">Google Web Fonts<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>\u00bfTienes un sitio web construido en WordPress y no sabes c\u00f3mo instalar tipos de letra personalizadas? \u00bfHas notado que el tipo de letras disponibles no te gustan? \u00a1Utilizar fuentes personalizadas y diferentes a las que vienen por defecto es m\u00e1s f\u00e1cil de lo que crees! Aqu\u00ed te dejamos dos formas de hacerlo: 01. PLUGINS Use [&hellip;]<\/p>","protected":false},"author":1,"featured_media":1898,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-3259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u00bfC\u00f3mo instalo tipos de letra personalizados en Wordpress? - Desarrollo m\u00f3vil y de p\u00e1ginas web<\/title>\n<meta name=\"description\" content=\"\u00bfTienes un sitio web construido en Wordpress y no sabes c\u00f3mo instalar letras personalizadas? e dejamos dos formas de hacerlo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/figand.net\/en\/como-instalo-tipos-de-letra-personalizados-en-wordpress\/\" \/>\n<meta name=\"author\" content=\"PF_admin\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfC\u00f3mo instalo tipos de letra personalizados en Wordpress? - Desarrollo m\u00f3vil y de p\u00e1ginas web","description":"\u00bfTienes un sitio web construido en Wordpress y no sabes c\u00f3mo instalar letras personalizadas? e dejamos dos formas de hacerlo.","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:\/\/figand.net\/en\/como-instalo-tipos-de-letra-personalizados-en-wordpress\/","author":"PF_admin","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/figand.net\/como-instalo-tipos-de-letra-personalizados-en-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/figand.net\/"},{"@type":"ListItem","position":2,"name":"\u00bfC\u00f3mo instalo tipos de letra personalizados en WordPress?"}]}]}},"jetpack_featured_media_url":"https:\/\/figand.net\/wp-content\/uploads\/2019\/02\/website-under-construction-02-.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/posts\/3259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/comments?post=3259"}],"version-history":[{"count":0,"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/posts\/3259\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/media\/1898"}],"wp:attachment":[{"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/media?parent=3259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/categories?post=3259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/figand.net\/en\/wp-json\/wp\/v2\/tags?post=3259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}