Foros del Web » Creando para Internet » CSS »

Incrustar tipografía en CSS

 Estas en el tema de Incrustar tipografía en CSS en el foro de CSS en Foros del Web. Hola a todos, en primer lugar quiero decir que soy bastante inexperto en esto del CSS, soy Diseñador gráfico puro y duro, pero me veo ...
  #1 (permalink)  
Antiguo 12/02/2014, 07:36
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Pregunta Incrustar tipografía en CSS
Hola a todos, en primer lugar quiero decir que soy bastante inexperto en esto del CSS, soy Diseñador gráfico puro y duro, pero me veo en estos problemas de vez en cuando. Al grano, quiero incluir la tipografía Helvética 35 Thin en mi site. Para ello realicé una Prueba de un simple tutorial el cual funciona perfectamente: una carpeta llamada "fonts" con la tipografía dentro, un archivo CSS con este código:

Código CSS: 
Ver original
  1. @font-face {
  2.     font-family:helvetica35;
  3.     src:url(fonts/helvetica35.ttf)    
  4. }
  5.  
  6. h1 {
  7. font-family:helvetica35;
  8. }

En este Html:

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.  
  4.     <title> Prueba con @font-face</title>
  5.         <link rel="stylesheet" type="text/css" href="fonts.css">
  6.     
  7. </head>
  8. <body>
  9.  
  10. <h1> PRUEBA CON HELVETICA THIN</h1>
  11.  
  12. </body>
  13. </html>

El resultado es totalmente satisfactorio y pensé que ya había dado con la solución.

Al intentarlo en una plantilla web de Flash más compleja, hay un CSS que enlaza a un XML y el resultado es en un ShockwaveFlash, y no logro realizarlo, parece como si no me encontrase la tipografía y pone la que tiene por defecto. Ha llegado un punto en que no se seguir y estoy bastante frustrado.

El CSS es este código y se llama; flashmo_210_style :

Código CSS: 
Ver original
  1. @font-face {
  2.     font-family:helvetica35;
  3.     src:url(fonts/helvetica35.ttf)
  4.        
  5. }
  6.  
  7. p {
  8.     font-family:helvetica35;
  9.     font-size: 12px;
  10.     color: #FFFFFF;
  11. }
  12.  
  13. a {
  14.     color: #CCFF00;
  15.     text-decoration: underline;
  16. }
  17.  
  18. a:hover {
  19.     color: #FF6633;
  20.     text-decoration: none;
  21. }
  22.  
  23. .title {
  24.     font-family:helvetica35;
  25.     font-size: 30px;
  26.     color: #FFFFFF;
  27. }
  28.  
  29. .subtitle {
  30.     font-family:helvetica35;
  31.     font-size: 18px;
  32.     color: #FFCC00;
  33. }
  34.  
  35. .highlight {
  36.     color: #CC99FF;
  37. }
  38.  
  39. .note {
  40.     font-family:helvetica35;
  41.     font-size: 11px;
  42.     color: #BBBBBB;
  43. }

Creo que sencillo, pero no se..., sólo añadí el @font-face y cambié en los estilos el Font-Family sustituyendo Arial, Verdana, etc por el nombre. El XML es el siguiente código y se llama; flashmo_259_photo_list:

