Cambiar a fuente personalizada

luffysombrerodepaja · #1

Hola, estoy intentando cambiar la fuente de todos los textos a una personalizada, he cambiado esto en el body y el nombre de la fuente en los demás para que siempre se use la misma y no encuentro la forma de hacerlo. Ya lo hice con anterioridad (hace mucho) pero ya no recuerdo cómo hacerlo.

Aquí pongo lo que modifiqué del common.css pero no rula.

Código: Seleccionar todo

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: FixedsysTTF;
    src: url("Fixedsys500c.ttf") format("truetype");
    color: #828282;
    background-color: #000000;
    /*font-size: 62.5%;             This sets the default font size to be equivalent to 10px */
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
}

EDITO: Pueden borrarlo o cerrarlo, había actualizado el tema que no era. Disculpad por vuestro tiempo perdido.

HuanManwe · #2

Mira este tema porque se trató esa duda y hay otras alternativas: http://www.phpbb-es.com/foro/soporte-pl ... 25527.html

xirox dió esta posibilidad:
Según leí por ahí en internet (nunca lo he probado) tenes que subir las fuentes .ttf a una carpeta que se llame fonts y luego enlazarlas por ejemplo así <font face="ruta_del_servidor/fonts/verdana.ttf"> o por el css algo así

Código: Seleccionar todo

.font-face { 
src:url("ruta_del_servidor/font/verdana.ttf");
}

Pero repito nunca lo he probado, es todo un tema este de las fuentes, pero averiguando un poco me tope con este articulo (espero no lo tomen como spam) donde explican otra manera de hacer esto posible, por si te interesa te dejo el link http://www.mmug.cl/articulos.php?id=61&appl=dis

Y luego comentó esta otra:
funciona de esta forma

Código: Seleccionar todo

@font-face { 
font-family: "nombre_fuente_elegida"; 
src: url("./font/nombre_fuente_elegida.ttf");
format("truetype"); 
}
font-family: nombre_fuente_elegida, Verdana, "Trebuchet MS", "Lucida Grande", Helvetica, Arial, sans-serif;

pero la carpeta "font" debe estar en tu_estilo/theme

*********
con esta forma eh podido agregar dos fuentes y cuando agrego la tercera se cancela las demas
asi lo hago para agregar mas fuentes

Código: Seleccionar todo

@font-face { 
font-family: "nombre_fuente_elegida"; 
src: url("./font/nombre_fuente_elegida.ttf");
format("truetype"); 

font-family: "nombre_fuente_elegida2"; 
src: url("./font/nombre_fuente_elegida2.ttf");
format("truetype"); 
}
font-family: nombre_fuente_elegida, nombre_fuente_elegida2, Verdana, "Trebuchet MS", "Lucida Grande", Helvetica, Arial, sans-serif;

A ver si te ayuda.

luffysombrerodepaja · #3

Disculpad que vuelva a asomar por aquí, pero después de unas pruebas no conseguí que funcionara. Me función al principio pero fué porque tenía la fuente instalada en el ordenador, así que la desinstalé y me llevé la sorpresita de que no valía...

Como no valía me puse de nuevo a retocar el código y no consigo que valga. Aquí os dejo mi common.css a ver si encontráis qué he ehcho mal y me podéis echar una mano.

Saludos

COMMON.CSS

Código: Seleccionar todo

/* General proSilver Markup Styles
---------------------------------------- */

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 101%;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-face {
        font-family: "FixedsysTTF"; src: url("{T_THEME_PATH}/font/Fixedsys500c.ttf"); format("truetype");
    }
    font-family: FixedsysTTF;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

