{"id":90,"date":"2022-11-15T18:19:12","date_gmt":"2022-11-15T18:19:12","guid":{"rendered":"http:\/\/javigomez.org\/?p=90"},"modified":"2025-09-29T20:34:30","modified_gmt":"2025-09-29T20:34:30","slug":"utilizar-una-fuente-que-no-sea-de-sistema-en-tu-html-fuente-en-tu-web","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2022\/11\/15\/utilizar-una-fuente-que-no-sea-de-sistema-en-tu-html-fuente-en-tu-web\/","title":{"rendered":"Utilizar una fuente  que no sea de sistema en tu HTML (fuente en tu web)"},"content":{"rendered":"\n<p>Como ejemplo, vamos a ir a Google Fonts (https:\/\/fonts.google.com\/) y vamos a descargar una fuente.  En mi caso he optado por la Pacifico, una fuente de escritura a mano de uso libre. Cuando la hemos encontrado en esta web, pulsamos sobre el bot\u00f3n superior derecho que pone &#8220;Download family&#8221; y descargamos un .zip con la fuente<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2022\/11\/image-29-1-13-1.png\" alt=\"\" class=\"wp-image-91\"\/><\/figure>\n\n\n\n<p>Una vez que tenemos el .zip, lo descomprimimos y se mete el archivo Pacifico-Regular.ttf sobre un directorio \/fonts<\/p>\n\n\n\n<p>A continuaci\u00f3n creamos un archivo html para probar que la fuente.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!doctype html>\n&lt;html>\n\n&lt;head>\n\t&lt;meta charset=\"utf-8\">\n\t&lt;title>Fuente&lt;\/title>\n\t&lt;link rel=\"stylesheet\" href=\"DI_U2_5Fonts.css\">\n&lt;\/head>\n\n&lt;body>\n\n\t&lt;div id=\"fuente\">\n\t\tTexto con la fuente Pacifico\n\t&lt;\/div>\n\t&lt;div>\n\t\tTexto sin la fuente Pacifico\n\t&lt;\/div>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>En la css ponemos el siguiente c\u00f3digo para recuperar la fuente<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: Pacifico;\n  font-style: normal;\n  font-weight: 400;\n  src:\n   local(\"Pacifico\"),\n   url(\".\/fonts\/Pacifico-Regular.ttf\")\n}\n  #fuente{\n\tfont-family: Pacifico;\n    font-size: 25px;\n  }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Como ejemplo, vamos a ir a Google Fonts (https:\/\/fonts.google.com\/) y vamos a descargar una fuente. En mi caso he optado por la Pacifico, una fuente &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[106,166,186],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-fuentes","tag-html"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":987,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/90\/revisions\/987"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}