Mira Zeromm seguí tu consejo, y dentro del kit de FontSquirrel miré como se aplica, lo tenéis aquí:
Código HTML:
Ver original<p>You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
</p>
<h2>2. Include the webfont stylesheet
</h2> <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>
@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
<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> <code><link rel=
"stylesheet
" href=
"stylesheet.css
" type=
"text/css
" charset=
"utf-8
" /
></code>
<h2>3. Modify your own stylesheet
</h2> <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> <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@font-face {
font-family: 'helvetica35thin-webfont';
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;
}
h1 {
font-family:'helvetica35thin-webfont';
}
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<?xml version="1.0" encoding="utf-8"?>
<photos>
<config
folder="photos/"
show_tooltip="true"
auto_play="true"
auto_play_button="true"
auto_play_duration="5"
thumbnail_area_width="710"
thumbnail_height="100"
thumbnail_spacing="10"
thumbnail_border_size="5"
thumbnail_border_color="#EEEEEE"
thumbnail_highlight_color="#333333"
previous_button="true"
next_button="true"
fullscreen_button="true"
scale_options_button="true"
image_scale_option="2"
description="true"
description_bg_color="#000000"
description_bg_alpha="0.6"
[COLOR="Red"]css_file="stylesheet.css"[/COLOR]
tween_duration="0.5"
tween_effect="linear">
</config>
<photo>
<thumbnail>s_Editorial_Black_Rose_Brand_01.jpg</thumbnail>
<filename>Editorial_Black_Rose_Brand_01.jpg</filename>
<tooltip>Image Title 01</tooltip>
<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>
</photo>
En el index.html situé el link que venía en el Kit de FOntSquirrel:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> [COLOR="red"]
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />[/COLOR]
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
color: #FFF;
background-color: #000;
font-family:'helvetica35thin-webfont';
font-size: 13px;
}
a:link, a:visited { color: #FF6; }
a:hover { color: #F6F; }
-->
<!-- embedding SWF -->
<script type="text/javascript"> var flashvars = {};
flashvars.xml_file = "flashmo_259_photo_list.xml";
var params = {};
params.allowfullscreen = true;
var attributes = {};
attributes.id = "flashmo_template";
attributes.name = "flashmo_template";
swfobject.embedSWF("flashmo_259_fluid_gallery.swf", "flashmo_template", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
swffit.fit("flashmo_template", 800, 480);
<!-- embedding SWF -->
<!-- flash gallery SWF -->
<div id="flashmo_template"> <a href="http://www.flashmo.com" target="_blank">Free Flash Gallery
</a> <a href="http://www.adobe.com/go/getflashplayer" target="_blank"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> <!-- flash gallery SWF -->
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