h1 {
	/* Forum name */
    font-face {
        font-family: "FixedsysTTF"; src: url("{T_THEME_PATH}/font/Fixedsys500c.ttf"); format("truetype");
    }
    font-family: FixedsysTTF;
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

h2 {
	/* Forum header titles */
    font-face {
        font-family: "FixedsysTTF"; src: url("{T_THEME_PATH}/font/Fixedsys500c.ttf"); format("truetype");
    }
    font-family: FixedsysTTF;
	font-weight: normal;
	color: #3f3f3f;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}

h2.solo {
	margin-bottom: 1em;
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
    font-face {
        font-family: "FixedsysTTF"; src: url("{T_THEME_PATH}/font/Fixedsys500c.ttf"); format("truetype");
    }
    font-family: FixedsysTTF;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	color: #989898;
	margin-top: 20px;
}

h4 {
	/* Forum and topic list titles */
    font-face {
        font-family: "FixedsysTTF"; src: url("{T_THEME_PATH}/font/Fixedsys500c.ttf"); format("truetype");
    }
    font-family: FixedsysTTF;
	font-size: 1.3em;
}

p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

img {
	border-width: 0;
}

hr {
	/* Also see tweaks.css */
	border: 0 none #FFFFFF;
	border-top: 1px solid #CCCCCC;
	height: 1px;
	margin: 5px 0;
	display: block;
	clear: both;
}

hr.dashed {
	border-top: 1px dashed #CCCCCC;
	margin: 10px 0;
}

hr.divider {
	display: none;
}

p.right {
	text-align: right;
}

/* Main blocks
---------------------------------------- */
#wrap {
	padding: 0 20px;
	min-width: 650px;
}

#simple-wrap {
	padding: 6px 10px;
}

#page-body {
	margin: 4px 0;
	clear: both;
}

#page-footer {
	clear: both;
}

#page-footer h3 {
	margin-top: 20px;
}

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

a#logo:hover {
	text-decoration: none;
}

/* Search box
--------------------------------------------- */
#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 30px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

#search-box #keywords {
	width: 95px;
	background-color: #FFF;
}

#search-box input {
	border: 1px solid #b0b0b0;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
	padding: 1px 5px;
}

#search-box li {
	text-align: right;
	margin-top: 4px;
}

#search-box img {
	vertical-align: middle;
	margin-right: 3px;
}

/* Site description and logo */
#site-description {
	float: left;
	width: 70%;
}

#site-description h1 {
	margin-right: 0;
}

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}

.navbar {
	background-color: #ebebeb;
	padding: 0 10px;
}

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.forumbg {
	background: #ebebeb none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.panel {
	margin-bottom: 4px;
	padding: 0 10px;
	background-color: #f3f3f3;
	color: #3f3f3f;
}

