{"id":15152,"date":"2023-08-08T13:00:00","date_gmt":"2023-08-08T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=15152"},"modified":"2023-08-14T10:41:12","modified_gmt":"2023-08-14T08:41:12","slug":"importar-fuente-css","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/importar-fuente-css\/","title":{"rendered":"Importar fuentes en CSS"},"content":{"rendered":"\n

\u00bfQuieres saber c\u00f3mo importar fuentes en CSS<\/strong>? En este art\u00edculo te ense\u00f1o todo lo que debes saber sobre tipograf\u00edas en CSS y c\u00f3mo configurarlas de manera efectiva para conseguir resultados impactantes.<\/p>\n\n\n\n

\u00a1Empezamos!<\/p>\n\n\n\n

Introducci\u00f3n<\/h2>\n\n\n\n
\n
\n

A la hora de abordar un dise\u00f1o web<\/a>, la elecci\u00f3n de la fuente adecuada es uno de los primeros pasos<\/strong> que debes considerar. En lo que a tipograf\u00edas CSS se refiere, existen dos conceptos fundamentales<\/strong> que debes conocer: font-family y @font-face. <\/p>\n\n\n\n

La propiedad font-family<\/strong> es la clave para establecer el aspecto textual de tus elementos HTML. Con ella, puedes seleccionar una tipograf\u00eda entre una amplia gama de fuentes predefinidas. Adem\u00e1s, tambi\u00e9n tienes la opci\u00f3n de utilizar la regla @font-face<\/strong>, que te permite definir fuentes personalizadas y darle a tu sitio web una identidad \u00fanica.<\/p>\n<\/div>\n\n\n\n

\n
\"intro<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"intro<\/figure>\n<\/div>\n\n\n\n
\n

Cuando se trata de importar tipograf\u00edas personalizadas, tienes diferentes opciones a tu disposici\u00f3n. Puedes descargar los archivos<\/strong> de las fuentes y agregarlos directamente a tu proyecto, lo que te brinda un mayor control sobre la apariencia de tus textos. Tambi\u00e9n es posible hacer referencia a las fuentes a trav\u00e9s de @import<\/strong>, lo cual es m\u00e1s sencillo de implementar.<\/p>\n\n\n\n

De la misma manera, es importante mencionar que existen varios tipos de archivos de fuentes, como TrueType (TTF)<\/strong>, OpenType (OTF)<\/strong>, Web Open Font Format (WOFF)<\/strong> y Web Open Font Format 2 (WOFF2)<\/strong>, cada uno con sus caracter\u00edsticas y compatibilidad espec\u00edficas. En los siguientes puntos hago un repaso de todos estos aspectos.<\/p>\n<\/div>\n<\/div>\n\n\n\n

font-family: la propiedad CSS para definir tipograf\u00edas<\/h2>\n\n\n\n

Cuando se trata de darle estilo a los textos en tu p\u00e1gina web, la propiedad CSS font-family<\/strong> es tu mejor amiga. Esta poderosa propiedad te permite definir qu\u00e9 tipo de tipograf\u00eda se aplicar\u00e1<\/strong> a un elemento espec\u00edfico. Su sintaxis es bastante sencilla. Simplemente debes especificar el nombre de la fuente o una lista de nombres separados por comas. <\/p>\n\n\n\n

Por ejemplo, puedes utilizar font-family: Arial, Helvetica, sans-serif;<\/code> para indicar que deseas que el navegador utilice la fuente Arial en primer lugar, pero si no est\u00e1 disponible, que utilice Helvetica o cualquier otra fuente sans-serif<\/strong> como alternativa. Puedes comprobarlo por ti mismo a\u00f1adiendo los siguientes c\u00f3digos a un archivo con extensi\u00f3n .html<\/em> y abri\u00e9ndolo con el navegador. Mientras que en el primer caso se muestra la tipograf\u00eda por defecto del navegador, en el segundo se especifica una tipograf\u00eda principal de tipo Arial para todo el body<\/em>:<\/p>\n\n\n\n

\n
\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Importar fuentes CSS<\/title>\n<\/head>\n<body>\n    <h1>Importar fuentes CSS<\/h1>\n    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima veniam minus consectetur suscipit quas necessitatibus, amet ducimus perferendis laboriosam, repellendus doloremque quaerat consequatur quis fugiat molestias blanditiis adipisci esse ipsum.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"importar<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Importar fuentes CSS<\/title>\n    <style>\n        body {\n            font-family: Arial, Helvetica, sans-serif;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>Importar fuentes CSS<\/h1>\n    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima veniam minus consectetur suscipit quas necessitatibus, amet ducimus perferendis laboriosam, repellendus doloremque quaerat consequatur quis fugiat molestias blanditiis adipisci esse ipsum.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"importar<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Es importante destacar que las fuentes especificadas en font-family deben estar instaladas en el dispositivo del usuario<\/strong> para que se muestren correctamente. Si deseas utilizar fuentes personalizadas que no se encuentran en la mayor\u00eda de los dispositivos, necesitar\u00e1s utilizar la regla @font-face<\/strong>, de la cual hablaremos en el siguiente punto.<\/p>\n\n\n\n
Usando la regla @font-face para fuentes personalizadas<\/h2>\n\n\n\n
Si est\u00e1s buscando llevar tu dise\u00f1o web al siguiente nivel y deseas utilizar tipograf\u00edas espec\u00edficas que no se encuentran de forma predeterminada en los dispositivos de los usuarios<\/strong>, la regla @font-face te permite importar y utilizar fuentes personalizadas.<\/p>\n\n\n\n
Esta regla funciona subiendo los archivos de la tipograf\u00eda al proyecto y referenci\u00e1ndolos en la hoja de estilos CSS. Puedes visitar Google Fonts<\/a> y buscar la fuente que m\u00e1s te guste. Para descargarla, debes hacer clic en el bot\u00f3n ‘Download family’. Para la realizaci\u00f3n de este art\u00edculo, yo voy a descargar la opci\u00f3n ‘Ubuntu’:<\/p>\n\n\n\n