Embedded font problem

[Moonraker]

Why does my WC3 validation for stylesheet give me the following errors?:

5 Property src doesn't exist : url('../Fonts/alkaios-regular.ttf')
13 .alkaios Property src doesn't exist : url('../Fonts/alkaios-regular.ttf')

but the font displays correctly in Desktop Adobe Digital Editions.

I want to use this font for some Romanian characters.

The code in my css sheet is:

@font-face {
font-family: "alkaios";
font-weight: normal;
font-style: normal;
src: url('../Fonts/alkaios-regular.ttf');
}

.alkaios {
font-family: "alkaios";
font-weight: normal;
font-style: normal;
src: url('../Fonts/alkaios-regular.ttf');
}

The @fontface declaration is the first in the CSS stylesheet.

I have been hours trying to figure this out.

[Turtle91]

Try removing src:... From the .alkaios {} definition.....I don't think it is needed/allowed there.

Also try double quotes around the URL in the font face: url("....") that shouldn't matter but is something to try.

[Moonraker]

Try removing src:... From the .alkaios {} definition.....I don't think it is needed/allowed there.

Also try double quotes around the URL in the font face: url("....") that shouldn't matter but is something to try.

After removing the url as you said I just get one error:

Property src doesn't exist : url("../Fonts/alkaios-regular.ttf")

Single or double quotes makes no difference but the font is still displaying correctly in ADE.

I'm stumped!

[theducks]

This was copied from a working @font

src:url(../Fonts/CharisSILR.ttf)

Note: No quotes

[Moonraker]

This was copied from a working @font
Code:

src:url(../Fonts/CharisSILR.ttf)

Note: No quotes

Actually, I put the file through Calibre who moved the following to the page_style.css sheet:

@font-face {
font-family: "alkaios";
font-weight: normal;
font-style: normal;
src: url(../Fonts/alkaios-regular.ttf)
}

Note -- no quotes but I still get the same error from WC3

Property src doesn't exist : url(../Fonts/alkaios-regular.ttf)

I've given up now because the ePub is displaying correctly.

Although, I would be interested to know why it is erroring if anybody knows.

[JSWolf]

My working embedded font code has no quotes of any kind in the source line.

[JSWolf]

Originally Posted by Moonraker

Actually, I put the file through Calibre who moved the following to the page_style.css sheet:

@font-face {
font-family: "alkaios";
font-weight: normal;
font-style: normal;
src: url(../Fonts/alkaios-regular.ttf)
}

Note -- no quotes but I still get the same error from WC3

Property src doesn't exist : url(../Fonts/alkaios-regular.ttf)

I've given up now because the ePub is displaying correctly.

Although, I would be interested to know why it is erroring if anybody knows.

I know what the problem is. If you are using Sigil to submit the CSS for validation, then it will fail because Sigil is using CSS version 2 validation instead of version 3 validation. Version 3 validation will validate @font. Version 2 will not.

Also, the CSS code you last posted is correct. It's the validation that's getting it wrong.

[RbnJrg]

Originally Posted by Moonraker

Why does my WC3 validation for stylesheet give me the following errors?:

5 Property src doesn't exist : url('../Fonts/alkaios-regular.ttf')
13 .alkaios Property src doesn't exist : url('../Fonts/alkaios-regular.ttf')

but the font displays correctly in Desktop Adobe Digital Editions.

I want to use this font for some Romanian characters.

The code in my css sheet is:

@font-face {
font-family: "alkaios";
font-weight: normal;
font-style: normal;
src: url('../Fonts/alkaios-regular.ttf');
}

.alkaios {
font-family: "alkaios";
font-weight: normal;
font-style: normal;
src: url('../Fonts/alkaios-regular.ttf');
}

The @fontface declaration is the first in the CSS stylesheet.

I have been hours trying to figure this out.

I think the error message is due to a bad definition of the class .alkaios. Try with this definition:

.alkaios {
font-family: "alkaios";
font-weight: normal;
font-style: normal;
}

You don't have to include (in that class) "src: url('../Fonts/alkaios-regular.ttf');". That is because "src" is not a valid property for a class (is a valid property for a @font definition).

[JSWolf]

Originally Posted by RbnJrg

I think the error message is due to a bad definition of the class .alkaios. Try with this definition:

.alkaios {
font-family: "alkaios";
font-weight: normal;
font-style: normal;
}

You don't have to include (in that class) "src: url('../Fonts/alkaios-regular.ttf');". That is because "src" is not a valid property for a class (is a valid property for a @font definition).

What you are suggesting is incorrect.

@font-face {
font-family: alkaios;
font-style: normal;
font-weight: normal;
src: url(../Fonts/alkaios-regular.ttf);
}

That is correct and if you had read my message, you would notice that it is Sigil's fault for using the wrong CSS validation version.

[Moonraker]

I know what the problem is. If you are using Sigil to submit the CSS for validation, then it will fail because Sigil is using CSS version 2 validation instead of version 3 validation. Version 3 validation will validate @font. Version 2 will not.

Also, the CSS code you last posted is correct. It's the validation that's getting it wrong.

Yes, I did validate from within Sigil.

Thank you J.S. Wolf. I didn't know what version of CSS validation Sigil used.

[JSWolf]

Originally Posted by Moonraker

Yes, I did validate from within Sigil.

Thank you J.S. Wolf. I didn't know what version of CSS validation Sigil used.

Happy to help.

[RbnJrg]

Originally Posted by JSWolf

What you are suggesting is incorrect.

@font-face {
font-family: alkaios;
font-style: normal;
font-weight: normal;
src: url(../Fonts/alkaios-regular.ttf);
}

That is correct and if you had read my message, you would notice that it is Sigil's fault for using the wrong CSS validation version.

JSWolf, I'm afraid that you didn't read what I wrote. I said that the CLASS .alkaios was bad defined, not the @font-face definition. The @font definition was CORRECT, but the class .alkaios doesn't have to include the statement src: url(../Fonts/alkaios-regular.ttf); Please, read again my first post; please, read also this page:

http://web.sigil.googlecode.com/git/...bed_fonts.html

And you'll realize that what I said was correct. The issue is not in your @font-face declarations but in the way you are wanting to apply those fonts.

[theducks]

Originally Posted by RbnJrg

And you'll realize that what I said was correct. The issue is not in your @font-face declarations but in way you are wanting to apply those fonts.

You are correct, SRC only belongs in the @font.

font-family: alkaios ; is all that should be in any selector where it is used

[st_albert]

Originally Posted by theducks

You are correct, SRC only belongs in the @font.

font-family: alkaios ; is all that should be in any selector where it is used

Actually, you're all correct. Sort of. Sigil is also correct using CSS 2.1 for validation, because that's the closest CSS level to what the epub 2 standard requires. (actually I think epub 2 specifies CSS 2.1 explicitly. Correct me if I'm wrong.)

However, even though CSS 2.1 will complain about font declarations, they still work in epub. CSS 3 will correctly validate font declarations, but it will also validate some constructions that are not allowed in epub 2. So if Sigil were to validate against CSS 3 (as one of the recent betas did), a situation could arise where your epub stylesheet validated "correctly", yet reader software choked on it.

This debate has gone round and round in other threads in this forum, and the decision was made to validate against CSS 2.1 as being cannonically correct. So, ignore errors related to font declarations. Or manually check against CSS 3.0 yourself. (easily done: Copy the stylesheet and paste it into a browser window at the W3C CSS validation site.)