Cómo conectar fuentes usando el archivo CSS
La conexión de archivos a través de su propio CSS requiere experiencia en la escritura de código CSS y su propio servidor para almacenar el archivo.
Lo primero que necesita son archivos de fuente WOFF.
Puede obtenerlos comprando una fuente de un servicio de fuentes, por ejemplo, myfonts.com. Al comprar, elija la licencia "WEB" para que pueda usarla en línea.
Colocar archivos de fuentes en la web
Puede elegir cualquier servidor o servicio CDN para colocar archivos. Lo principal es que el servidor debe admitir CORS de Access-Control-Allow-Origin para la distribución a cualquier dominio. (Acceso-Control-Permitir-Origen: *)
Puede obtenerlos comprando una fuente de un servicio de fuentes, por ejemplo, myfonts.com. Al comprar, elija la licencia "WEB" para que pueda usarla en línea.
Colocar archivos de fuentes en la web
Puede elegir cualquier servidor o servicio CDN para colocar archivos. Lo principal es que el servidor debe admitir CORS de Access-Control-Allow-Origin para la distribución a cualquier dominio. (Acceso-Control-Permitir-Origen: *)
Si aloja archivos en su propio servidor
Cree un archivo .htaccess en la raíz del sitio web y agregue el siguiente código:
Cree un archivo .htaccess en la raíz del sitio web y agregue el siguiente código:
Conjunto de encabezado Access-Control-Allow-Origin "*" Cree su propio archivo CSS y colóquelo en su servidor o servicio CDN.
Cómo crear un archivo CSS
A continuación se muestra un ejemplo de cómo se escribe CSS. Puede crearlo en un editor de texto común, guardarlo con una extensión .css y luego cargarlo en un servidor o CDN.
@font-cara {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-cara {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
estilo de fuente: negrita;
}
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-cara {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
estilo de fuente: negrita;
}
Cómo usar CSS
Los números 300.400... En la propiedad font-weight, indique el grosor de la fuente. Aquí está la lista completa:
100 - delgado
200 - Extra ligero
300 - luz
400 - normal
500 - medio
600 - Seminegrita
700 - negrita
800 - Extra negrita
900 - negro
Los navegadores en la web muestran fuentes ligeramente diferentes de lo que podrían verse, por ejemplo, en Photoshop. Por lo general, salen un poco más audaces. A veces es útil conocer los pequeños trucos: puede especificar, por ejemplo, un archivo ligero para obtener una representación de fuentes normales.
@font-cara {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
Y viceversa. Si no tiene un archivo Seminegrita (600), especifique Negrita en su lugar. De esta manera, los encabezados en negrita se mostrarán en negrita en lugar del estilo de texto del cuerpo normal.
@font-cara {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
estilo de fuente: negrita;
}
Si solo tiene un archivo de fuente, puede especificarlo para todos los estilos, enumerándolos separados por comas: 300,400,500,600,700
100 - delgado
200 - Extra ligero
300 - luz
400 - normal
500 - medio
600 - Seminegrita
700 - negrita
800 - Extra negrita
900 - negro
Los navegadores en la web muestran fuentes ligeramente diferentes de lo que podrían verse, por ejemplo, en Photoshop. Por lo general, salen un poco más audaces. A veces es útil conocer los pequeños trucos: puede especificar, por ejemplo, un archivo ligero para obtener una representación de fuentes normales.
@font-cara {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
Y viceversa. Si no tiene un archivo Seminegrita (600), especifique Negrita en su lugar. De esta manera, los encabezados en negrita se mostrarán en negrita en lugar del estilo de texto del cuerpo normal.
@font-cara {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
estilo de fuente: negrita;
}
Si solo tiene un archivo de fuente, puede especificarlo para todos los estilos, enumerándolos separados por comas: 300,400,500,600,700
Vuelve con Tilda. Configuración del sitio → fuentes y colores → su propia fuente. Pega el enlace al archivo CSS. Agregue el nombre de la fuente como se especifica en el archivo CSS.
Guarde y vuelva a publicar todas las páginas.
Importante: verás tu fuente solo cuando publiques el sitio web. En el modo Edición o Vista previa, no se puede conectar ningún archivo CSS de terceros, lo que significa que su fuente no será visible (esto se hace por razones de seguridad).
