I am writing the following CSS code to create font face style using an Arabic font, and i am using windows OS...
the problem that browsers doesn't read it, i am testing on chrome, firefox, explorer and opera... the four browsers doesn't recognize the font...
here is my CSS code...
#media screen, print { #font-face {
font-family: 'FUFONT';
src: url(../fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"), url(../fonts/ScheherazadeRegOT.ttf) format("opentype");
font-weight:bold; } }
and call it as follow...
.navigation ul li a {font-family: FUFONT, Arial, Helvetica, sans-serif; font-size:18px;}
what do you think the problem is?
The short answer: till now there is no generator for arabic fonts so we can use it in web.
Farther explanation: when using http://www.fontsquirrel.com/fontface/generator
with Expert:
Subsetting: No Subsetting.
CSS Formats: Smiley
you'll be able to see your Arabic font in the web pages with one problem: no letter reshaping which means that the letters of one word will not be joint together, because there's no generator till now support the required OpenType functionality for Arabic language.
Now you can use Amiri Font ( http://www.phpandthecity.com/2012/12/use-font-face-with-arabic-font.html )
Solution :
1- goto >>> http://www.fontsquirrel.com/fontface/generator
2- upload your font on expert mode
3- check only those values :
--------> Font Formats: woff
--------> Truetype Hinting: Font Squirrel
--------> X-height Matching: none
--------> Subsetting: No Subsetting
4- Download your files
5- past this code into your css file :
#font-face {
font-family: 'Name of your font';
src: url('url to your font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
6- call your font and apply it on some element
ex :
h1{
font-family : "name of your font" ;
}
Enjoy it !
Related
I am using two webfonts in a page that I convert to a PDF using dompdf. I have this in the header:
<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>
I then use them in CSS rules like
body {
font-family: "Roboto Condensed", sans-serif;
[ ... ]
}
h1 {
font-family:'Signika', Arial, Helvetica, sans-serif;
[ ... ]
}
Now, when I generate the PDF, the h1 is displayed with the "Signika" font, but "Roboto Condensed" is replaced by Helvetica or some other standard sans-serif font.
If I open the "preview" file (i.e. the php page which I then include in the PDF generation script), "Roboto Condensed" is displayed as expected, but it doesn't make it into the PDF. But as I wrote, "Signika" is there in the PDF, and that's somehow odd to me. BTW, I also tried to include the font-face rule directly in CSS rules for p, div, li etc. but that wouldn't change anything.
Any suggestions how I could fix that?
EDIT/ADDITION:
Thinking about it, a difference between the two fonts is that Roboto Condensed has a space in its name. I wonder if that could cause the problem (i.e. dompdf not being able to handle such a font name)? But I can't change that as long as I am fetching the fonts from the Google server.
I found the solution myself:
As I had added to my question in an edit, the reason obviously was that the font-family name "Roboto Condensed" contains a space, which dompdf doesn't seem to like.
I downloaded the font, created three versions of it with the font generator on Fontsquirrel and put them on my server, together with this stylesheet:
#font-face {
font-family: 'roboto_condensedregular';
src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
url('robotocondensed-regular-webfont.woff') format('woff'),
url('RobotoCondensed-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Then, in my CSS rules I used that new font name roboto_condensedregular in font-family: roboto_condensedregular, sans-serif;
Now it works, also in the PDF.
You don't need to actually do all of this. Simply use the #importoption to embed the font in your html. Works like a charm using laravel-dompdf.
screenshot
I would like a different font-face for print than for screen.
Unfortunately Google Chrome Print Preview (works on other browsers) won't load the font-face and won't show the text.
But if you try it a second time, the font-face is loaded and then, Google Chrome Print Preview will show the text!
Here is a fiddle on which you can reproduce the problem. (nb: on the fiddle the font url does not exist, but at least the preview should show the text as 'serif').
Is there a better solution than forcing the pre-loading of the print font-face for all #media?
The problems occurs on all versions of Google Chrome <= 53.
I used this code:
#media only print {
#font-face {
font-family: "Computer Modern";
src: url('/fonts/cm/cmunrm.otf');
font-weight: normal;
font-style: normal;
}
body {
font-family: "Computer Modern", serif;
}
}
https://jsfiddle.net/72bsf1n0/
Just found this question via Google after we had just experienced the same problem. Sad to see 11 months gone by with no answer, so perhaps this will help you and others.
Chrome seems to load the custom font 'on-demand'. So, if the font isn't already used on the page, your first 'Print Preview' fails to have it yet, subsequent ones will have it. Likely a timing issue there.
One solution would be to make sure you also use the print font on the regular version of the page.
#font-face {
font-family: "Computer Modern";
src: url('/fonts/cm/cmunrm.otf');
font-weight: normal;
font-style: normal;
}
#media only print {
body {
font-family: "Computer Modern", serif;
}
}
.printfont {
font-family: "Computer Modern", serif;
}
https://jsfiddle.net/72bsf1n0/8/
There is a issue for this here
https://bugs.chromium.org/p/chromium/issues/detail?id=284840
For now you need to sure there is printed font rendered before using print and you render at least 1 character from every language group you want to print:
Cyrillic (Supported by Open Sans)
Cyrillic Extended (Supported by Open Sans)
Greek (Supported by Open Sans)
Greek Extended (Supported by Open Sans)
Latin (Supported by all Fonts)
Latin Extended (Supported by Open Sans)
Vietnamese (Supported by Open Sans)
For now I add characters from Latin extended
<div class="chrome-font-fix">sš<b>sš</b><i>sš</i></div>
with invisible style
.chrome-font-fix {
position: absolute;
visibility: hidden;
}
I have css like so:
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBold.ttf');
font-weight:normal;
font-style: normal;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBoldItalic.ttf');
font-weight:normal;
font-style: italic, oblique;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBlack.ttf');
font-weight:bold;
font-style: normal;
}
#font-face {
font-family: 'alegreya';
src:url('fonts/AlegreyaBlackItalic.ttf');
font-weight:bold;
font-style: italic, oblique;
}
And a rule for my class like this:
.font-alegreya {
font-family:alegreya;
}
And finally HTML:
<li class="font-alegreya" data-styles="bold, italic, extrabold">
Alegreya - Some sample words.
</li>
Now, I've read here on metaltoad and other places on SO that using a single font-family is the preferred way to utilize custom fonts and that you have to put bold-italic last.
The Problem is that the font is displayed italic. By using font-weight:normal in the css class, I get normal display weight, but font-style:normal doesn't clear the italics. This makes sense, since under (-webkit) "developer tools" in the "resources" tab, I only see the black-italic font loaded (second in my CSS file). The font is installed on my computer, but I renamed the file on the server.
I've observed this in opera (webkit) and IE11, so it's my code.
Edit: As mentioned in the comments, I had bold and black inverted. That accounts for the bold. But italic is still an issue.
As David Stone's answer on the authoritative answer to #fontface questions states, this spec says that oblique, italic IS valid.
As he stated, FF 3.6 doesn't like the two values. Buried in the comments there are more reports of two-values not working.
On digging into the webkit bug reports, I discovered that the value for font-style as prescribed by the spec changed from CSS2 to CSS3. According the later css3 spec, only one value is allowed for the font-style property, rather than a comma-separated list.
So nowdays, if you pass in a comma-separated list, the rendering engine says "that's not a valid font-style. They must have meant normal." And overrides your previous normal declaration.
tl;dr: If font face is rendering all italic fonts:
font-style: italic, oblique;
should be
font-style: italic;
For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
I just found out that there is no generator for Arabic fonts, because of the issue of connecting the letters... Does that mean that the only choice I have is to get it from fonts.com? Does anyone know of a place were I can get good quality arabic fonts to use for my website?
#ArbText01 {
position:absolute;
top:130px;
right:10px;
font-family:adobe arabic;
font-size:30px;
color:#fb5e08;
padding-top:0px;
padding-bottom:0px;
direction:rtl;
}
<div id='ArbText01'>ةالفصح
</div>
http://arabic001.com/home.html
Here ist one simple way to get fonts in css:
#import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
.droid-arabic-kufi {
font-family: 'Droid Arabic Kufi', serif;
}
Look at http://fonts.googleapis.com
What do you mean with Arabic fonts? Most "normal" fonts we use every day will work just fine in CSS. Do make sure to set the RTL properties though, where needed. After all, you don't want Arabic people to read left-to-right, do you? :-)
<html dir="rtl"> (combined with an English website it looks funny, but it's what you need for Arabic and other RTL languages)
you should provide a font-face like this:
#font-face {
font-family: 'mywebfont';
src: url('adobe_regular.eot');
src: url('adobe_regular.eot?#iefix') format('embedded-opentype'),
url('adobe_regular.woff') format('woff'),
url('adobe_regular.ttf') format('truetype'),
url('adobe_regular.svg#adobe_regular') format('svg');
font-weight: normal;
font-style: normal;
}
and now you should use 'mywebfont' as font family.
You could always find a free font from somewhere. I'm sure a quick google search would yield excellent results. If your talking about getting them to work, you'll need to look into UTF-8 encoding so that all the characters display correctly.
I will show how easy to integrate the "droidarabickufi" font onto your CSS file and how easy to apply it to your entire document (instead of applying it to individual classes).
First, Add this line at the top of your CSS document...
#import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
Then apply the rule to the "HTML" tag (to apply it for the entire doc).
html{font-family: 'Droid Arabic Kufi', serif;font-size:100%;}
Note: you have to check if another class uses custom font family like "Tahoma" or "Sans" or "Arial" or others.