Special arabic font into an html page

HTML & CSS
1

hi, im trying to implement a special arabic font into an html page…
it works on IE6 and IE7 but not on Firefox or google chrome ???!! so can you help me
thankss

2

Hi,
Im trying to implement a special Arabic font into an HTML page,

It works on IE 6 and IE7 , but not on FireFox and google chrome.

the project folder is attached for review

Thanks

3

A link to the page in question might help.

4

Threads merged.

5

hi,

the project is attached,

thanks

6

I assume you have generated the fonts and all the code from here. That seems to be the most full proof method of getting things to work.

There is a check-list here that might help.

7

no actually i didn’t , what i need to know that what it is working on IEz but not on firefox

8

Short answer. I don’t know. :slight_smile:

Good answer - go and get the full code and generated fonts from font-squirrel as that is the full syntax needed to work cross browser. Looking at the code on font squirrel and the code you have provided they don’t look the same at all.

Embedding fonts has many many problems with many bugs so you really need to use the format that works first and then if it doesn’t work we can look at why.

Also a link to the site in question may be useful as its hard to test this locally.

I just created a test and it seems to work out of the box.

9

You may also want to add dir=“rtl” to the html tag any time the overall page direction is right-to-left even though Unicode is supposed to sort that out.

Do not use CSS styling to control directionality in HTML you should use markup as directionality is an integral part of the document structure and needs to be persistent.

Also forgot to mention you should have:

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“ar” lang=“ar”>

Assuming the default language is Arabic.
لا أتكلم العربية

10

hi,
this is the project online with the same problem , not working on Firefox , but it is working on IEs…
i know you don’t speak Arabic , but you can notice the differences in appearance between the browsers.
http://www.ve-editor.com/fonts/

thanks

11

I saw absolutely NO difference between Firefox and IE obviously other than the scrollbar in IE being on the left. But you’d expect that anyway now that you have the text flow going RTL like it is supposed to do. Perhaps it’s your choice of fonts or something?

12

okay , you have to wait until IE upload the font , it will become more artistic,

13

Your CSS code is maybe wrong?

See http://webfonts.info/wiki/index.php?title=@font-face_browser_support for browser support and http://webfonts.info/wiki/index.php?title=@font-face_support_in_Firefox for FF support.

It seems to me you’ve misundertood the way @font-face works:

 @font-face {
 font-family: bulletproof;
[COLOR="Red"] src: url('AGA_Granada_Shaded.eot');[/COLOR]
 src: local('Yanone'), url('AGA-GranadaShaded.otf') format("opentype");
}

as opposed to

@font-face {
   [COLOR="Blue"]font-family: [b]GraublauWeb[/b];[/COLOR]
   src: url("[B]GraublauWeb.ttf[/B]") format("truetype");
}
14

No as I understand it you can call the font anything you want and it gets mapped to the source you provide.

e.g.


@font-face {
   [COLOR=Blue]font-family:[B]'My New Font '[/B];[/COLOR]
   src: url("[B]GraublauWeb.ttf[/B]") format("truetype");
}

Then you call it within the page as.


body{
font-family:'[B]My New Font[/B]', sans-serif;
}

However, I think the format the OP has incorrect as it does not match the accepted way to do this as I pointed to at font squirrel.

For Firefox you need version 3.5 to see the fonts.

There are a lits of gotchas here that may prove useful.

15

:slight_smile: Specs are one thing, UAs implementation another.

Why not starting from the obvious way to do it, w/ only one src and a family name that matches the font name, see if it’s working?

Then, he can start reporting bugs as he tries different other ways to do it :slight_smile:

16

Yes one at a time and for one browser only would be a good way to debug :slight_smile: (It could be a htaccess server issue as mentioned on the link I gave above.)

Or, alternatively just use the foolproof method from the start where people a lot smarter than me have spent months finding the right way to achieve it :slight_smile:

However as Robert said I’m seeing the same display in IE and Firefox but browsercam shows IE working which is very weird.!

Regading Firefox then I can’t see that the font file is where is being asked for.

http://www.ve-editor.com/fonts/AGA-GranadaShaded.otf

The IE font is found here though.

http://www.ve-editor.com/fonts/AGA_Granada_Shaded.eot

Check the fonts have been uploaded to the correct place.