[Seaside] Adding @font-face to a CSS style sheet in Seaside

[Lawrence Kellogg]

On Jan 8, 2012, at 1:49 PM, Francois Stephany wrote:

> > @font-face {
> > 	font-family: Chunkfive;
> > 	src: url(''/files/UserFileLibrary/Chunkfive.otf'');
> > }
> 
> The url must be accessible from your web browser. Do you get the font when typing http://localhost:<PORT>/files/UserFileLibrary/Chunkfive.otf ?

  Yes, the font downloads itself when I type that line into Safari, so I think I have access. If I double click on the .otf file it shows me a
sample of the font and has a button that says "Install Font".

> 
> I've never used FileLibrary, I always directly serve my assets from the webserver so I dont really know the urls that are generated.
> 
> It seems that you wrote two simple quote in your url() argument. You want to use double quote " or one simple quote '.
> 

  Aha, that appears to be the problem. I put two single quotes around it because the style sheet is already enclosed by single quotes, because it 
is returned from a method in the UserFileLibrary but changing the single quotes to a double quote seemed to make everything work!! Thanks a lot!

  Now, I guess I have to put this line: 

	font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;

in each section of the CSS style sheet in order to use the font. Is that correct? Is there a way to make i global? 

I'm on my way…

  Regards, 

  Larry

> 
> 
> On 08/01/12 10:03, Lawrence Kellogg wrote:
>> Hello Francois,
>>   Thanks for the response.
>> 
>> On Jan 8, 2012, at 12:42 PM, Francois Stephany wrote:
>> 
>>> Hi Larry,
>>> 
>>> There's nothing to do in the Seaside side, everything happens in the CSS file. The only thing that you need to figure out is the url of the font. In your example it is 'Chunkfive.otf'. You can serialize this file with FileLibrary if you want…
>>> 
>> 
>>   I'm still hopelessly confused. So, if I do a urlOf: the selector of the font file that I stored in my UserFileLibrary do I put it in the CSS string like this:
>> 
>> @font-face {
>> 	font-family: Chunkfive;
>> 	src: url(''/files/UserFileLibrary/Chunkfive.otf'');
>> }
>> 
>> #body {
>> font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;
>> }
>> 
>> #container
>> {
>> 	margin: 0 auto;
>> 	width: 1000px;
>> 	background: #fff;
>> }
>> 
>> ???
>> 
>> None of my fonts change when I do this and I can't tell if it has any effect. The CSS style sheet is just a string, isn't it?
>> Is it a real object in Seaside? Should it be #font-face? It doesn't seem to make a difference.
>> 
>>   I know a lot more about Smalltalk than I do about this CSS stuff. ;-)
>> 
>>   Regards,
>> 
>>   Larry
>> 
>>> I don't know if this helps ?
>>> 
>>> On 08/01/12 07:37, Lawrence Kellogg wrote:
>>>> Hello,
>>>>   I'm trying to use the @font-face command like this one:
>>>> 
>>>> @font-face {
>>>> 	font-family: Chunkfive;
>>>> 	src: url('Chunkfive.otf);
>>>> }
>>>> 
>>>> from here:
>>>> 
>>>> http://sixrevisions.com/css/font-face-guide/
>>>> 
>>>> but I don't understand how to add this to my existing stylesheet.
>>>> Do I use some attributes from the updateRoot: method?
>>>> 
>>>> I have an existing stylesheet stored in a FileLibrary and I specify it in
>>>> my updateRoot: method:
>>>> 
>>>> anHtmlRoot stylesheet url: UserFileLibrary / #myStyleCss
>>>> 
>>>> How do I generate the call to font-face to use the custom font that
>>>> I have stored in a file library?
>>>> 
>>>>   Thanks,
>>>> 
>>>>   Larry
>>>> 
>>>> 
>>>> _______________________________________________
>>>> seaside mailing list
>>>> seaside at lists.squeakfoundation.org
>>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>> 
>>> --
>>> http://tulipemoutarde.be
>>> BE: +32 (0)65 709 131
>>> CA: +1 778 558 3225
>>> _______________________________________________
>>> seaside mailing list
>>> seaside at lists.squeakfoundation.org
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>> 
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
> 
> -- 
> http://tulipemoutarde.be
> BE: +32 (0)65 709 131
> CA: +1 778 558 3225
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside