Cómo conectar fuentes mediante el archivo CSS
Conectar 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 necesitas son archivos de fuentes WOFF.
Puedes conseguirlos comprando una fuente en un servicio de fuentes, por ejemplo, myfonts.com. Al comprarlas, elige la licencia "WEB" para poder utilizarlas en línea.
Coloca los archivos de fuentes en la web
Puedes elegir cualquier servidor o servicio CDN para colocar los archivos. Lo principal es que el servidor debe soportar Access-Control-Allow-Origin CORS para la distribución a cualquier dominio. (Access-Control-Allow-Origin: *)
Puedes conseguirlos comprando una fuente en un servicio de fuentes, por ejemplo, myfonts.com. Al comprarlas, elige la licencia "WEB" para poder utilizarlas en línea.
Coloca los archivos de fuentes en la web
Puedes elegir cualquier servidor o servicio CDN para colocar los archivos. Lo principal es que el servidor debe soportar Access-Control-Allow-Origin CORS para la distribución a cualquier dominio. (Access-Control-Allow-Origin: *)
Si aloja los archivos en su propio servidor
Cree un archivo .htaccess en la raíz del sitio web y añada el siguiente código:
Cree un archivo .htaccess en la raíz del sitio web y añada el siguiente código:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>Crea tu propio archivo CSS y colócalo en tu servidor o servicio CDN.
Cómo crear un archivo CSS
A continuación se muestra un ejemplo de cómo se escribe CSS. Puedes crearlo en un editor de texto normal, guardarlo con extensión .css y luego subirlo a un servidor o CDN.
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}
Cómo utilizar CSS
The numbers 300,400... in the font-weight property indicate the weight of the font. Here is the complete list:
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
Vuelva a Tilda Configuración del sitio → Fuentes y colores → Su propia fuente. Pegue el enlace al archivo CSS. Añada el nombre de la fuente tal y como se especifica en el archivo CSS.
Guarde y vuelva a publicar todas las páginas.
Importante: verás tu fuente sólo cuando publiques la página web. En el modo Editar 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).