Código XML: 
Ver original
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <photos>
  3.  
  4.     <config
  5.         folder="photos/"
  6.         show_tooltip="true"
  7.         auto_play="true"
  8.         auto_play_button="true"
  9.         auto_play_duration="5"
  10.         
  11.         thumbnail_area_width="710"
  12.         thumbnail_height="100"
  13.         thumbnail_spacing="10"
  14.         thumbnail_border_size="5"
  15.         thumbnail_border_color="#EEEEEE"
  16.         thumbnail_highlight_color="#333333"
  17.  
  18.         previous_button="true"
  19.         next_button="true"
  20.         fullscreen_button="true"
  21.         scale_options_button="true"
  22.         image_scale_option="2"
  23.         
  24.         description="true"
  25.         description_bg_color="#000000"
  26.         description_bg_alpha="0.6"
  27.         css_file="flashmo_210_style.css"
  28.         tween_duration="0.5"
  29.         tween_effect="linear">
  30.     </config>
  31.     
  32.     <photo>
  33.         <thumbnail>s_Editorial_Black_Rose_Brand_01.jpg</thumbnail>
  34.         <filename>Editorial_Black_Rose_Brand_01.jpg</filename>
  35.         <tooltip>Image Title 01</tooltip>
  36.         <description><![CDATA[<p class="subtitle">HELVETICA NO ROUNDED</p><p><a href="http://www.flashmo.com/page/1" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero. <span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
  37.     </photo>

Aplicándolo logré quitar Arial de la película Flash, pero me muestra una Times New Roman.

No se si hay que aplicar algo en el index.html, como en la Prueba, os lo pego que es muy corto:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3.     <head>
  4.         <title>Fluid Gallery</title>
  5.         <meta name="Keywords" content="Fluid Gallery, XML Flash, Image Gallery, fade in out, photo slideshow, auto play, screen fit, fill, no scale, actionscript 3, flashmo, resizable, fullscreen, 100% width, 100% height, example 1" />
  6.         <meta name="Description" content="Fluid Gallery is an open source XML Flash Image Gallery from flashmo.com website. This is a fluid layout, 100% width and height. Option to show/hide Image Scaling Buttons (screen fit, screen fill or no scale). Description text is using HTML formatted by the CSS file." />
  7.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8.         <style type="text/css">
  9.         <!--
  10.         html, body {
  11.             margin: 0;
  12.             padding: 0;
  13.             height: 100%;
  14.             overflow: hidden;
  15.             color: #FFF;
  16.             background-color: #000;
  17.             font-family:helvetica35;
  18.             font-size: 13px;
  19.         }
  20.         a:link, a:visited { color: #FF6; }
  21.         a:hover { color: #F6F; }
  22.         -->
  23.         </style>
  24.         <!-- embedding SWF -->
  25.         <script type="text/javascript" src="swfobject.js"></script>
  26.         <script type="text/javascript" src="swffit.js"></script>
  27.         <script type="text/javascript">
  28.             var flashvars = {};
  29.             flashvars.xml_file = "flashmo_259_photo_list.xml";
  30.             var params = {};
  31.             params.allowfullscreen = true;
  32.             var attributes = {};
  33.             attributes.id = "flashmo_template";
  34.             attributes.name = "flashmo_template";
  35.             swfobject.embedSWF("flashmo_259_fluid_gallery.swf", "flashmo_template", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
  36.             swffit.fit("flashmo_template", 800, 480);
  37.         </script>
  38.         <!-- embedding SWF -->
  39.     </head>
  40.     <body>
  41.         <!-- flash gallery SWF -->
  42.             <div id="flashmo_template">
  43.                 <br /><br />
  44.                 <a href="http://www.flashmo.com" target="_blank">Free Flash Gallery</a>
  45.                 <br /><br />
  46.                 <a href="http://www.adobe.com/go/getflashplayer" target="_blank">
  47.                     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  48.                 </a>
  49.             </div>
  50.         <!-- flash gallery SWF --> 
  51.     </body>
  52. </html>


No se si alguien me puede ayudar, así que quedo a la espera de alguien que sepa de esto (yo ni idea), y mis gracias de antemano por perder un poquito de vuestro tiempo.

Un saludo
Jorge
Última edición por pzin; 12/02/2014 a las 08:35 Razón: formato código
  #2 (permalink)  
Antiguo 12/02/2014, 07:48
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Incrustar tipografía en CSS
Bueno, como dices que funciona perfectamente, ¿damos el tema por solucionado?

Cuando publiques código utiliza la opción highlight para darle formato al mismo.
  #3 (permalink)  
Antiguo 12/02/2014, 07:56
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 4 meses
Puntos: 60
Respuesta: Incrustar tipografía en CSS
El " font-family" tienes que meterlo con comillas simples:

font-family: "helvetica35";

Y fijate que tengas la ruta de la fuente bien puesta
  #4 (permalink)  
Antiguo 12/02/2014, 07:59
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Incrustar tipografía en CSS
Cita:
Iniciado por Zeromm Ver Mensaje
El " font-family" tienes que meterlo con comillas simples:

font-family: "helvetica35";

Y fijate que tengas la ruta de la fuente bien puesta
Eso realmente no es verdad. Ahí debería funcionar —que tampoco dice otra cosa— perfectamente. Las comillas en CSS son casi siempre opcionales, a menos que existan caracteres extraños, espacios y otras cosas en la cadena.
  #5 (permalink)  
Antiguo 12/02/2014, 08:32
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Incrustar tipografía en CSS
Siento que parte del texto se hay acolado en el script, vaya lío leerlo así...., sigue sin solución, espero más ideas, yo no se hacer nada más. Lo de las comillas lo probaré en un rato, ya os diré si funcionó, pero en la Prueba simple que realicé está sin comillas tal como lo veis, y si que funciona. Alguna idea de que ocurre?.


Gracias a todos
  #6 (permalink)  
Antiguo 12/02/2014, 08:37
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 4 meses
Puntos: 60
Respuesta: Incrustar tipografía en CSS
Si, cierto. Yo como siempre lo puse por inercia... pensé que podría ser esa opción xD.

Entonces voto por que no está la ruta bien puesta... o la más segura, que faltan formatos de fuente.

Cuando usas "font-face" hay que "crear" la fuente en distintos formatos ".eot", ".woff" y ".svg"

Puedes usar esta página para ello. http://www.fontsquirrel.com/tools/webfont-generator
  #7 (permalink)  
Antiguo 12/02/2014, 08:38
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Incrustar tipografía en CSS
Ya has sacado el texto de la cuestión del código!, gracias Moderador!..., así si que se lee perfectamente. Saludos
  #8 (permalink)  
Antiguo 12/02/2014, 08:42
Avatar de jonni09lo
Colaborador
  
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 13 años, 3 meses
Puntos: 397
Respuesta: Incrustar tipografía en CSS
Te haré una pregunta que puede parecer tonta pero en el trasfondo no lo es. ¿Estás incluyendo el archivo flashmo_210_style.css?

Digo esto ya que tu dices que el archivo CSS se llama así, pero en el código que muestras NO se ve que se llame ese archivo. Además asegurate de que ese archivo se llame antes de este código:

Código HTML: 
Ver original
  1. <style type="text/css">
  2.     <!--
  3.     html, body {
  4.         margin: 0;
  5.         padding: 0;
  6.         height: 100%;
  7.         overflow: hidden;
  8.         color: #FFF;
  9.         background-color: #000;
  10.         font-family:helvetica35;
  11.         font-size: 13px;
  12.     }
  13.     a:link, a:visited { color: #FF6; }
  14.     a:hover { color: #F6F; }
  15.     -->
  16. </style>

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #9 (permalink)  
Antiguo 12/02/2014, 08:46
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Incrustar tipografía en CSS
Zerom, si, tengo la fuente en todos esos formatos, lo hicee a través de Squirrel. Gracias por el apunte, pero pensé que probando una simple true type simplificaba. Mira este es el código que me generó la web que nombras:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 11, 2014 */



@font-face {
font-family: 'helvetica35-thinthin';
src: url('helvetica35thin-webfont.eot');
src: url('helvetica35thin-webfont.eot?#iefix') format('embedded-opentype'),
url('helvetica35thin-webfont.woff') format('woff'),
url('helvetica35thin-webfont.ttf') format('truetype'),
url('helvetica35thin-webfont.svg#helvetica35-thinthin') format('svg');
font-weight: normal;
font-style: normal;

}


Pero al ponerlo lo tengo en la carpeta de fuentes llamada "fonts", así que le añadí en la url: fonts/, pero tampoco me hizo nada. De todas formas en un par de horas mme pondré de nuevo y volverá a comprobar lo de Squirrel. Como es posible que en un archivo simple como el de la Prueba que hice lo logro hacer, y luego aquí no?, en fin , mil gracias a todos de nuevo. Nos vemos en nada...
  #10 (permalink)  
Antiguo 12/02/2014, 08:56
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Incrustar tipografía en CSS
jonni09lo

No se, como en la plantilla no hace referencia, no he querido añadir nada. Como lo harías tú?, como lo llamo, con un "h1", y donde lo coloco, antes de la etiqueta style?. Hay algo que me mosquea y es que en el index de la Prueba, coloco cambiando el nombre del CSS: <link rel="stylesheet" type="text/css" href="flashmo_210_style.css">. Pero este enlace al situarlo en el otro Index o en el XML, me da error. No se si tendrá algo que ver, y ni idea.

Saludos

Gracias
  #11 (permalink)  
Antiguo 12/02/2014, 09:07
Avatar de jonni09lo
Colaborador
  
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 13 años, 3 meses
Puntos: 397
Respuesta: Incrustar tipografía en CSS
pero hombre como quieres que te funcione si no estás incluyendo los estilos

No se la estructura de tus carpetas, pero solo debes de incluir el archivo CSS antes del style, algo así:

Código HTML: 
Ver original
  1. <link rel="stylesheet" type="text/css" href="css/flashmo_210_style.css">
  2. <style type="text/css">
  3.     <!--
  4.     html, body {
  5.         margin: 0;
  6.         padding: 0;
  7.         height: 100%;
  8.         overflow: hidden;
  9.         color: #FFF;
  10.         background-color: #000;
  11.         font-family:helvetica35;
  12.         font-size: 13px;
  13.     }
  14.     a:link, a:visited { color: #FF6; }
  15.     a:hover { color: #F6F; }
  16.     -->
  17. </style>

Ojo que debes de colocar la ruta de tu CSS...

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.
  #12 (permalink)  
Antiguo 12/02/2014, 16:19
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Incrustar tipografía en CSS
Hola Jonni09_ te hice caso pero no embebe la fuente, te dejo el código. La ruta del CSS es directa ya que están en la misma carpeta, he añadido lo generado por fontsquirel en el CSS.

Código HTML, index.html:

Cita:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3.     <head>
  4.         <title>Fluid Gallery</title>
  5.         <link rel="stylesheet" type="text/css" href="flashmo_210_style.css">
  6.         <style type="text/css">
  7.         <!--
  8.         html, body {
  9.             margin: 0;
  10.             padding: 0;
  11.             height: 100%;
  12.             overflow: hidden;
  13.             color: #FFF;
  14.             background-color: #000;
  15.             font-family:'helvetica35-thinthin';
  16.             font-size: 13px;
  17.         }
  18.         a:link, a:visited { color: #FF6; }
  19.         a:hover { color: #F6F; }
  20.         -->
  21.         </style>
  22.         <!-- embedding SWF -->
  23.         <script type="text/javascript" src="swfobject.js"></script>
  24.         <script type="text/javascript" src="swffit.js"></script>
  25.         <script type="text/javascript">
  26.             var flashvars = {};
  27.             flashvars.xml_file = "flashmo_259_photo_list.xml";
  28.             var params = {};
  29.             params.allowfullscreen = true;
  30.             var attributes = {};
  31.             attributes.id = "flashmo_template";
  32.             attributes.name = "flashmo_template";
  33.             swfobject.embedSWF("flashmo_259_fluid_gallery.swf", "flashmo_template", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
  34.             swffit.fit("flashmo_template", 800, 480);
  35.         </script>
  36.         <!-- embedding SWF -->
  37.     </head>
  38.     <body>
  39.         <!-- flash gallery SWF -->
  40.             <div id="flashmo_template">
  41.                 <br /><br />
  42.                 <a href="http://www.flashmo.com" target="_blank">Free Flash Gallery</a>
  43.                 <br /><br />
  44.                 <a href="http://www.adobe.com/go/getflashplayer" target="_blank">
  45.                     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  46.                 </a>
  47.             </div>
  48.         <!-- flash gallery SWF --> 
  49.     </body>
  50. </html>


Ahora el archivo CSS, flashmo_210_style.css:

Código CSS: 
Ver original
  1. @font-face {
  2.     font-family:'helvetica35-thinthin';
  3.     src: url('fonts/helvetica35thin-webfont.eot');
  4.     src: url('fonts/helvetica35thin-webfont.eot?#iefix') format('embedded-opentype'),
  5.          url('fonts/helvetica35thin-webfont.woff') format('woff'),
  6.          url('fonts/helvetica35thin-webfont.ttf') format('truetype'),
  7.          url('fonts/helvetica35thin-webfont.svg#helvetica35-thinthin') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10.  
  11. }
  12.  
  13. p {
  14.     font-family:'helvetica35-thinthin';
  15.     font-size: 12px;
  16.     color: #FFFFFF;
  17. }
  18.  
  19. a {
  20.     color: #CCFF00;
  21.     text-decoration: underline;
  22. }
  23.  
  24. a:hover {
  25.     color: #FF6633;
  26.     text-decoration: none;
  27. }
  28.  
  29. .title {
  30.     font-family:'helvetica35-thinthin';
  31.     font-size: 30px;
  32.     color: #FFFFFF;
  33. }
  34.  
  35. .subtitle {
  36.     font-family:'helvetica35-thinthin';
  37.     font-size: 18px;
  38.     color: #FFCC00;
  39. }
  40.  
  41. .highlight {
  42.     color: #CC99FF;
  43. }
  44.  
  45. .note {
  46.     font-family:'helvetica35-thinthin';
  47.     font-size: 11px;
  48.     color: #BBBBBB;
  49. }



Estoy cansado de buscar por la web alternativas de código, pero todo es lo mismo. A ver si alguien puede ayudar. Gracias
  #13 (permalink)  
Antiguo 12/02/2014, 16:36
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 4 meses
Puntos: 60
Respuesta: Incrustar tipografía en CSS
a ver, cuando te descargas los archivos de "fontsquirrel", te descarga entre esos archivos un archivo html con el ejemplo en funcionamiento. Pues muy facil, lo abres, y copias pegas en tu archivo y listo. Recuerda poner bien las rutas.

Igualmente, si pudieras subir el proyecto a remoto y se pudiera ver todo subido sería muchisimo más facil ayudarte
  #14 (permalink)  
Antiguo 13/02/2014, 13:41
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Incrustar tipografía en CSS
Como se sube un proyecto a remoto Zeromm?
  #15 (permalink)  
Antiguo 13/02/2014, 13:50
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 4 meses
Puntos: 60
Respuesta: Incrustar tipografía en CSS
tienes que tener un dominio y subir los archivos via FTp (aunque está de moda tener la web en github)
  #16 (permalink)  
Antiguo 13/02/2014, 14:09
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Mira Zeromm seguí tu consejo, y dentro del kit de FontSquirrel miré como se aplica, lo tenéis aquí:

Código HTML: 
Ver original
  1. <p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.</p>
  2.                     
  3.                     <h2>2. Include the webfont stylesheet</h2>
  4.                     <p>A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the <a href="http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax">Fontspring blog post</a> about it. The code for it is as follows:</p>
  5.  
  6.  
  7. <code>
  8. @font-face{ 
  9.     font-family: 'MyWebFont';
  10.     src: url('WebFont.eot');
  11.     src: url('WebFont.eot?#iefix') format('embedded-opentype'),
  12.          url('WebFont.woff') format('woff'),
  13.          url('WebFont.ttf') format('truetype'),
  14.          url('WebFont.svg#webfont') format('svg');
  15. }
  16. </code>
  17.  
  18.     <p>We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:</p>
  19.     <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;stylesheet.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot; /&gt;</code>
  20.  
  21.                     <h2>3. Modify your own stylesheet</h2>
  22.                     <p>To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:</p>
  23. <code>p { font-family: 'WebFont', Arial, sans-serif; }</code>


Primero lo cambié en mi CSS e incluso lo he renombrado a "stylesheet.css", es este con los cambios, en lugar de todos los estilos sólo he probado un h1:

Código CSS: 
Ver original
  1. @font-face {
  2.     font-family: 'helvetica35thin-webfont';
  3.     src: url('helvetica35thin-webfont.eot');
  4.     src: url('helvetica35thin-webfont.eot?#iefix') format('embedded-opentype'),
  5.          url('helvetica35thin-webfont.woff') format('woff'),
  6.          url('helvetica35thin-webfont.ttf') format('truetype'),
  7.          url('helvetica35thin-webfont.svg#helvetica35-thinthin') format('svg');
  8.     font-weight: normal;
  9.     font-style: normal;
  10.  
  11. }
  12.  
  13. h1 {
  14. font-family:'helvetica35thin-webfont';
  15. }

En el XML, "flashmo_259_photo_list, apliqué los cambios y sólo puse un h1 en la primera etiqueta para el texto (HELVETICA ROUNDED) de la primera fotografía, aquí lo dejo:

Código XML: 
Ver original
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <photos>
  3.  
  4.     <config
  5.         folder="photos/"
  6.         show_tooltip="true"
  7.         auto_play="true"
  8.         auto_play_button="true"
  9.         auto_play_duration="5"
  10.         
  11.         thumbnail_area_width="710"
  12.         thumbnail_height="100"
  13.         thumbnail_spacing="10"
  14.         thumbnail_border_size="5"
  15.         thumbnail_border_color="#EEEEEE"
  16.         thumbnail_highlight_color="#333333"
  17.  
  18.         previous_button="true"
  19.         next_button="true"
  20.         fullscreen_button="true"
  21.         scale_options_button="true"
  22.         image_scale_option="2"
  23.         
  24.         description="true"
  25.         description_bg_color="#000000"
  26.         description_bg_alpha="0.6"
  27.         [COLOR="Red"]css_file="stylesheet.css"[/COLOR]
  28.         tween_duration="0.5"
  29.         tween_effect="linear">
  30.     </config>
  31.     
  32.     <photo>
  33.         <thumbnail>s_Editorial_Black_Rose_Brand_01.jpg</thumbnail>
  34.         <filename>Editorial_Black_Rose_Brand_01.jpg</filename>
  35.         <tooltip>Image Title 01</tooltip>
  36.         <description><![CDATA[[COLOR="red"]<h1>HELVETICA ROUNDED</h1>[/COLOR]<p><a href="http://www.flashmo.com/page/1" target="_parent">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. <span class="highlight">Quisque at ante sit amet</span> erat laoreet <u>fermentum</u>. Nam scelerisque cursus dolor. Duis nulla diam, posuere ac, varius id, ullamcorper sit amet, libero. <span class="note">This text is dynamically loaded from the external XML file. This textfield supports HTML and CSS.</span></p>]]></description>
  37.     </photo>

En el index.html situé el link que venía en el Kit de FOntSquirrel:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3.     <head>
  4.         <title>jorch</title>
  5.        [COLOR="red"] <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />[/COLOR]
  6.         <style type="text/css">
  7.         <!--
  8.         html, body {
  9.             margin: 0;
  10.             padding: 0;
  11.             height: 100%;
  12.             overflow: hidden;
  13.             color: #FFF;
  14.             background-color: #000;
  15.             font-family:'helvetica35thin-webfont';
  16.             font-size: 13px;
  17.         }
  18.         a:link, a:visited { color: #FF6; }
  19.         a:hover { color: #F6F; }
  20.         -->
  21.         </style>
  22.         <!-- embedding SWF -->
  23.         <script type="text/javascript" src="swfobject.js"></script>
  24.         <script type="text/javascript" src="swffit.js"></script>
  25.         <script type="text/javascript">
  26.             var flashvars = {};
  27.             flashvars.xml_file = "flashmo_259_photo_list.xml";
  28.             var params = {};
  29.             params.allowfullscreen = true;
  30.             var attributes = {};
  31.             attributes.id = "flashmo_template";
  32.             attributes.name = "flashmo_template";
  33.             swfobject.embedSWF("flashmo_259_fluid_gallery.swf", "flashmo_template", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
  34.             swffit.fit("flashmo_template", 800, 480);
  35.         </script>
  36.         <!-- embedding SWF -->
  37.     </head>
  38.     <body>
  39.         <!-- flash gallery SWF -->
  40.             <div id="flashmo_template">
  41.                 <br /><br />
  42.                 <a href="http://www.flashmo.com" target="_blank">Free Flash Gallery</a>
  43.                 <br /><br />
  44.                 <a href="http://www.adobe.com/go/getflashplayer" target="_blank">
  45.                     <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  46.                 </a>
  47.             </div>
  48.         <!-- flash gallery SWF --> 
  49.     </body>
  50. </html>


No funciona nada, pero es más, fui a Google Font y probé con una tipografía elegida, ya sabéis que sólo debo pegar un link en el head y cambiar el Font-Family, pues ni eso funciona. Un desastre, y se que en cualquier CSS creo que puede funcionar, yo no se si el problema está en el archivo .fla. Os dejo el link de mi dominio, allí está subida la prueba de la que os hablo. Siento volver a insistir, pero es que creo que vosotros sois los únicos que podéis ayudarme a solucionar esto:

www.historiasdejorch.com

Gracias de nuevo y estoy atento a cualquier comentario.

Un saludo
Jorge

[URL="http://www.historiasdejorch.com"]http://www.historiasdejorch.com[/URL]

Os dejo un link donde está la prueba simple que funciona, la acabo de hacer, por favor descargarla y veis los archivos: index.html/ carpeta fonts (las fuentes del kit de FontSquirrel) / fonts.css. Luego si que va, pero en la plantilla de mi web no logro realizarla.

https://dl.dropboxusercontent.com/u/...ueba%20CSS.rar

Saludos
Última edición por pzin; 14/02/2014 a las 02:33 Razón: combinar mensajes
  #17 (permalink)  
Antiguo 14/02/2014, 00:06
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 4 meses
Puntos: 60
Respuesta: Incrustar tipografía en CSS
Cita:
Iniciado por jrtorvisco Ver Mensaje
[URL="http://www.historiasdejorch.com"]http://www.historiasdejorch.com[/URL]
Esto es todo Flash, no tiene nada que ver ni con css ni con html...

Cita:
Iniciado por jrtorvisco Ver Mensaje
Os dejo un link donde está la prueba simple que funciona, la acabo de hacer, por favor descargarla y veis los archivos: index.html/ carpeta fonts (las fuentes del kit de FontSquirrel) / fonts.css. Luego si que va, pero en la plantilla de mi web no logro realizarla.

https://dl.dropboxusercontent.com/u/...ueba%20CSS.rar

Saludos
Si, esta prueba funciona bien porque es html y css
  #18 (permalink)  
Antiguo 14/02/2014, 05:59
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Incrustar tipografía en CSS
En la plantilla está el (.fla), el (index.html) donde se carga, y luego lleva un (.css), y un (.js)

Veo que el problema está en el archivo .fla, verdad?
  #19 (permalink)  
Antiguo 14/02/2014, 06:10
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 4 meses
Puntos: 60
Respuesta: Incrustar tipografía en CSS
Si. está claro que si. Las fuentes las estás cargando en el archivo flash, no con css
  #20 (permalink)  
Antiguo 14/02/2014, 06:19
 
Fecha de Ingreso: noviembre-2013
Mensajes: 23
Antigüedad: 11 años, 1 mes
Puntos: 0
Respuesta: Incrustar tipografía en CSS
Gracias Zeromm! :)

Etiquetas: background, color, efecto, hover, html, incrustar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:21.