.post {
	padding: 0 10px;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

.post:target .content {
	color: #000000;
}

.post:target h3 a {
	color: #000000;
}

.bg1	{ background-color: #f7f7f7;}
.bg2	{ background-color: #f2f2f2; }
.bg3	{ background-color: #ebebeb; }

.rowbg {
	margin: 5px 5px 2px 5px;
}

.ucprowbg {
	background-color: #e2e2e2;
}

.fieldsbg {
	/*border: 1px #DBDEE2 solid;*/
	background-color: #eaeaea;
}

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

/* Horizontal lists
----------------------------------------*/
ul.linklist {
	display: block;
	margin: 0;
}

ul.linklist li {
	display: block;
	list-style-type: none;
	float: left;
	width: auto;
	margin-right: 5px;
	font-size: 1.1em;
	line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	text-align: right;
}

ul.navlinks {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
}

ul.leftside {
	float: left;
	margin-left: 0;
	margin-right: 5px;
	text-align: left;
}

ul.rightside {
	float: right;
	margin-left: 5px;
	margin-right: -5px;
	text-align: right;
}

/* Table styles
----------------------------------------*/
table.table1 {
	/* See tweaks.css */
}

#ucp-main table.table1 {
	padding: 2px;
}

table.table1 thead th {
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	line-height: 1.3em;
	font-size: 1em;
	padding: 0 0 4px 3px;
}

table.table1 thead th span {
	padding-left: 7px;
}

table.table1 tbody tr {
	border: 1px solid #cfcfcf;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: #f6f6f6;
	color: #000;
}

table.table1 td {
	color: #6a6a6a;
	font-size: 1.1em;
}

table.table1 tbody td {
	padding: 5px;
	border-top: 1px solid #FAFAFA;
}

table.table1 tbody th {
	padding: 5px;
	border-bottom: 1px solid #000000;
	text-align: left;
	color: #333333;
	background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name		{ text-align: left; }
table.table1 .posts		{ text-align: center !important; width: 7%; }
table.table1 .joined	{ text-align: left; width: 15%; }
table.table1 .active	{ text-align: left; width: 15%; }
table.table1 .mark		{ text-align: center; width: 7%; }
table.table1 .info		{ text-align: left; width: 30%; }
table.table1 .info div	{ width: 100%; white-space: normal; overflow: hidden; }
table.table1 .autocol	{ line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
	float: right;
	width: auto;
}

table.info td {
	padding: 3px;
}

table.info tbody th {
	padding: 3px;
	text-align: right;
	vertical-align: top;
	color: #000000;
	font-weight: normal;
}

.forumbg table.table1 {
	margin: 0 -2px -1px -1px;
}

/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts 
   Also see tweaks.css */
.column1 {
	float: left;
	clear: left;
	width: 49%;
}

.column2 {
	float: right;
	clear: right;
	width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
	float: left;
	width: auto;
	text-align: left;
}

.right-box {
	float: right;
	width: auto;
	text-align: right;
}

dl.details {
	/*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
	font-size: 1.1em;
}

dl.details dt {
	float: left;
	clear: left;
	width: 30%;
	text-align: right;
	color: #000000;
	display: block;
}

dl.details dd {
	margin-left: 0;
	padding-left: 5px;
	margin-bottom: 5px;
	color: #828282;
	float: left;
	width: 65%;
}

/* Pagination
---------------------------------------- */
.pagination {
	height: 1%; /* IE tweak (holly hack) */
	width: auto;
	text-align: right;
	margin-top: 5px;
	float: right;
}

.pagination span.page-sep {
	display: none;
}

li.pagination {
	margin-top: 0;
}

.pagination strong, .pagination b {
	font-weight: normal;
}

.pagination span strong {
	padding: 0 2px;
	margin: 0 2px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #bfbfbf;
	border: 1px solid #bfbfbf;
	font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
	font-weight: normal;
	text-decoration: none;
	color: #747474;
	margin: 0 2px;
	padding: 0 2px;
	background-color: #eeeeee;
	border: 1px solid #bababa;
	font-size: 0.9em;
	line-height: 1.5em;
}

.pagination span a:hover {
	border-color: #d2d2d2;
	background-color: #d2d2d2;
	color: #FFF;
	text-decoration: none;
}

.pagination img {
	vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
	display: block;
	float: right;
	width: auto;
	margin-top: 0;
	padding: 1px 0 1px 15px;
	font-size: 0.9em;
	background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
	background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
	background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
	float: right;
	width: auto;
	padding-left: 5px;
	margin-left: 5px;
	margin-top: 10px;
	text-align: right;
}

.copyright {
	padding: 5px;
	text-align: center;
	color: #555555;
}

.small {
	font-size: 0.9em !important;
}

.titlespace {
	margin-bottom: 15px;
}

.headerspace {
	margin-top: 20px;
}

.error {
	color: #bcbcbc;
	font-weight: bold;
	font-size: 1em;
}

.reported {
	background-color: #f7f7f7;
}

li.reported:hover {
	background-color: #ececec;
}

div.rules {
	background-color: #ececec;
	color: #bcbcbc;
	padding: 0 10px;
	margin: 10px 0;
	font-size: 1.1em;
}

div.rules ul, div.rules ol {
	margin-left: 20px;
}

p.rules {
	background-color: #ececec;
	background-image: none;
	padding: 5px;
}

p.rules img {
	vertical-align: middle;
	padding-top: 5px;
}

p.rules a {
	vertical-align: middle;
	clear: both;
}

#top {
	position: absolute;
	top: -20px;
}

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}

EDITO para decir que si "CITAIS" el post os será más fácil ver el código... aunque talvez deba de postearlo en pastebin...

luffysombrerodepaja · #4

Bueno, antes que nada os pido que me perdonéis por reflotar el hilo pero es que ya he hecho de todo y no consigo que la letra se cambie. Os explico qué es lo que he hecho primero en una página de prueba en html/php.

He creado los siguientes archivos para hacer la prueba:

estilo.css
fuentes.css
stylesheet.css
index.php

Ahora os voy a poner los contenidos:

ESTILO.CSS

Código: Seleccionar todo

@charset "UTF-8";
/* CSS Document */

@import url("stylesheet.css");
/*@import url('grid_12-825-55-15.css'); ANULADO */
/*@import url("webfontkit/specimen_files/specimen_stylesheet.css"); ANULADO */
@import url("fuentes.css");

FUENTES.CSS

Código: Seleccionar todo

@charset "UTF-8";
/* CSS Document */

body {
	font-family: 'FixedsysTTFMonospaced';
	background-color:#000;
	color:#FFF;
}

STYLESHEET.CSS

Código: Seleccionar todo

@font-face {
    font-family: 'FixedsysTTFMonospaced';
    src: url('fixedsys500c-webfont.eot');
    src: url('fixedsys500c-webfont.eot?#iefix') format('eot'),
         url('fixedsys500c-webfont.woff') format('woff'),
         url('fixedsys500c-webfont.ttf') format('truetype'),
         url('fixedsys500c-webfont.svg#webfontk4X5n652') format('svg');
}

INDEX.PHP

Código: Seleccionar todo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
Esto es una prueba
</body>
</html>

En la carpeta también van los archivos que se mencionan en el stylesheet.css y todo lo necesario. En este enlace podéis encontrar todo lo necesario para personalizar la fuente de una web.

Pues bien, en esa sencilla página funciona a la perfección y se me cambia la fuente pero en el foro no hay manera. Obviamente he actualizado Temas y limpiado caché y nada.

Aquí os pongo qué he modificado para intentar que funcionara y no sé qué es en lo que fallo.

Tanto en el archivo common.css como en los demás he hecho lo siguiente:

Código: Seleccionar todo

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: 'FixedsysTTFMonospaced';
	color: #fff;
	background-color: #000;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

h1 {
	/* Forum name */
/*    font-family: 'FixedsysTTFMonospaced';*/
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

Como podéis ver he puesto que el general (BODY) se por definición esa fuente en concreto NO dandole opción en ninguno de los CSS (ya los he editado todos) al cambio de fuente anulandola como he hecho en "h1".

Creé un nuevo CSS con el nombre de "stylesheet2.css" con el contenido similar al stylesheet usado en la página que hice fuera aparte del foro.

Código: Seleccionar todo

@font-face {
    font-family: 'FixedsysTTFMonospaced';
    src: url('fixedsys500c-webfont.eot');
    src: url('fixedsys500c-webfont.eot?#iefix') format('eot'),
         url('fixedsys500c-webfont.woff') format('woff'),
         url('fixedsys500c-webfont.ttf') format('truetype'),
         url('fixedsys500c-webfont.svg#webfontk4X5n652') format('svg');
}

Además como no, añadí la línea pertinente al stylesheet.css del foro

Código: Seleccionar todo

@import url("stylesheet2.css");

@import url("common.css");
@import url("links.css");
@import url("content.css");
@import url("buttons.css");
@import url("cp.css");
@import url("forms.css");
@import url("tweaks.css");
@import url("colours.css");

Haber si alguien sabe decirme porqué no funciona si en teoría debería de hacerlo y si me falta o no modificar algunas líneas.

Gracias.

DaVidU · #5

este es el método que yo he usado y comprobado que funcione http://www.coloreatuforo.com/tutoriales ... t2721.html

luffysombrerodepaja · #6

Ahora sí funciona, mil gracias. El error es porque no tenía puesta la dirección con los "comodines" que se usan para el theme.

Saludos.

phpBB España Oficial

Cambiar a fuente personalizada Tema Solucionado

Cambiar a fuente personalizada

Re: Cambiar a fuente personalizada

Cambiar a fuente personalizada Tema Solucionado

Re: Cambiar a fuente personalizada

Re: Cambiar a fuente personalizada

Re: Cambiar a fuente personalizada

Cambiar a fuente personalizadaTema Solucionado

Cambiar a fuente personalizada

Re: Cambiar a fuente personalizada

Cambiar a fuente personalizada Tema Solucionado

Re: Cambiar a fuente personalizada

Re: Cambiar a fuente personalizada

Re: Cambiar a fuente personalizada

Cambiar a fuente personalizada Tema Solucionado