{"id":88,"date":"2022-09-03T16:10:37","date_gmt":"2022-09-03T16:10:37","guid":{"rendered":"https:\/\/pacohunterdev.com\/blog\/?p=88"},"modified":"2022-09-03T16:10:37","modified_gmt":"2022-09-03T16:10:37","slug":"usar-fuentes-de-google-en-pagina-web","status":"publish","type":"post","link":"https:\/\/pacohunterdev.com\/blog\/2022\/09\/03\/usar-fuentes-de-google-en-pagina-web\/","title":{"rendered":"Usar fuentes de Google en p\u00e1gina web"},"content":{"rendered":"\n

En muchas ocasiones nos vemos en la necesidad de personalizar la fuente de nuestro p\u00e1gina web , o hacer que cierta parte del sitio luzca diferente. Esto lo emplee en el creador de CV que puedes ver aqu\u00ed<\/a><\/p>\n\n\n\n

Seleccionando las fuentes<\/h2>\n\n\n\n

Accedes a https:\/\/fonts.google.com\/<\/a> aqu\u00ed podr\u00e1s ver todas las fuentes que est\u00e1s disponibles. Debes fijarte en el nombre que tiene, por ejemplo: Nunito<\/strong>, Roboto Slab<\/strong><\/p>\n\n\n\n

Para agregarlas dentro de la p\u00e1gina, se coloca el en la etiqueta link <\/strong>dentro del head <\/strong>del html de la siguiente manera:<\/p>\n\n\n\n

<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Nombre Fuente\"><\/code><\/pre>\n\n\n\n
Donde Nombre Fuente <\/strong>es el nombre de la fuente que deseas agregar.<\/p>\n\n\n\n
Usando la fuente<\/h2>\n\n\n\n
Para emplear la fuente, despu\u00e9s de haber colocado el nombre en la etiqueta link,  dentro del CSS, se hace referencia a la etiqueta que se desea colocar la fuente, o en su defecto creas una clase o haces referencia al id, cualquier m\u00e9todo que desees. En mi caso colocar\u00e9 un h1 con un texto.<\/p>\n\n\n\n
<h1>Hola, me llamo paco<\/h1><\/code><\/pre>\n\n\n\n
Ya ahora en el CSS, establezco la fuente que va a tener ese h1, en este caso es Nunito Sans<\/strong><\/p>\n\n\n\n
h1 {\r\nfont-family: \"Nunito Sans\";\r\n}<\/code><\/pre>\n\n\n\n
El texto con la fuente se ve as\u00ed:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Agregando m\u00e1s fuentes<\/h2>\n\n\n\n
Si deseas a\u00f1adir muchas fuentes y emplearlas dentro de la p\u00e1gina, en la etiqueta link donde importas las fuentes, se colocan los nombres de las fuentes separadas por un |<\/strong><\/p>\n\n\n\n
<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito Sans|Aboreto|Dancing Script|Comfortaa|Pacifico\"><\/code><\/pre>\n\n\n\n
Y haces lo mismo que en el ejemplo anterior<\/p>\n\n\n\n
<html>\r\n<head>\r\n\t<title>Usando fuentes de google<\/title>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito Sans|Aboreto|Dancing Script|Comfortaa|Pacifico\">\r\n<\/head>\r\n<body>\r\n\t<h1>Hola, me llamo paco<\/h1>\r\n\t<h2>Hola, me llamo paco<\/h2>\r\n\t<h3>Hola, me llamo paco<\/h3>\r\n\t<h4>Hola, me llamo paco<\/h4>\r\n\r\n<\/body>\r\n<\/html>\r\n<style>\r\n\th1 {\r\n\t\tfont-family: \"Nunito Sans\";\r\n\t}\r\n\th1 {\r\n\t\tfont-family: \"Aboreto\";\r\n\t}\r\n\th2 {\r\n\t\tfont-family: \"Dancing Script\";\r\n\t}\r\n\th3 {\r\n\t\tfont-family: \"Comfortaa\";\r\n\t}\r\n\th4 {\r\n\t\tfont-family: \"Pacifico\";\r\n\t}\r\n\r\n<\/style><\/code><\/pre>\n\n\n\n
El resultado es el siguiente:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Estableciendo fuente de manera manual<\/h2>\n\n\n\n
Si lo que quieres es dar al usuario la oportunidad de cambiar la fuente manualmente, vamos a hacer lo siguiente: Vamos a crear un select <\/strong>en el que estar\u00e1n todas las fuentes disponibles.<\/p>\n\n\n\n
<select name=\"fuentes\" id=\"fuentes\">\n\t<option value=\"\">Selecciona una fuente<\/option>\n<\/select><\/code><\/pre>\n\n\n\n
Lo que sigue es poblar el select con los nombres de las fuentes, para esto creamos un array con los nombres de las fuentes importadas<\/p>\n\n\n\n
const fuentes = [\"Nunito Sans\",\"Aboreto\",\"Dancing Script\",\"Comfortaa\",\"Pacifico\"];<\/code><\/pre>\n\n\n\n
Y lo siguiente es a\u00f1adirlos como opciones dentro del select<\/p>\n\n\n\n
const select = document.querySelector(\"#fuentes\"); \/\/id del select\r\n\t\r\n\tfor(let i = 0; i < fuentes.length; i++){\r\n\t\tlet option = document.createElement(\"option\");\r\n\t\toption.value = fuentes[i];\r\n\t\toption.innerHTML = fuentes[i];\r\n\t\toption.style.fontFamily = fuentes[i];\r\n\t\toption.style.fontSize = \"x-large\";\r\n\t\tselect.appendChild(option)\r\n\t}<\/code><\/pre>\n\n\n\n
El resultado es el siguiente<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Establecer la fuente seleccionada a un texto<\/h2>\n\n\n\n
Para hacer esto, a\u00f1adiremos la funci\u00f3n de cambiarFuente <\/strong>en el evento onchange <\/strong>del select, para que cuando el usuario seleccione una fuente el texto cambie.<\/p>\n\n\n\n
const titulo = document.querySelector(\"#titulo\");\r\nconst parrafo = document.querySelector(\"#parrafo\");\n\nfunction establecerFuente(fuente){\r\n\ttitulo.style.fontFamily = fuente.value;\r\n\tparrafo.style.fontFamily = fuente.value;\r\n}<\/code><\/pre>\n\n\n\n
Y el resultado es<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
El c\u00f3digo  final es el que sigue<\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Usando fuentes de google<\/title>\r\n\t<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito Sans|Aboreto|Dancing Script|Comfortaa|Pacifico\">\r\n<\/head>\r\n<body>\r\n\t<select name=\"fuentes\" id=\"fuentes\" onchange=\"establecerFuente(this)\">\r\n\t\t<option value=\"\">Selecciona una fuente<\/option>\r\n\t<\/select>\r\n\r\n\t<h1 id=\"titulo\">El patito feo<\/h1>\r\n\t<p id=\"parrafo\">\r\n\tAqu\u00ed el cuento\r\n\t<\/p>\r\n<\/body>\r\n<\/html>\r\n<script>\r\n\tconst fuentes = [\"Nunito Sans\",\"Aboreto\",\"Dancing Script\",\"Comfortaa\",\"Pacifico\"];\r\n\tconst select = document.querySelector(\"#fuentes\"); \/\/id del select\r\n\tconst titulo = document.querySelector(\"#titulo\");\r\n\tconst parrafo = document.querySelector(\"#parrafo\");\r\n\t\r\n\tfor(let i = 0; i < fuentes.length; i++){\r\n\t\tlet option = document.createElement(\"option\");\r\n\t\toption.value = fuentes[i];\r\n\t\toption.innerHTML = fuentes[i];\r\n\t\toption.style.fontFamily = fuentes[i];\r\n\t\toption.style.fontSize = \"x-large\";\r\n\t\tselect.appendChild(option)\r\n\t}\r\n\r\n\tfunction establecerFuente(fuente){\r\n\t\ttitulo.style.fontFamily = fuente.value;\r\n\t\tparrafo.style.fontFamily = fuente.value;\r\n\t}\r\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
En muchas ocasiones nos vemos en la necesidad de personalizar la fuente de nuestro p\u00e1gina web , o hacer que cierta parte del sitio luzca diferente. Esto lo emplee en el creador de CV que puedes ver aqu\u00ed Seleccionando las fuentes Accedes a https:\/\/fonts.google.com\/ aqu\u00ed podr\u00e1s ver todas las fuentes que est\u00e1s disponibles. Debes fijarte en el nombre que tiene, por ejemplo: Nunito, Roboto Slab Para agregarlas dentro de la p\u00e1gina, se coloca el en la etiqueta link dentro del head del html de la siguiente manera: Donde Nombre Fuente es el nombre de la fuente que deseas agregar. Usando...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":3,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":96,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions\/96"}],"wp:attachment":[{"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pacohunterdev.com\/blog\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}