Fandom

Central de Wikia

Comentarios10

Como usar una tipografía personalizada en tu wiki

¡Interferencia de bloqueo de anuncios detectada!


Wikia es un sitio libre de uso que hace dinero de la publicidad. Contamos con una experiencia modificada para los visitantes que utilizan el bloqueo de anuncios

Wikia no es accesible si se han hecho aún más modificaciones. Si se quita el bloqueador de anuncios personalizado, la página cargará como se esperaba.

Build a Wiki - Tipografía personalizada
Build a Wiki.png

¡Hola usuarios de Wikia!

Muchos os venís preguntando en vuestra aventura por el diseño de los wikis como cambiar la tipografía (también llamado fuente, letra..). Si bien se puede hacer con el siguiente código CSS .tu-selector {font-family:Letra} esto puede crear un problema a la hora de usar tipografías más concretas que generalmente no suelen estar instaladas en los ordenadores de los usuarios. Dicho de otro modo, el texto se vería así.

Sin embargo, ¿cómo puedo hacer que mi letra sea visible sin problemas para todo el mundo sin correr el riesgo de que no se muestre correctamente? Aquí entra en acción el CSS. Hay muchas formas, pero optaremos por la archiconocida (al menos entre diseñadores geniales como ) Google Fonts.

Google Fonts es uno de los muchos productos de GoogleInc que permite a los diseñadores gozar de una gran variedad de fuentes para su uso en páginas web. ¿Qué es lo bueno de esto? El usuario descarga la letra a través de Google Fonts, es decir, podrá ver la página sin problemas.

Ahora os preguntaréis como se usa. Su uso es relativamente sencillo:

  1. Entra en la página web de Google Fonts
  2. Selecciona una o más tipografías que desees. Puedes añadir cada una con el botón Add to Collection
  3. Una vez hayas terminado tu selección haz click en el botón Review en la esquina inferior derecha de la pantalla
  4. Baja hasta 3. Add this code to your website: y selecciona @import (Captura de pantalla) y selecciona el código que aparecerá a continuación.
  5. Puedes copiar este código CSS en el Especial:CSS de tu wiki. O bien en el Common.css, tu wikia.css personal, tu global.css personal etc.
  6. Luego puedes usar la fuente en cualquier sitio, incluso en el wikicódigo poniendo el nombre de la letra (Ej. Open Sans --> font-face:Open-Sans o font-family:Open-Sans)



Aviso.pngProblemas con Especial CSSAviso.png

Cuando uses una tipografía diferente a la que viene por defecto observarás que hay muchos problemas para editar el Especial:CSS de tu wiki si la aplicas para todo el wiki (usando el selector universal *) (o poniendo .WikiaArticle, .WikiaPage o body como selectores css) deberás usar el siguiente código
.WikiaArticle:not(#cssEditorContainer) {
font-family:fuente
}
not(#cssEditorContainer) hará que no afecte al editor de CSS
NOTA: Los cambios pueden tardar en aparecer, recomiendo reiniciar la caché.

Espero haberos ayudado. ¡Cualquier sugerencia o duda en los comentarios!


70#.png
Unai01 participa en Fandom desde 2014. Le gustan los videojuegos, la música, la cultura japonesa y la informática. Colabora con la Comunidad Central como administrador y pertenece al Community Council y Vanguard.

¿Quieres recibir las últimas actualizaciones del blog de Fandom en español? ¡Haz clic aquí para seguir este blog!

Spotlights de otros wikis

Wiki al azar