{"id":1406,"date":"2024-04-18T00:16:18","date_gmt":"2024-04-18T03:16:18","guid":{"rendered":"https:\/\/martafagundez.com\/codevolution\/?p=1406"},"modified":"2024-11-20T01:50:12","modified_gmt":"2024-11-20T04:50:12","slug":"como-usar-fuentes-personalizadas-en-react","status":"publish","type":"post","link":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/","title":{"rendered":"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React"},"content":{"rendered":"\n<p>A\u00f1adir y usar <strong>fuentes personalizadas en tu aplicaci\u00f3n React<\/strong> es un proceso muy sencillo. A continuaci\u00f3n te muestro una de las formas de hacerlo.<\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"simpletoc-title\">Tabla de contenidos<\/h2>\n<style>html { scroll-behavior: smooth; }<\/style><ul class=\"simpletoc-list\">\n<li><a href=\"#agregar-el-archivo-de-la-fuente-a-tu-proyecto\">Agregar el Archivo de la Fuente a tu Proyecto<\/a>\n\n<\/li>\n<li><a href=\"#importar-la-fuente-en-tu-aplicacion\">Importar la Fuente en tu Aplicaci\u00f3n<\/a>\n\n<\/li>\n<li><a href=\"#utilizar-la-fuente-en-tus-estilos-css\">Utilizar la Fuente en tus Estilos CSS<\/a>\n\n<\/li>\n<li><a href=\"#3-consideraciones-antes-de-agregar-fuentes-personalizadas\">3 Consideraciones Antes de Agregar Fuentes Personalizadas<\/a>\n\n\n<\/li>\n\n<\/li>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"agregar-el-archivo-de-la-fuente-a-tu-proyecto\">Agregar el Archivo de la Fuente a tu Proyecto<\/h2>\n\n\n<p>Una vez tengas los archivos de la fuente que deseas utilizar, en el directorio <code>src<\/code> de tu proyecto React <strong>crea un directorio llamado <code>fonts<\/code><\/strong>.<\/p>\n\n\n\n<p>Luego, <strong>para cada fuente que vayas a utilizar<\/strong>, sigue estos pasos: <\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\">\n<li>En el directorio <code>fonts<\/code> crea un directorio con el nombre de la fuente.<\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>En el directorio que acabas de crear <strong>coloca el o los archivos de la fuente<\/strong>. <br>Si, por ejemplo, vas a utilizar una fuente en su versi\u00f3n normal y en su versi\u00f3n it\u00e1lica, necesitar\u00e1s agregar el archivo correspondiente a cada versi\u00f3n de la fuente. <\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"importar-la-fuente-en-tu-aplicacion\">Importar la Fuente en tu Aplicaci\u00f3n<\/h2>\n\n\n<p>Ahora tienes que importar la fuente en tu aplicaci\u00f3n. Para ello, en el archivo de estilos CSS <strong>define una regla <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/CSS\/@font-face\" target=\"_blank\" rel=\"noreferrer noopener\">@font-face<\/a> por cada uno de los archivos de la fuente<\/strong> que agregaste a tu proyecto.<\/p>\n\n\n\n<p>En este ejemplo, estoy importando la fuente \u00abAnother Beauty\u00bb en sus variantes normal e it\u00e1lica: <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">index.css<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"@font-face {\n  font-family: &quot;Another Beauty&quot;, &quot;Playfair Display&quot;, Lora, serif;\n  src: local(&quot;Another Beauty&quot;),\n    url(&quot;..\/fonts\/another-beauty\/Another-Beauty.woff2&quot;) format(woff2);\n  font-weight: 400;\n  font-style: normal;\n}\n@font-face {\n  font-family: &quot;Another Beauty&quot;, &quot;Playfair Display&quot;, Lora, serif;\n  src: local(&quot;Another Beauty&quot;),\n    url(&quot;..\/fonts\/another-beauty\/Another-Beauty-Italic.woff2&quot;) format(woff2);\n  font-weight: 400;\n  font-style: italic;\n}\n\/* ...resto del c\u00f3digo *\/\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F286C4\">@font-face<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">font-family<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Another Beauty<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Playfair Display<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">, Lora, <\/span><span style=\"color: #BF9EEE\">serif<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">src<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">local<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Another Beauty<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">url<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/fonts\/another-beauty\/Another-Beauty.woff2<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">) <\/span><span style=\"color: #97E1F1\">format<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #FFB86C; font-style: italic\">woff2<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">font-weight<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">400<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">font-style<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">normal<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">@font-face<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">font-family<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Another Beauty<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">, <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Playfair Display<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">, Lora, <\/span><span style=\"color: #BF9EEE\">serif<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">src<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1\">local<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Another Beauty<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">),<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">url<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">..\/fonts\/another-beauty\/Another-Beauty-Italic.woff2<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">) <\/span><span style=\"color: #97E1F1\">format<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #FFB86C; font-style: italic\">woff2<\/span><span style=\"color: #F6F6F4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">font-weight<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">400<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #97E1F1\">font-style<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">italic<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/* ...resto del c\u00f3digo *\/<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Para finalizar, si no lo has hecho a\u00fan, <strong>importa tu archivo CSS en el archivo de punto de entrada de tu aplicaci\u00f3n<\/strong> (<code>main.jsx<\/code>, <code>index.js<\/code> o como se llame en tu caso):<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-blur-enabled cbp-unblur-on-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(251, 251, 239, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">main.jsx<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"import React from &quot;react&quot;;\nimport ReactDOM from &quot;react-dom\/client&quot;;\nimport App from &quot;.\/App.tsx&quot;;\n\nimport &quot;.\/styles\/index.css&quot;;\n\nconst root = document.getElementById(&quot;root&quot;) as HTMLElement;\n\nReactDOM.createRoot(root).render(\n  &lt;React.StrictMode&gt;\n    &lt;App \/&gt;\n  &lt;\/React.StrictMode&gt;\n);\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> React <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">react<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> ReactDOM <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">react-dom\/client<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> App <\/span><span style=\"color: #F286C4\">from<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">.\/App.tsx<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line cbp-line-highlight cbp-no-blur\"><span style=\"color: #F286C4\">import<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">.\/styles\/index.css<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">const<\/span><span style=\"color: #F6F6F4\"> root <\/span><span style=\"color: #F286C4\">=<\/span><span style=\"color: #F6F6F4\"> document.<\/span><span style=\"color: #62E884\">getElementById<\/span><span style=\"color: #F6F6F4\">(<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">root<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">) <\/span><span style=\"color: #F286C4\">as<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #97E1F1; font-style: italic\">HTMLElement<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">ReactDOM.<\/span><span style=\"color: #62E884\">createRoot<\/span><span style=\"color: #F6F6F4\">(root).<\/span><span style=\"color: #62E884\">render<\/span><span style=\"color: #F6F6F4\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">React.StrictMode<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    &lt;<\/span><span style=\"color: #97E1F1; font-style: italic\">App<\/span><span style=\"color: #F6F6F4\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  &lt;\/<\/span><span style=\"color: #97E1F1; font-style: italic\">React.StrictMode<\/span><span style=\"color: #F6F6F4\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">);<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">JSX<\/span><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"utilizar-la-fuente-en-tus-estilos-css\">Utilizar la Fuente en tus Estilos CSS<\/h2>\n\n\n<p>Listo! Ahora ya puedes utilizar tus fuentes personalizadas en tus estilos CSS:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">CSS<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/* ...resto del c\u00f3digo *\/\n.header {\n    font-family: &quot;Another Beauty&quot;;\n    font-weight: 400;\n    font-style: normal;\n}\n\n.header-italic {\n    font-family: &quot;Another Beauty&quot;;\n    font-weight: 400;\n    font-style: italic;\n}\n\n\/* ...resto del c\u00f3digo *\/\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B7F8B\">\/* ...resto del c\u00f3digo *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #62E884; font-style: italic\">.header<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">font-family<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Another Beauty<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">font-weight<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">400<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">font-style<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">normal<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #62E884; font-style: italic\">.header-italic<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">font-family<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #E7EE98\">Another Beauty<\/span><span style=\"color: #DEE492\">&quot;<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">font-weight<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">400<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">font-style<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">italic<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B7F8B\">\/* ...resto del c\u00f3digo *\/<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"3-consideraciones-antes-de-agregar-fuentes-personalizadas\">3 Consideraciones Antes de Agregar Fuentes Personalizadas<\/h2>\n\n\n<p>Agregar fuentes personalizadas a tu proyecto React puede darle un toque distintivo, pero antes de sumergirte en la personalizaci\u00f3n, considera estos tres puntos clave:<\/p>\n\n\n\n<p><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"autorizacion-y-licencias\"><strong>Autorizaci\u00f3n y Licencias<\/strong><\/h4>\n\n\n<p>Antes de utilizar una fuente en tu aplicaci\u00f3n, aseg\u00farate de tener los derechos necesarios para hacerlo, <strong>ya sea que la obtengas de forma gratuita o mediante pago<\/strong>. <\/p>\n\n\n\n<p>Revisar y respetar la licencia y las condiciones de uso es fundamental para evitar problemas legales.<\/p>\n\n\n\n<p><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"variantes-utilizadas\"><strong>Variantes Utilizadas<\/strong><\/h4>\n\n\n<p>Las fuentes pueden incluir varios archivos con una variedad de estilos y pesos. Para optimizar el rendimiento de tu aplicaci\u00f3n, agrega a tu proyecto <strong>solo los archivos de las variantes que vas a utilizar<\/strong>. <\/p>\n\n\n\n<p><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"formato-de-archivo-woff2\"><strong>Formato de Archivo WOFF2<\/strong><\/h4>\n\n\n<p>El formato de archivo <a href=\"https:\/\/www.w3.org\/TR\/WOFF2\" target=\"_blank\" rel=\"noreferrer noopener\">WOFF2<\/a> es ampliamente compatible y ofrece un excelente equilibrio entre calidad y tama\u00f1o de archivo. Al importar tus fuentes en este formato, favoreces una <strong>carga m\u00e1s r\u00e1pida de la p\u00e1gina<\/strong>. <\/p>\n\n\n\n<p>Si tus archivos de fuente est\u00e1n en formatos diferentes, como OTF, TTF o WOFF, puedes utilizar <strong>convertidores online<\/strong> para transformarlos a WOFF2 antes de integrarlos en tu proyecto.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><\/ol>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><\/p>\n\n\n\n<p>Eso ha sido todo. Espero que esta informaci\u00f3n te sea de utilidad. \ud83d\ude09<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A\u00f1adir y usar fuentes personalizadas en tu aplicaci\u00f3n React es un proceso muy sencillo. A continuaci\u00f3n te muestro una de las formas de hacerlo. Agregar&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1425,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[18,42,38,22],"tags":[34],"class_list":["post-1406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-desarrollo-web","category-frontend","category-react","tag-front-end"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React - CODEvolution<\/title>\n<meta name=\"description\" content=\"Usar fuentes personalizadas en tu aplicaci\u00f3n React es un proceso muy sencillo. En este art\u00edculo te muestro c\u00f3mo 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:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React - CODEvolution\" \/>\n<meta property=\"og:description\" content=\"Usar fuentes personalizadas en tu aplicaci\u00f3n React es un proceso muy sencillo. En este art\u00edculo te muestro c\u00f3mo hacerlo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/\" \/>\n<meta property=\"og:site_name\" content=\"CODEvolution\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-18T03:16:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-20T04:50:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"950\" \/>\n\t<meta property=\"og:image:height\" content=\"534\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marta Fag\u00fandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marta Fag\u00fandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/\"},\"author\":{\"name\":\"Marta Fag\u00fandez\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"headline\":\"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React\",\"datePublished\":\"2024-04-18T03:16:18+00:00\",\"dateModified\":\"2024-11-20T04:50:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/\"},\"wordCount\":456,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg\",\"keywords\":[\"Front End\"],\"articleSection\":[\"CSS\",\"Desarrollo Web\",\"Front End\",\"React\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/\",\"name\":\"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React - CODEvolution\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg\",\"datePublished\":\"2024-04-18T03:16:18+00:00\",\"dateModified\":\"2024-11-20T04:50:12+00:00\",\"description\":\"Usar fuentes personalizadas en tu aplicaci\u00f3n React es un proceso muy sencillo. En este art\u00edculo te muestro c\u00f3mo hacerlo.\",\"breadcrumb\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#primaryimage\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg\",\"width\":950,\"height\":534},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/martafagundez.com\/codevolution\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/\",\"name\":\"CODEvolution\",\"description\":\"Blog de Marta Fag\u00fandez\",\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/martafagundez.com\/codevolution\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\",\"name\":\"Marta Fag\u00fandez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png\",\"width\":603,\"height\":603,\"caption\":\"Marta Fag\u00fandez\"},\"logo\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/\"},\"description\":\"Aqu\u00ed comparto algunos de mis aprendizajes como desarrolladora web. Si alguno de mis art\u00edculos te ha resultado \u00fatil, me alegrar\u00eda saberlo ;)\",\"sameAs\":[\"https:\/\/martafagundez.com\",\"https:\/\/www.linkedin.com\/in\/martafagundezrodriguez\",\"https:\/\/www.youtube.com\/@martafagundez\"],\"url\":\"https:\/\/martafagundez.com\/codevolution\/author\/marta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React - CODEvolution","description":"Usar fuentes personalizadas en tu aplicaci\u00f3n React es un proceso muy sencillo. En este art\u00edculo te muestro c\u00f3mo 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:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React - CODEvolution","og_description":"Usar fuentes personalizadas en tu aplicaci\u00f3n React es un proceso muy sencillo. En este art\u00edculo te muestro c\u00f3mo hacerlo.","og_url":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/","og_site_name":"CODEvolution","article_published_time":"2024-04-18T03:16:18+00:00","article_modified_time":"2024-11-20T04:50:12+00:00","og_image":[{"width":950,"height":534,"url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg","type":"image\/jpeg"}],"author":"Marta Fag\u00fandez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Marta Fag\u00fandez","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#article","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/"},"author":{"name":"Marta Fag\u00fandez","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"headline":"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React","datePublished":"2024-04-18T03:16:18+00:00","dateModified":"2024-11-20T04:50:12+00:00","mainEntityOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/"},"wordCount":456,"commentCount":0,"publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg","keywords":["Front End"],"articleSection":["CSS","Desarrollo Web","Front End","React"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/","url":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/","name":"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React - CODEvolution","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#primaryimage"},"image":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#primaryimage"},"thumbnailUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg","datePublished":"2024-04-18T03:16:18+00:00","dateModified":"2024-11-20T04:50:12+00:00","description":"Usar fuentes personalizadas en tu aplicaci\u00f3n React es un proceso muy sencillo. En este art\u00edculo te muestro c\u00f3mo hacerlo.","breadcrumb":{"@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#primaryimage","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg","width":950,"height":534},{"@type":"BreadcrumbList","@id":"https:\/\/martafagundez.com\/codevolution\/como-usar-fuentes-personalizadas-en-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martafagundez.com\/codevolution\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo Usar Fuentes Personalizadas en Aplicaci\u00f3n React"}]},{"@type":"WebSite","@id":"https:\/\/martafagundez.com\/codevolution\/#website","url":"https:\/\/martafagundez.com\/codevolution\/","name":"CODEvolution","description":"Blog de Marta Fag\u00fandez","publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martafagundez.com\/codevolution\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1","name":"Marta Fag\u00fandez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png","width":603,"height":603,"caption":"Marta Fag\u00fandez"},"logo":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/"},"description":"Aqu\u00ed comparto algunos de mis aprendizajes como desarrolladora web. Si alguno de mis art\u00edculos te ha resultado \u00fatil, me alegrar\u00eda saberlo ;)","sameAs":["https:\/\/martafagundez.com","https:\/\/www.linkedin.com\/in\/martafagundezrodriguez","https:\/\/www.youtube.com\/@martafagundez"],"url":"https:\/\/martafagundez.com\/codevolution\/author\/marta\/"}]}},"jetpack_featured_media_url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2024\/04\/como_utilizar_fuentes_personalizadas_en_react.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/comments?post=1406"}],"version-history":[{"count":17,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1406\/revisions"}],"predecessor-version":[{"id":1429,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1406\/revisions\/1429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media\/1425"}],"wp:attachment":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media?parent=1406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/categories?post=1406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/tags?post=1406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}