Smalltalk › Frameworks & Tools › Seaside › Seaside General

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

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

Larry Kellogg

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

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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

fstephany

Re: Adding @font-face to a CSS style sheet in Seaside

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 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
> [hidden email]
> 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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Larry Kellogg

Re: Adding @font-face to a CSS style sheet in Seaside

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
>> [hidden email]
>> 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
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

fstephany

Re: Adding @font-face to a CSS style sheet in Seaside

> @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 ?

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 '.

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
>>> [hidden email]
>>> 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
>> [hidden email]
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Larry Kellogg

Re: Adding @font-face to a CSS style sheet in Seaside

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
>>>> [hidden email]
>>>> 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
>>> [hidden email]
>>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>>
>> _______________________________________________
>> seaside mailing list
>> [hidden email]
>> 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
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Paul DeBruicker

Re: Adding @font-face to a CSS style sheet in Seaside

On 12-01-08 11:30 AM, Lawrence Kellogg wrote:
> 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?

You can just set it on the "body" element and it'll be inherited
everywhere.
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside