Embedding Fonts - I'm having Difficulites

Bozana · 07-16-2013, 07:13 AM

I'm having some difficulties. I haven't touched Sigil for embedding fonts for a long while and I sorta forgotten how. I have a stack of fonts added to the files in Sigil and saved them in the file:

Bookman Old Style Bold Italic.ttf
Bookman Old Style Bold.ttf
Bookman Old Style Italic.ttf
Bookman Old Style.ttf
Times New Roman Bold Italic.ttf
Times New Roman Bold.ttf
Times New Roman Italic.ttf
Times New Roman.ttf

And I've declared them in the page_styles.css:

@font-face {
font-family: 'Bookman Old Style';
src: url(../Fonts/Bookman Old Style.ttf);
}
@font-face {
src: url(../Fonts/Bookman Old Style Bold.ttf);
font-family: "Bookman Old Style Bold";
font-weight: bold;
}
@font-face {
src: url(../Fonts/Bookman Old Style Italic.ttf);
font-family: "Bookman Old Style Italic";
font-style: italic;
}
@font-face {
src: url(../Fonts/Bookman Old Style Bold Italic.ttf);
font-family: "Bookman Old Style Bold Italic";
font-weight: bold;
font-style: italic;
}
@font-face {
src: url(../Fonts/Times New Roman.ttf);
font-family: "Times New Roman"
}
@font-face {
src: url(../Fonts/Times New Roman Bold.ttf);
font-family: "Times New Roman Bold";
font-weight: bold;
}
@font-face {
src: url(../Fonts/Times New Roman Italic.ttf);
font-family: "Times New Roman Italic";
font-style: italic;
}
@font-face {
src: url(../Fonts/Times New Roman Bold Italic.ttf);
font-family: "Times New Roman Bold Italic";
font-weight: bold;
font-style: italic;
}

And in the stylesheet.css:

.BodyText { // Body of the book
font-family: "Times New Roman", "serif";
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
position: relative;
text-decoration: none;
text-line-through: none;
top: 0
}
span.DrioCapIta { //Drop Caps for first letter of a paragraph but with italic
font-family: "Bookman Old Style Bold Italic", "serif";
font-style: italic;
font-weight: bold;
float: left;
font-size: 3em;
line-height: 0.8em;
margin-right: 3pt;
margin-bottom: -0.1em;
}
span.DropCap { //Drop Caps for first letter of a paragraph
font-family: "Bookman Old Style Bold", "serif";
font-weight: bold;
float: left;
font-size: 34pt;
line-height: 0.8em;
margin-right: 2pt;
margin-bottom: -0.1em;
}
.Heading118pt { // 1 Smaller Heading
font-family: "Bookman Old Style Bold", "serif";
font-size: 1.41667em;
font-weight: bold;
letter-spacing: -1pt;
line-height: 1.2;
margin-bottom: 12pt;
margin-left: 0;
margin-right: 0;
margin-top: 50pt;
text-align: center
}
h1.h1 { // Nearly all Chapter Headings
font-family: "Bookman Old Style Bold", "serif";
font-size: 2em;
font-weight: bold;
font-style: normal;
font-variant: normal;
margin-bottom: 12pt;
margin-left: 0;
margin-right: 0;
margin-top: 50pt;
text-decoration: none;
text-align: center;
}

I'm wondering where I've gone wrong? Anyone could kindly help me with this please?

I can attached the epub I'm working on, if needed.

Jellby · 07-16-2013, 08:21 AM

And what is your problem?

Anyway, maybe you should quote the filenames, or use filenames without spaces. And you should use the same font-family name for fonts belonging to the same family (different font-style and/or font-weight, and different src, of course).

RbnJrg · 07-16-2013, 12:28 PM

Quote:

Originally Posted by Bozana

I'm having some difficulties. I haven't touched Sigil for embedding fonts for a long while and I sorta forgotten how. I have a stack of fonts added to the files in Sigil and saved them in the file:

Bookman Old Style Bold Italic.ttf
Bookman Old Style Bold.ttf
Bookman Old Style Italic.ttf
Bookman Old Style.ttf
Times New Roman Bold Italic.ttf
Times New Roman Bold.ttf
Times New Roman Italic.ttf
Times New Roman.ttf

And I've declared them in the page_styles.css:

@font-face {
font-family: 'Bookman Old Style';
src: url(../Fonts/Bookman Old Style.ttf);
}
@font-face {
src: url(../Fonts/Bookman Old Style Bold.ttf);
font-family: "Bookman Old Style Bold";
font-weight: bold;
}
@font-face {
src: url(../Fonts/Bookman Old Style Italic.ttf);
font-family: "Bookman Old Style Italic";
font-style: italic;
}
@font-face {
src: url(../Fonts/Bookman Old Style Bold Italic.ttf);
font-family: "Bookman Old Style Bold Italic";
font-weight: bold;
font-style: italic;
}
@font-face {
src: url(../Fonts/Times New Roman.ttf);
font-family: "Times New Roman"
}
@font-face {
src: url(../Fonts/Times New Roman Bold.ttf);
font-family: "Times New Roman Bold";
font-weight: bold;
}
@font-face {
src: url(../Fonts/Times New Roman Italic.ttf);
font-family: "Times New Roman Italic";
font-style: italic;
}
@font-face {
src: url(../Fonts/Times New Roman Bold Italic.ttf);
font-family: "Times New Roman Bold Italic";
font-weight: bold;
font-style: italic;
}

And in the stylesheet.css:

.BodyText { // Body of the book
font-family: "Times New Roman", "serif";
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
position: relative;
text-decoration: none;
text-line-through: none;
top: 0
}
span.DrioCapIta { //Drop Caps for first letter of a paragraph but with italic
font-family: "Bookman Old Style Bold Italic", "serif";
font-style: italic;
font-weight: bold;
float: left;
font-size: 3em;
line-height: 0.8em;
margin-right: 3pt;
margin-bottom: -0.1em;
}
span.DropCap { //Drop Caps for first letter of a paragraph
font-family: "Bookman Old Style Bold", "serif";
font-weight: bold;
float: left;
font-size: 34pt;
line-height: 0.8em;
margin-right: 2pt;
margin-bottom: -0.1em;
}
.Heading118pt { // 1 Smaller Heading
font-family: "Bookman Old Style Bold", "serif";
font-size: 1.41667em;
font-weight: bold;
letter-spacing: -1pt;
line-height: 1.2;
margin-bottom: 12pt;
margin-left: 0;
margin-right: 0;
margin-top: 50pt;
text-align: center
}
h1.h1 { // Nearly all Chapter Headings
font-family: "Bookman Old Style Bold", "serif";
font-size: 2em;
font-weight: bold;
font-style: normal;
font-variant: normal;
margin-bottom: 12pt;
margin-left: 0;
margin-right: 0;
margin-top: 50pt;
text-decoration: none;
text-align: center;
}

I'm wondering where I've gone wrong? Anyone could kindly help me with this please?

I can attached the epub I'm working on, if needed.

Try the following declarations:

Code:

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

@font-face {
    font-family: "Bookman Old Style";
    font-style: normal;
    font-weight: bold;
    src: url("../Fonts/Bookman Old Style Bold.ttf");
}

@font-face {
    font-family: "Bookman Old Style";
    font-weight: normal;
    font-style: italic;
    src: url("../Fonts/Bookman Old Style Italic.ttf");
}

@font-face {
    font-family: "Bookman Old Style";
    font-weight: bold;
    font-style: italic;
    src: url("../Fonts/Bookman Old Style Bold Italic.ttf");
}

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

@font-face {
    font-family: "Times New Roman";
    font-style: normal;
    font-weight: bold;
    src: url("../Fonts/Times New Roman Bold.ttf");
}

@font-face {
    font-family: "Times New Roman";
    font-style: italic;
    font-weight: normal;
    src: url("../Fonts/Times New Roman Italic.ttf");
}

@font-face {
    font-family: "Times New Roman";
    font-weight: bold;
    font-style: italic;
    src: url("../Fonts/Times New Roman Bold Italic.ttf");
}

Put all those declarations in your stylesheet.css and NOT in page_styles.css. Also, in the stylesheet.css write:

Code:

.BodyText { 
    font-family: "Times New Roman", serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    letter-spacing: 0;
    position: relative;
    text-decoration: none;
    text-line-through: none;
    top: 0
}

span.DrioCapIta {
    font-family: "Bookman Old Style", serif;
    font-style: italic;
    font-weight: bold;
    float: left;
    font-size: 3em;
    line-height: 0.8em;
    margin-right: 3pt;     
    margin-bottom: -0.1em;
}

span.DropCap {
    font-family: "Bookman Old Style", serif;
    font-weight: bold;
    font-style: normal;
    float: left;
    font-size: 34pt;
    line-height: 0.8em;
    margin-right: 2pt;     
    margin-bottom: -0.1em;
}

.Heading118pt {
    font-family: "Bookman Old Style", serif;
    font-size: 1.41667em;
    font-weight: bold;
    font-style: normal;
    letter-spacing: -1pt;
    line-height: 1.2;
    margin-bottom: 12pt;
    margin-left: 0;
    margin-right: 0;
    margin-top: 50pt;
    text-align: center
}

h1.h1 {
    font-family: "Bookman Old Style", serif;
    font-size: 2em;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    margin-bottom: 12pt;
    margin-left: 0;
    margin-right: 0;
    margin-top: 50pt;
    text-decoration: none;
    text-align: center;
}

Try that code that should work. Remember, all declarations in your stylesheet.css file.

Regards
Rubén

Turtle91 · 07-17-2013, 04:54 AM

Just a quick question:

Why are you giving h1 a class of "h1"??
h1.h1 {...}
<h1 class="h1">

why not just style h1:
h1 {...}
<h1>

Bozana · 07-24-2013, 12:40 AM

I thank for you all for your help! xoxoxo

RbnJrg · 07-24-2013, 11:55 AM

Quote:

Originally Posted by Bozana

I thank for you all for your help! xoxoxo

You are welcome

DiapDealer · 07-24-2013, 01:24 PM

I'd probably recommend never ever using spaces in URLs, but that's just me.

yucca · 07-25-2013, 03:17 AM

You are not specifying what difficulties you are having, but I presume you mean the fonts just won’t appear at all. There is a number of possible reasons. I would recommend starting from the simplest possible test, with just one typeface and nothing fancy, and using a filename that does not have spaces – naked spaces are not allowed at all in URLs by URL specifications, and the url(...) specifier uses the filename in a URL.

Note that Bookman Old Style and Times New Roman are not free fonts. You would need the copyright owners’ permission to include them.

07-16-2013, 07:13 AM	#1
Bozana Bozana Posts: 25 Karma: 32224 Join Date: Jan 2013 Device: PC	Embedding Fonts - I'm having Difficulites I'm having some difficulties. I haven't touched Sigil for embedding fonts for a long while and I sorta forgotten how. I have a stack of fonts added to the files in Sigil and saved them in the file: Bookman Old Style Bold Italic.ttf Bookman Old Style Bold.ttf Bookman Old Style Italic.ttf Bookman Old Style.ttf Times New Roman Bold Italic.ttf Times New Roman Bold.ttf Times New Roman Italic.ttf Times New Roman.ttf And I've declared them in the page_styles.css: @font-face { font-family: 'Bookman Old Style'; src: url(../Fonts/Bookman Old Style.ttf); } @font-face { src: url(../Fonts/Bookman Old Style Bold.ttf); font-family: "Bookman Old Style Bold"; font-weight: bold; } @font-face { src: url(../Fonts/Bookman Old Style Italic.ttf); font-family: "Bookman Old Style Italic"; font-style: italic; } @font-face { src: url(../Fonts/Bookman Old Style Bold Italic.ttf); font-family: "Bookman Old Style Bold Italic"; font-weight: bold; font-style: italic; } @font-face { src: url(../Fonts/Times New Roman.ttf); font-family: "Times New Roman" } @font-face { src: url(../Fonts/Times New Roman Bold.ttf); font-family: "Times New Roman Bold"; font-weight: bold; } @font-face { src: url(../Fonts/Times New Roman Italic.ttf); font-family: "Times New Roman Italic"; font-style: italic; } @font-face { src: url(../Fonts/Times New Roman Bold Italic.ttf); font-family: "Times New Roman Bold Italic"; font-weight: bold; font-style: italic; } And in the stylesheet.css: .BodyText { // Body of the book font-family: "Times New Roman", "serif"; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: 0; position: relative; text-decoration: none; text-line-through: none; top: 0 } span.DrioCapIta { //Drop Caps for first letter of a paragraph but with italic font-family: "Bookman Old Style Bold Italic", "serif"; font-style: italic; font-weight: bold; float: left; font-size: 3em; line-height: 0.8em; margin-right: 3pt; margin-bottom: -0.1em; } span.DropCap { //Drop Caps for first letter of a paragraph font-family: "Bookman Old Style Bold", "serif"; font-weight: bold; float: left; font-size: 34pt; line-height: 0.8em; margin-right: 2pt; margin-bottom: -0.1em; } .Heading118pt { // 1 Smaller Heading font-family: "Bookman Old Style Bold", "serif"; font-size: 1.41667em; font-weight: bold; letter-spacing: -1pt; line-height: 1.2; margin-bottom: 12pt; margin-left: 0; margin-right: 0; margin-top: 50pt; text-align: center } h1.h1 { // Nearly all Chapter Headings font-family: "Bookman Old Style Bold", "serif"; font-size: 2em; font-weight: bold; font-style: normal; font-variant: normal; margin-bottom: 12pt; margin-left: 0; margin-right: 0; margin-top: 50pt; text-decoration: none; text-align: center; } I'm wondering where I've gone wrong? Anyone could kindly help me with this please? I can attached the epub I'm working on, if needed.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
What does embedding fonts in pdf do?	rplantz	PDF	6	08-28-2012 12:52 PM
Fonts embedding	1drey	Writer2ePub	3	06-17-2011 11:15 PM
Embedding fonts	JaneFancher	Calibre	14	04-10-2010 09:28 PM
Embedding fonts	AprilHare	ePub	6	01-02-2010 11:42 AM
Embedding fonts	jash	Calibre	2	09-09-2008 05:05 PM

07-16-2013, 08:21 AM	#2
Jellby frumious Bandersnatch Posts: 7,543 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	And what is your problem? Anyway, maybe you should quote the filenames, or use filenames without spaces. And you should use the same font-family name for fonts belonging to the same family (different font-style and/or font-weight, and different src, of course).

07-17-2013, 04:54 AM	#4
Turtle91 A Hairy Wizard Posts: 3,312 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Just a quick question: Why are you giving h1 a class of "h1"?? h1.h1 {...} <h1 class="h1"> why not just style h1: h1 {...} <h1>

07-24-2013, 12:40 AM	#5
Bozana Bozana Posts: 25 Karma: 32224 Join Date: Jan 2013 Device: PC	I thank for you all for your help! xoxoxo

07-24-2013, 01:24 PM	#7
DiapDealer Grand Sorcerer Posts: 28,358 Karma: 203720150 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	I'd probably recommend never ever using spaces in URLs, but that's just me.

07-25-2013, 03:17 AM	#8
yucca Member Posts: 15 Karma: 10 Join Date: Apr 2013 Location: Finland Device: Bookeen Cybook Muse Frontlight	You are not specifying what difficulties you are having, but I presume you mean the fonts just won’t appear at all. There is a number of possible reasons. I would recommend starting from the simplest possible test, with just one typeface and nothing fancy, and using a filename that does not have spaces – naked spaces are not allowed at all in URLs by URL specifications, and the url(...) specifier uses the filename in a URL. Note that Bookman Old Style and Times New Roman are not free fonts. You would need the copyright owners’ permission to include them.