How to display specific foreign font?

[KamSingh]

Hi Guys,

I'm trying to view a file with two languages, English and Gurmukhi.

I've managed to change the English part easy enough but the problem I'm having is that I seem unable to change the font being used for the Gurmukhi.

I have tried to edit the book and change the embedded font but it seems to default to the same font.

Is there a way I can easily choose the font for the Gurmukhi text.

Any help much appreciated.

Thanks,

Kam

[JSWolf]

You;ll have to post the code used in the CSS and HTML for the Gurmukhi font.

[theducks]

Embedding a font is more than just adding a Font file
That is step 1
Then you need the appropriate @fontface to link it to a font family
eg.

@font-face {
   font-family: "Bembo Std";
   src: url(../Fonts/BemboStd.otf);
   font-style: normal;
   font-weight: normal;
}

Then you need to have a style (stylesheet entry is best)

span.bembo{
   font-family: "Bembo Std";
    
}

last each word/phrase needs to be wrapped in a span

<span class="bembo">the words</span>

OH
and your reading devise MUST support some form of 'Use Publishers Styles'

[JSWolf]

Originally Posted by theducks

span.bembo{
   font-family: "Bembo Std";
    
}

last each word/phrase needs to be wrapped in a span

span class="bembo"<the words</span>

OH
and your reading devise MUST support some form of 'Use Publishers Styles'

On my Kobo, I don't need publisher font for a case like this when reading ePub.

Oh and here is some of your code fixed.

span.bembo {
   font-family: "Bembo Std";
}

<span class="bembo">the words</span>

[theducks]

@Jon
The code was snipped from a book that PASSED Calibres check

[JSWolf]

Originally Posted by theducks

@Jon
The code was snipped from a book that PASSED Calibres check

I know the first code I cleaned up was just for looks, but the span was incorrect. It should not have passed any validation.

[theducks]

Originally Posted by JSWolf

I know the first code I cleaned up was just for looks, but the span was incorrect. It should not have passed any validation.

OOPs My span got messed up in the works (that was a hand coded example)

[KamSingh]

<p class="calibre1">Page 1 </p>
<p class="calibre1 gurmukhi">ੴ ਸਿਤ ਨਾਮੁ ਕਰਤਾ ਪੁਰਖੁ ਿਨਰਭਉ ਿਨਰਵੈਰੁ ਅਕਾਲ ਮੂਰਿਤ ਅਜੂਨੀ ਸੈਭੰ ਗੁਰ ਪਰ੍ਸਾਿਦ ॥ </p>
<p class="calibre1">ik-oNkaar sat naam kartaa purakh nirbha-o nirvair akaal moorat ajoonee saibhaN gur </p>
<p class="calibre1">parsaad. </p>

Here is some of the html.

[KamSingh]

Also how do I make the background image fullscreen, it is being displayed with the margins I set for the text.

[KamSingh]

I'm using the default CSS style that is stickied, is it this that I modify?

[KamSingh]

Also I'm reading on PC.

[Quoth]

Don't use background images.
Makes it very hard for some people to read at all.
Support is varied.

[Doitsu]

Originally Posted by KamSingh

<p class="calibre1">Page 1 </p>
<p class="calibre1 gurmukhi">ੴ ਸਿਤ ਨਾਮੁ ਕਰਤਾ ਪੁਰਖੁ ਿਨਰਭਉ ਿਨਰਵੈਰੁ ਅਕਾਲ ਮੂਰਿਤ ਅਜੂਨੀ ਸੈਭੰ ਗੁਰ ਪਰ੍ਸਾਿਦ ॥ </p>
<p class="calibre1">ik-oNkaar sat naam kartaa purakh nirbha-o nirvair akaal moorat ajoonee saibhaN gur </p>
<p class="calibre1">parsaad. </p>

If you own a Kindle model that supports AZW3 or KFX files, you don't have to embed any fonts since current Kindle models support all major Indic languages out of the box.
(The screenshot shows the KFX version of your HTML code without any embedded fonts.)