Adding Fonts to an xhtml page

ralphiedee · 05-31-2012, 06:58 PM

Found Sigil a nice piece of software, now to get a bit busier as I need to add two separate fonts to an epub file or Sigil xhtml pages.

I know the declaration is

@font-face {
font-family: "name";
src: url(fonts/name.ttf);
}

I know to make sure I have the fonts loaded in the folder. But if I have all the chapter titles baskerville and the paragraph font century gothic for all the pages do I simply add two declarations with the different font names in EACH xhtml page?

To make it a bit easier how would the following code look like with

Hello ( font is baskerville)

goodbye (font is century gothic)

Below is what I have now I guess the sgc1 sgc2 is the default font in Sigil?

So the new font would have its own <div class>?

<body>
<div>
<div class="sgc-1 sgc-2">
Hello
</div>

<div>
<div class="sgc-2">
Goodbye
</div>

theducks · 05-31-2012, 07:10 PM

Quote:

Originally Posted by ralphiedee

Found Sigil a nice piece of software, now to get a bit busier as I need to add two separate fonts to an epub file or Sigil xhtml pages.

I know the declaration is

@font-face {
font-family: "name";
src: url(../Fonts/name.ttf);
}

I know to make sure I have the fonts loaded in the folder. But if I have all the chapter titles baskerville and the paragraph font century gothic for all the pages do I simply add two declarations with the different font names in EACH xhtml page?

To make it a bit easier how would the following code look like with

Hello ( font is baskerville)

goodbye (font is century gothic)

Below is what I have now I guess the sgc1 sgc2 is the default font in Sigil?

So the new font would have its own <div class>?

<body>
<div>
<div class="sgc-1 sgc-2">
Hello
</div>

<div>
<div class="sgc-2">
Goodbye
</div>

1)The path is relative, thus the ../
2)the path is case sensitive: the fonts folder is Fonts

DiapDealer · 05-31-2012, 08:01 PM

Quote:

do I simply add two declarations with the different font names in EACH xhtml page?

So the new font would have its own <div class>?

It doesn't have to be a div tag. You could assign it to the <body> element if all the basic text should use a particular font. Or you could just assign it to all heading tags (if you want the headings to stand out from the rest of the text). Or you can assign it to a specific span class. The sky is the limit really.

But whatever you do... do it in one place: the external CSS stylesheet that all your xhtml files share. Not in each individual xhtml file. That would exponentially increase your work should you ever need to make (otherwise) simple changes.

mrmikel · 06-01-2012, 07:25 AM

Make sure these are embeddable fonts, as these particular names are used by proprietary type companies.

ralphiedee · 06-01-2012, 08:15 AM

Excellent but if I use an external css style sheet do I:

put it in the styles folder?

add the css to the head of each .xhtml page in the project?

??

RD

DiapDealer · 06-01-2012, 08:54 AM

Yes... and yes.

The stylesheet goes in the Styles folder. And you link each xhtml file (that you want to use it) to that stylesheet with:

Code:

<link href="../Styles/stylesheet-name.css" rel="stylesheet" type="text/css" />

in the head section.

If you have a lot of xhtml files, it's fairly painless to pop the <link /> tag in with Sigil's Find and Replace utility. If you don't have any stylesheets already, just find </head> and replace it with:

Code:

<link href="../Styles/stylesheet-name.css" rel="stylesheet" type="text/css" /></head>

"All HTML Files" or "Selected HTML files"

ralphiedee · 06-01-2012, 09:57 AM

Nice!

thx

RD

05-31-2012, 06:58 PM	#1
ralphiedee Zealot Posts: 125 Karma: 1370 Join Date: Mar 2012 Device: none	Adding Fonts to an xhtml page Found Sigil a nice piece of software, now to get a bit busier as I need to add two separate fonts to an epub file or Sigil xhtml pages. I know the declaration is @font-face { font-family: "name"; src: url(fonts/name.ttf); } I know to make sure I have the fonts loaded in the folder. But if I have all the chapter titles baskerville and the paragraph font century gothic for all the pages do I simply add two declarations with the different font names in EACH xhtml page? To make it a bit easier how would the following code look like with Hello ( font is baskerville) goodbye (font is century gothic) Below is what I have now I guess the sgc1 sgc2 is the default font in Sigil? So the new font would have its own <div class>? <body> <div> <div class="sgc-1 sgc-2"> Hello </div> <div> <div class="sgc-2"> Goodbye </div>

06-01-2012, 08:54 AM	#6
DiapDealer Grand Sorcerer Posts: 27,546 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Yes... and yes. The stylesheet goes in the Styles folder. And you link each xhtml file (that you want to use it) to that stylesheet with: Code: <link href="../Styles/stylesheet-name.css" rel="stylesheet" type="text/css" /> in the head section. If you have a lot of xhtml files, it's fairly painless to pop the <link /> tag in with Sigil's Find and Replace utility. If you don't have any stylesheets already, just find </head> and replace it with: Code: <link href="../Styles/stylesheet-name.css" rel="stylesheet" type="text/css" /></head> "All HTML Files" or "Selected HTML files"

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Adding fonts	marcostt	Sigil	5	05-29-2012 10:40 AM
PRS-T1 Adding two fonts into the CSS?	WarGhSt	Sony Reader	1	02-02-2012 01:41 AM
Adding fonts	bake	Onyx Boox	1	09-04-2011 12:49 PM
I don’t want a page break between different xhtml files	Sergi	ePub	3	09-16-2010 02:09 PM
Adding fonts	JohnCD	HanLin eBook	3	11-16-2008 05:32 PM

06-01-2012, 07:25 AM	#4
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	Make sure these are embeddable fonts, as these particular names are used by proprietary type companies.

06-01-2012, 08:15 AM	#5
ralphiedee Zealot Posts: 125 Karma: 1370 Join Date: Mar 2012 Device: none	Excellent but if I use an external css style sheet do I: put it in the styles folder? add the css to the head of each .xhtml page in the project? ?? RD

06-01-2012, 09:57 AM	#7
ralphiedee Zealot Posts: 125 Karma: 1370 Join Date: Mar 2012 Device: none	Nice! thx RD