Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    @Lampica re: @font-face

    Hi Lampica,
    I am contacting you re @font-face. I have downloaded the zip files from font squirrel for my 2 fonts. When I open the demo.html in my browser I'm using FF 3.6 beta5 & IE7, it opens correctly in FF but in IE I see a different font. Because I don't know enough about the files in the zip, I'm not sure what should happen when I use a browser to open them. But for both fonts when I attempt to open the .eot files in IE they start to open then IE crashes. When I try to open the .svg files FF opens to blank pages on both. When I try to open the .WOFF files ff opens a window, then a pop up asking if I want to open or save, I choose open, then FF opens another window with the same pop up, & on & on. Never opening the file. I was told by font squirrel that I must use embedded CSS. What I have so far is an .html document containing I believe inline CSS for my font choices. There is no other CSS in the document to my knowledge. The doc is mostly pictures and a table with the text. The text will be 2 different fonts, one is a title that has no htags, it is 32px & is colored. I wanted to use CSS for a backup font because most wont have this font on their comps, but they might not have the back up either which is papyrus although I do believe it comes standard on most PCs anyway. I also wanted to use a backup in case for some reason, @font-face isn't working. The rest of the text will be in papyrus, also no htags here either. Size 20px in the same color which is #00FFFF. I'm using Dreamweaver CS3, but have software to install so I can use CS4 if need be. I do have a plain text editor which is Notepad++. It has taken me years to get to this point, & I don't want to give up until I get it right. I would also like to ask if you know anything about this http://www.kremalicious.com/2008/04/...s-text-shadow/
    I would like to use it to bevel emboss the text to make it stand out from the page. Maybe you know something about it? Also, I did try some text in Adobe Flash CS3 and when I view it on another computer that doesn't have any of the fonts installed on it, I am able to see them all. Does this mean if there were a way to place the html that flash generates into my html doc that I could use flash to create my text? The text that I am creating needs to change with each Item & it's photos, that is placed in the template & listed in ebay. Thank you so much for helping it is truly appreciated!!

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Who is Lampica? What the hell are you on about?

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    My apologies for upsetting anyone with my post. Certainly not my intention. I posted a question on another site & received a response from Lampica, I was asked to post the question regarding @font-face on this site because Lampica would be able to see it & respond here. If I wasn't supposed to do that I was unaware of it & I won't post anything regarding @font-face again. Sincerest apologies, Stacey

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You are free to ask your question but there is no member here with a username of Lampica. We are all able to help not just "lampica".
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts

    That would be me ...

    Ok, I could probably help you look into getting @font-face working. But only on the condition that you try not to type such long paragraphs .

    As for flash and other solutions beyond html/css (just google sIFR, FLIR SIIR, Cufon). However beyond plain old html/css I can't offer much help. Besides, most other solutions require some server side help (like PHP) and somehow I doubt that ebay supports much at all on the server side.

    First you should ask yourself, why not just use images for your headlines? You can prepare them using any font and add shadows or whatever in Photoshop (or any image editing app). By far the simplest and most straightforward to implement. And in the end it may turn out to be your only option on ebay (I don't really know much about ebay but I expect that your options are somewhat limited by their system).

    You might want to look into Type Select. This looks like a very promising alternative for custom fonts. I have not had time to really test it though but when I get a little free time I plan on looking into it further. Advantages here are that it doesn't require much on the server side (I think it is just pure Javascript) and custom fonts still behave as selectable text in most modern browsers, but don't require the client to have the font. It uses a clever combination of stunts to make dynamically generated images behave like regular selectable text. But I can't offer much help getting that working as I only just noticed it.

    In order to help you get @font-face working I will need to see your code. So if that is what you really want to pursue then please post whatever html/css you have so far here, or post a link to the web page so I can look at it.
    Last edited by linehand; 01-08-2010 at 08:54 AM.

  • Users who have thanked linehand for this post:

    Stacey.S (01-08-2010)

  • #6
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have tried all of these sIFR, FLIR SIIR, & Cufon before trying @font-face,but couldn't get any to work. For all portions of the text that doesn't need to be searchable in ebay, I used photoshop. But the title & item description need to be searchable, so that portion of the text can't be done in photoshop. Don't think I can use type select since you said it is dynamically generated images, & I need searchable text. Here is the link.
    http://staceysilver.webs.com/eBayTem...ryTemplate.htm
    Thank you so much for your help, I've been working on this for so long decided to take classes just to do it, but it's taking too long, already been 4 years. Do you happen to know anything about this http://www.kremalicious.com/2008/04/...s-text-shadow/ ?
    Stacey

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Most of those options will supply searchable text. Type Select certainly does. You could also just use a basic CSS image replacement method. There are various methods.

    One common trick is to use the images as css background images for your headings. Then you still have the text there in a regular font on top of the background image. So you just use CSS styles to set the <H>s text indent really high and set overflow to hidden so the text is not visible.

    That way you still have regular text headings for search engines, but you use css to push them off screen and apply the background images. People see pictures, Search engines see text. And if you set it up right screen readers won't have any trouble with it either.

    The link to your page isn't working for me. It may be that it is blocked here in China (lots of random things are pointlessly blocked here for no apparent reason), but it may just not be working..? You could just post the code here.

    As for the text shadows, I don't know much about it. It is not supported at all by IE. It looks like everything you could want to know about it is there on that page linked. He explains it all very clearly too, so I don't know how I could explain it any better even if I did know all about it.

  • #8
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello,
    Here is the code copied from Dreamweaver. I would like to try what you last suggested, if you feel that is the best way for me to go & if I can get a better understanding of it & it's not too complicated for me to do regularly. I hope to get to a point of doing 10 listings a week. I checked out Type Select today, but it seems to require htags, & external CSS, as I am just a beginner, I don't really have a clue when it comes to .js. Just so that you know what I'm trying to do, the 6 center photographs will change with every auction listing. So will the item title, the item description, & the item specs. The font will always be the same font I may want to change the size of it & the color of it. The darker green background color may also change depending on the color of the item listed. Thank you again

    <html>
    <head>


    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
    <!--
    body {
    background-image: url();
    background-repeat: no-repeat;
    }
    .style11 {
    font-family: Papyrus;
    font-size: 20px;
    color: #00FFFF;
    font-weight: bold;
    }
    .style13 {
    font-family: "Font in a Red Suit";
    font-size: 32px;
    color: #00FFFF;
    }


    -->
    </style>
    </head>

    <body>
    <div>
    <table align="center" width="1053" style="margin-right:auto; margin-left:auto; margin-top:0; margin-bottom:0;" border="0" cellpadding="0" cellspacing="0">

    <tr>
    <td colspan="3" bgcolor="#333333"><img src="http://staceysilver.webs.com/jewelryTemplate/images/topRow.png" width="1052" height="157" longdesc="images/topRow.png"></td>
    </tr>

    <tr>
    <td width="175" bgcolor="#333333"><img src="http://staceysilver.webs.com/jewelryTemplate/images/leftRow.png" width="175" height="4086" longdesc="images/leftRow.png"></td>
    <td width="699" align="center" valign="middle" bgcolor="#008A8A" ><table width="699" height="4086" align="center" cellpadding="2" cellspacing="2" background="http://staceysilver.webs.com/jewelryTemplate/graphics/centerGraphics.png" >

    <td height="120" align="center" valign="top">
    <tr>
    <tr>
    <td height="55" align="center" valign="middle">
    <div align="center" class="style46"><img src="http://staceysilver.webs.com/jewelryTemplate/graphics/STAR.png" width="55" height="55" align="absmiddle" longdesc="graphics/STAR.png"><span class="style13">this is the item title </span><img src="http://staceysilver.webs.com/jewelryTemplate/graphics/STAR.png" width="55" height="55" align="absmiddle" longdesc="graphics/STAR.png"></div>
    <tr>
    <td height="22" align="center" valign="top">
    <tr>
    <td height="310" align="center" valign="middle" bordercolor="#400000"><div align="center"><img src="itemphotos/_MG_5146.png" width="462" height="305" border="4" align="top" longdesc="../jewelryTemplate/itemphotos/_MG_4594.JPG"></div>
    <tr>
    <td height="25" align="center" valign="top" bordercolor="#330000">
    <tr>
    <td height="20" align="center" valign="middle">
    <tr>
    <td height="165" align="center" valign="top">
    <div align="center" class="style11">This is the item description</div>
    <tr>
    <td height="25" align="center">
    <tr>
    <td height="300" align="center" valign="bottom" bordercolor="#512918"><div align="center"><img src="itemphotos/_MG_3396.png" width="325" height="295" border="3" align="bottom" longdesc="../jewelryTemplate/itemphotos/_MG_3396.JPG"></div>
    <tr>
    <td height="45" align="center" valign="middle">

    <tr>
    <td height="100" align="center" valign="top">
    <div align="center" class="style11">These are the item specs</div>
    <tr>
    <td height="25">
    <tr>
    <td height="325" align="center" valign="top" bordercolor="#663300"><div align="center"><img src="itemphotos/_MG_3348.png" width="352" height="320" border="5"></div>
    <tr>
    <td height="165">
    <tr>
    <tr>
    <td height="325" align="center" valign="middle" bordercolor="#612407">
    <div align="center"><img src="itemphotos/_MG_4594.png" width="415" height="310" border="4" align="middle"></div>
    <tr>
    <td height="135">
    <tr>
    <td height="325" align="center" valign="top" bordercolor="#764F39">
    <div align="center"><img src="itemphotos/_MG_5158.png" width="210" height="320" border="4" align="top"></div>
    <tr>
    <td height="300" align="center" valign="middle">
    <tr>
    <td height="325" align="center" valign="middle" bordercolor="#423117">
    <div align="center"><img src="itemphotos/_MG_3368.png" width="455" height="305" border="5"></div>
    <tr>
    <td>
    </table></td>
    <td width="179" bgcolor="#333333" ><img src="http://staceysilver.webs.com/jewelryTemplate/images/rightRow.png" width="178" height="4086" longdesc="images/rightRow.png"></td>
    </tr>
    <tr>
    <td colspan="3" bgcolor="#333333"><img src="http://staceysilver.webs.com/jewelryTemplate/images/bottomRow.png" width="1052" height="169" longdesc="images/bottomRow.png"></td>
    </tr>
    </table>
    </div>



    </body>
    </html>
    Last edited by Stacey.S; 01-09-2010 at 03:23 AM.

  • #9
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Oh, um can you edit your post, then while editing it you can look above where you edit the text for the post and see the # button. Select all of the code, then click on that # button to wrap the code in code tags.

    You pretty much always have to do that when posting code on any forums otherwise the forum will try to interpret you code and parts of it may disappear or be altered.

  • #10
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I can't edit it, because there is not edit button option. So I have to repost it. I just took a look at in IE & FF, this is the first time since I created it that it does not display correctly in IE. Not sure what to do or what the cause of this is? Maybe you know?
    Stacey

    Code:
    <head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
    <!--
    body {
    	background-image: url();
    	background-repeat: no-repeat;
    }
    .style11 {
    	font-family: Papyrus;
    	font-size: 20px;
    	color: #00FFFF;
    	font-weight: bold;
    }
    .style13 {
    	font-family: "Font in a Red Suit";
    	font-size: 32px;
    	color: #00FFFF;
    }
    
    
    
    -->
    </style>
    </head>
    
    <body>
    <div>
      <table align="center" width="1053" style="margin-right:auto; margin-left:auto; margin-top:0; margin-bottom:0;" border="0" cellpadding="0" cellspacing="0">
      
        <tr>
          <td colspan="3" bgcolor="#333333"><img src=http://staceysilver.webs.com/eBayTemplate/images/topRow.png width="1052" height="157" longdesc="images/topRow.png"></td>
        </tr>
        
        <tr>
          <td width="175" bgcolor="#333333"><img src=http://staceysilver.webs.com/eBayTemplate/images/leftRow.png width="175" height="4086"></td>
          <td width="699" align="center" valign="middle" bgcolor="#008A8A"  ><table width="699" height="4086" align="center" cellpadding="2" cellspacing="2"  background= graphics/centerGraphics.png>
    
             <td height="120" align="center" valign="top">          
             <tr>
             <tr>
               <td height="55" align="center" valign="middle">
                 <div align="center" class="style46"><span class="style13"><img src=http://staceysilver.webs.com/eBayTemplate/graphics/STAR.png width="52" height="52" align="absmiddle" longdesc="graphics/STAR.png">this is the item title </span><img src=http://staceysilver.webs.com/eBayTemplate/graphics/STAR.png width="52" height="52" align="absmiddle" longdesc="graphics/STAR.png"></div>
              <tr>
               <td height="22" align="center" valign="top">         
              <tr>
                 <td height="310" align="center" valign="middle" bordercolor="#400000"><div align="center"><img src="itemphotos/_MG_5146.png" width="462" height="305" border="4" align="top" longdesc="../jewelryTemplate/itemphotos/_MG_4594.JPG"></div>
              <tr>
                <td height="25" align="center" valign="top" bordercolor="#330000">          
              <tr>
                 <td height="20" align="center" valign="middle">
              <tr>
                 <td height="165" align="center" valign="top">
                   <div align="center" class="style11">This is the item description</div>
              <tr>
                 <td height="25" align="center">           
              <tr>
                <td height="300" align="center" valign="bottom" bordercolor="#512918"><div align="center"><img src="itemphotos/_MG_3396.png" width="325" height="295" border="3" align="bottom" longdesc="../jewelryTemplate/itemphotos/_MG_3396.JPG"></div>
              <tr>
                <td height="45" align="center" valign="middle">
              <tr>
                <td height="100" align="center" valign="top">          
                  <div align="center" class="style11">These are the item specs</div>
              <tr>
                <td height="25">          
              <tr>
                <td height="325" align="center" valign="top" bordercolor="#663300"><div align="center"><img src="itemphotos/_MG_3348.png" width="352" height="320" border="5"></div>
              <tr>
                <td height="165">          
              <tr>
              <tr>
                <td height="325" align="center" valign="middle" bordercolor="#612407">
                  <div align="center"><img src="itemphotos/_MG_4594.png" width="415" height="310" border="4" align="middle"></div>
              <tr>
                <td height="135">          
              <tr>
                <td height="325" align="center" valign="top" bordercolor="#764F39">
                  <div align="center"><img src="itemphotos/_MG_5158.png" width="210" height="320" border="4" align="top"></div>
              <tr>
                <td height="300" align="center" valign="middle">
              <tr>
                <td height="325" align="center" valign="middle" bordercolor="#423117">
                  <div align="center"><img src="itemphotos/_MG_3368.png" width="455" height="305" border="5"></div>
              <tr>
                <td>          
          </table></td>
          <td width="179" bgcolor="#333333" ><img src=http://staceysilver.webs.com/eBayTemplate/images/rightRow.png width="178" height="4086" longdesc="images/rightRow.png"></td>
        </tr>
        <tr>
          <td colspan="3" bgcolor="#333333"><img src=http://staceysilver.webs.com/eBayTemplate/images/bottomRow.png width="1052" height="169" longdesc="images/bottomRow.png"></td>
        </tr>
      </table>
    </div>
    
    
    
    </body>
    </html>
    Last edited by Stacey.S; 01-11-2010 at 08:21 AM.

  • #11
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Ok,
    First of all you must check the license agreements for fonts before converting them to different formats and/or using them online with @font-face. You should make sure that what you are doing is legal and isn't going against the license agreement for any given font.. I don't know about Papyrus so you will need to look into that yourself before using it in this manner.

    So if you are using the Font Squirrel @font-face kit generator to convert your fonts then you can select all the formats you need and it will generate them for you. It will also generate a CSS file and you can also set it to generate an additional CSS file with the fonts embedded as base 64.

    You should get .eot, .woff, .otf, and .svg versions of the font, along with two CSS files. The CSS file with the base 64 embedded fonts will have a much larger file size and you should only look into using that as a last resort.

    You can see where in your HTML file I added the @font-face rule for Papyrus. The green text 'path/to/' should be replaced with the real path to the font file. The font files must be hosted on the server.

    Now you said you can only copy and paste HTML for ebay, but they must allow you to upload images too right? Can you upload the font files the same way and then link to them? I don't know if you can figure out a way to host font files on ebay or not.

    If you can't host the fonts on ebay then you might host them elsewhere on some other hosting service and just make the path/to/fontfile link to the font on the other host, but that won't work in firefox without tweaking some server setting (and tweaking the server to make it work in firefox is not an option for ebay).

    If you look you will also see that the last URL reference is for the .svg version which is for google chrome. This format is different then all the others, in that it has a #papyrus after the file name (in the css). I guess this is the SVG file's ID. Anyway just look at the CSS file from Font Squirrel (the small one, not the one with embedded base64) and make sure that this #id is the same as they had it in the CSS file.

    For that matter, make sure all the url's are pointing to the right filenames. You may even use the @font-face rule directly from their css file instead of the example I give below, just copy and paste the rule into the same place that I put my example in your HTML.

    Finally, if there is no way for you to host the font files on ebay, and you want them to work in firefox too, then look into the embedded base64 version of the CSS file from Font Squirrel.

    You will see that in that file every time it says url(...) instead of having a 'path/to/filename.ext' it has a super long string of code. This long string of code is the actual font file for the given format encoded as base64 code so that it can be put directly inside the CSS/HTML file.

    So if all else fails you might try using the @font-face rules from the Base64 encoded CSS files that font-squirrel can generate. That way you can actually embed the fonts in the HTML by placing the rules in the same place I've shown below. Of course this will cause your HTML file to become really big and it might not work in all browsers, I haven't experimented with using the base64 encoding so your mileage may vary.

    I just used Papyrus as an example here, you can use the same structure for any other fonts as well. A second @font-face rule would just go directly beneath the first one, etc..

    Code:
    <!--
    body {
    	background-image: url();
    	background-repeat: no-repeat;
    }
    
    @font-face {
      font-family: 'Papyrus';
      src: url('path/to/Papyrus.eot');
      src: local('Papyrus'), local('Papyrus Regular'),
        url("path/to/Papyrus.woff") format("woff"),
        url("path/to/Papyrus.otf") format("opentype"),
        url("path/to/Papyrus#papyrus") format("svg");
    }
    
    .style11 {
    	font-family: Papyrus;
    	font-size: 20px;
    	color: #00FFFF;
    	font-weight: bold;
    }
    .style13 {
    	font-family: "Font in a Red Suit";
    	font-size: 32px;
    	color: #00FFFF;
    }
    
    
    
    -->
    Edit: Regarding other simple image replacement techniques. Search google for css image replacement. I can give you some links to tutorials a little later (I have to leave now), but you can learn a lot just by reading up on what google returns for you.
    Last edited by linehand; 01-11-2010 at 02:42 PM.

  • Users who have thanked linehand for this post:

    Stacey.S (01-11-2010)

  • #12
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for the code. I don't know if you saw my original post, so I will try not to repeat as much of it as possible. I originally downloaded all of the zip files from font squirrel, but the fonts & the demo.html dont show up correctly in IE or FF, are you supposed to be able to see the fonts displaying correctly when you open them? Font squirrel did tell me that since I can't use external CSS that I have to use embedded. Are the font sizes & bold portions taken from the "styles" in order to work in the browser? I tried to upload the font onto ebay, but I just get a broken photo image. I can ask the html board on ebay if there is a way to do it, but I think I should assume for now that I can't. I will let you know shortly. I think my original troubles came from not knowing that I was trying to "embed" external CSS, & not understanding where exactly in the embeded CSS to place the code, above or below style 11 & 13 since none of the examples I could find showed inline & embeded CSS. Any ideas on what I can do regarding the html doc not showing up correctly in IE, it looks fine in FF? My other question on the shadow & embossing, if I can figure out how to do it, do you recall, when you looked at the code, if when it's being combined with @font-face does it come after or before @font-face code, & after or before the CSS styles 11 & 13 that I'm using?
    Thank you
    Stacey
    Last edited by Stacey.S; 01-11-2010 at 12:02 PM.

  • #13
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Hmm, it is difficult for me to explain how this works because you seem to have a fundamentally flawed concept of how fonts work. A lot of what you are saying just doesn't make any sense so it is difficult for me to respond to your specific points. Let me see if I can't clear things up a little for you.

    1: you can't open a font with a web browser.

    2: you can't view a font file within a web browser.

    3: If you have a font installed on your computer locally then you can view text which gets rendered using that font (no need to open the font file at all). So the app (web browser, word processor, etc..) just refers to the font file, it doesn't really open it.

    4: @font-face is meant to download the font to the user's computer, so that once they have it the text which you set to render with that font will be able to use that font because it has downloaded to the users computer. Note that normally fonts get installed in the OS but with @font-face the browser will handle the font and it will just reside in the browser's cache, thus it won't be available to other apps on the system and it will be removed when the browser cache gets cleared or expires (though what the browser does with the font behind the scenes is not very relevant to what you want to do).

    5: The only reason you would need to open the actual font file is if you really know what you are doing and you want to alter the font in some way (which you don't want to do).

    So let's take a quick look at the CSS that the Font Squirrel generator spits out.

    Code:
    @font-face {
    	font-family: 'Sansation Regular';
    	src: url('Sansation_Regular.eot');
    	src: local('Sansation Regular'), local('Sansation'),
    	url('Sansation_Regular.woff') format('woff'),
    	url('Sansation_Regular.otf') format('opentype'),
    	url('Sansation_Regular#Sansation_Regular') format('svg');
    }
    font-family just tells the browser that this is the name I will use to refer to this font, so from now this font name will refer to these font files.

    src: tells the browser the location on a server where this font file should be downloaded from (the browser will not open the font file, it will not even download the file until it sees some text that request to be rendered in this font (well IE will DL the font as soon as it sees this rule regardless of whether the font is used on the page or not - other browsers are smarter than that).

    You'll notice that src: is there twice.

    The first one is for IE as only IE can use the .eot file and it will get confused by additional arguments so this src: is really simple having just one url which points at a single .eot file for IE.

    The second src: contains all the rest of the properties for this @font-face rule (note that we only see the ; which closes this src argument at the very end after the last url, so all of that is a part of this src argument.

    Here we see the first property of this argument is local which just tells the browser that if a font with this name (defined by local) is on the clients local computer to just use that and don't download this font.

    Because the font name may be slightly different on different systems, you can include multiple local properties with different names. Here we see two different local src properties so fonts with either of those names will be used if they exist on the users system and they won't need to DL any font file.

    Then finally we see the url's for the other browsers. IE won't read these because there is some stuff here (within this whole src argument) that IE can't understand so it just skips the whole thing, but IE already got its .eot file so its all good.

    The other browsers will read these in order and download the first file which they can understand. That is why the WOFF file comes first. It is the best format for web fonts and so any browser that can handle it will take it and be done. Then the OTF for any browsers that couldn't handle the WOFF. And last is the SVG because some browsers might be able to understand this but it is not the best option, it is last for those browsers who can't handle anything better.

    So you see, for any of this to work, those font files need to be hosted online in order for the visitor's browsers to be able to DL them. In this example they need to be in the same directory as the HTML file. If I put them in a subdirectory called "assets" then every url would need to be changed to "assets/filename.ext". In short those urls must point to the respective font file somewhere online.

    Your best option then may be to host those fonts on a different server somewhere and then make the urls reflect that (ie url('http://www.freehost.com/myfreeaccount/Sansation_Regular.otf') format('opentype');

    Those files don't need to be hosted on ebay, they can be hosted on just about any free host that supports hotlinking (stashbox.org seems a decent option for free file hosting, you don't even need an account) just make sure the src urls point to the right location on the web.

    The trouble here is that Firefox doesn't like fonts that are hosted on a different domain than the website, you can tweak the server to allow Firefox to use fonts on different domains but that isn't an option on ebay. If Firefox isn't of to much concern to you then you can just go this route.


    Now lets take a look at the same @font-face rule as above but with base64 encoded Data URIs (The Font Squirrel Generator can produce such a CSS file automatically and then you can just copy and paste the code).

    Code:
    @font-face {
    	font-family: 'Sansation Regular';
    	src: url('Sansation_Regular.eot');
    	src: local('Sansation Regular'), local('Sansation'),
    	url(data:font/woff;charset=utf-8;base64,AAEAAAASAQAABAAg
    	RkZUTUHnwEUAAKHs+96AQwV+bALwACzCgsMDS4uLi4BswoLD
    	A0uLi4usEAaAQAwMRMVIQEVITUhATUBFQU1kQMG/OYEEP0bA
    	vn+xv5wBZb/Dbm5gPK5gGd0pbSAAAAAgBkAAADogX/AAkADQ
    	B0ALIGAQArsQMEAAAAADHJBer...) format('woff');
    }
    Note: this @font-face rule is incomplete and only includes one non-functional Data URI for the OTF version just as an example of how the Data URI works. Don't try to use this code as is, it won't work. This is only an example.

    You can see the ... that I stuck in there. Really that code shouldn't end there it should go on and on for quite a long ways because it is actually the entire font file encoded as base64. I cut it short and added the ... because if I hadn't then this post would have been way too big.

    It should be apparent then that using this method will not require the font files to be hosted separately (because they are encoded into the actual HTML). But IE won't like this. That is why here Font Squirrel has still defined the .eot file for IE as an external DL first.

    So I guess the solution for you would be to host the EOT files on a free host other than ebay, and point the src url for IE at that .eot file (IE won't mind that the font file is hosted on another domain).

    Then embed the other font files in the HTML using the base64 method above. Just copy and paste the base64 code from the Base64-stylesheet.CSS that Font Squirrel can generate.


    To summarize:
    1) IE gets an .eot file (hosted somewhere other than ebay and just hotlinked to).
    2) Other browsers get Data URIs (font file encoded as base64 and embedded in your HTML).

    Oh, and you sounded a little confused about external stylesheets. You don't really need one. You can just copy the CSS code that is in the stylesheets provided by Font Squirrel and paste it into the same place as I put the example @font-face rule in your HTML code in my last post.

    ______________________________________________________________
    Now I am really hoping someone else will pop in here and enumerate all the reasons why using @font-face is a bad idea.. I am using it for a personal project I am working on, but I am not using @font-face for any professional projects because there really are still too many obstacles to achieving consistent results with it.

    At the very least do make sure that there is a regular common font style at the bottom of your font stack and make sure the page looks OK when using that regular font as a fallback. Better yet just don't use @font-face and instead use a common IR (image replacement) technique. I say this not to discourage the use of @font-face, but rather because I know from experience that to get reasonably good results with @font-face you kind of need to grasp how it works. It seems to me like you are struggling to get your head around @font-face - that combined with the limitations of ebay are a great recipe for premature baldness (from tearing your own hair out ).
    Last edited by linehand; 01-11-2010 at 02:45 PM.

  • #14
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    See my last post above this as well please.

    To answer your other questions:
    The best way to deal with bold, italic, etc.. when using @font-face is to make a new separate @font-face rule using the bold version of the font, then another using the italic version, and another for the bold-italic (but don't do these unless you really need them). If all your headlines are bold then you can just make one rule using the bold version of the font. Defining bold to use a separate font-family just to get the bold effect has some real short comings when it comes to dynamic sites, but it should be alright for your purposes.

    Note that there are weight and style arguments that can be added to the @font-face rule to define which files to use for bold, etc. within the same font-family. But leave it to IE to rain on our parade, alas IE can't handle these weight and style arguments so we are left with the option of defining whole new font-families just to get bold (as outlined above).

    As for the shadow effect you had linked to before, I imagine that will mostly get worked into the styles 11 & 13 that you have. I think it is all just regular CSS so it is pretty flexible, you could set it up any number of ways but for what you have so far I would expect it to get worked into your existing style rules for your headlines (ie styles 11 & 13).
    Last edited by linehand; 01-11-2010 at 02:56 PM.

  • #15
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I guess my technical wording isn't correct yet, because of my lack of long term experience. But when I said open, I can see I should have said view. I thought that since I have both fonts on my computer that when I viewed the @font-face demo.html in the browser I would see the font displayed as it should look, since they're on my comp, instead I see what looks like Arial.
    I can put the font files on the server in the same location as the html doc, especially since firefox is a major concern for me.
    Do I still need to use the base64 encoded data, (I looked at it in dreamweaver when I originally downloaded the zip file from font squirrel, I just wasn't sure what it was for), since I am able to upload the font files to the server where I have the html file & can link to the html file before uploading to ebay, or is better for me to just to stick with the base64? Thank you for explaining it, so I have a better understanding.
    I can see that the last line before the blue colored text that you typed... url(data:font/woff;charset=utf-8;base64, is different than what I see when I open it up in dreamweaver.... I have in the base64 CSS file url(data:font/truetype; as the last line before the blue text. After the blue text I have this.... format('truetype'), url('PAPYRUS.woff') format('woff'), url('PAPYRUS.svg#Papyrus-Regular') format('svg'); so I have the format('truetype') coming last before the blue text & first after the blue text, is this correct or is what you typed correct?
    The class I took was very fast, & of course teachers don't have time for individual questions. So I am unsure of exactly what & where to place the code for the bold. Could you show me what the code is & where to place it for papyrus, as all of it is bold. The other font that I am using is "Font in a Red Suit", there is only 2-3 lines of text for it, but it comes before the papyrus font in the document, so does that mean that the code for that font needs to come before the code for papyrus in the base 64 CSS doc that gets pasted into the html doc? As you stated in your previous post, I don't need to use @font-face if I can push the text off the screen & hide it, & use an image in its place. This sounds easier to me, but since I have never heard of being able to do this before & it was not taught to me in class, (I don't suppose it would have been something that was taught in a beginner class) then I would have no clue on how to do it. I really don't want to create something that is more difficult than need be. The less documents, & files I use the better & easier it is for me. So if you think that pushing the text off the screen is a better option over @font-face, I am more than willing to try to understand it & do it, if you don't mind showing me how. I'm sorry this was long, I tried to keep it as short as possible!
    Stacey
    Last edited by Stacey.S; 01-12-2010 at 04:24 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •