We have developed Adobe air application that has option for Hindi and English. For translation we used microsoft office Hindi Pack and used on-screen keyboard to write in hindi. We have used Arial font in application.
In some of the client computers when language is changed to Hindi we see boxes in place of the words. The client computer is having Arial font available.
We are ready to embed the correct TTF file in our application but we are not sure which font file is being used by successful machines as we did not install any special font. Please help.
== Update===
Found there is an option to embed the font of the system application is compiled on. For that I used following code but it is not working:
[Embed(systemFont="arial", fontName="myArial",
mimeType="application/x-font", advancedAntiAliasing="true")]
protected var fontClass:Class;
and then in css file added
global
{
font-family: "myArial";
}
But I am getting errors:
Description Resource Path Location Type
exception `during transcoding: Cannot embed local font 'arial' as CFF. The CSS #font-face 'local()' syntax is not supported. Please specify a path directly to a font file using the 'url()' syntax. For [Embed] syntax the 'systemFont' attribute is not supported. Please specify a path directly to a font file using the 'source'` attribute. HondaLMS.mxml /HondaLMS/src line 81 Flex Problem
and
Description Resource Path Location Type
unable to build font 'myArial' HondaLMS.mxml /HondaLMS/src line 81 Flex Problem
I believe the systemFont name is "Arial", not "arial" (they are case sensitive).
If that does not work, try to embed it in css:
#font-face
{
src: local("Arial");
fontFamily: "myArial";
unicodeRange: U+0020-00FF; // change the range for your desired english and hindi characters, numbers and punctuation, otherwise you would embed ALL characters including cyrillic, chinese, arabic and whatnot and it would become huge
}
global
{
font-family: "myArial";
}
If it won't work with the font name reference, just copy the Arial font into your project directory and embed it with a relative path:
#font-face
{
src: url("../assets/Arial.ttf");
fontFamily: "myArial";
unicodeRange: U+0020-00FF; // change the range for your desired english and hindi characters, numbers and punctuation, otherwise you would embed ALL characters including cyrillic, chinese, arabic and whatnot and it would become huge
}
Related
I'm trying to add Urdu (right-to-left) content to my site, built using Zola (static site generator). Zola only reads/publishes .md files, so can't just publish html files directly, and so am trying to modify the markdown file to use the right font. It works great for English content (where I use the default fonts), but I'm having issues in extending its functionality to Urdu.
The default font reflects Urdu content in Arabic-style Naskh rather than Urdu/Persian-style Nastaliq. This makes it harder to read.
I've downloaded the google font Gulzar-Regular and added the following lines to my main.scss html file. I was expecting to be able to change the font variables for specific text, e.g., as we can make text right to left, or larger in size. I was expecting to be able to do the same for the font itself, i.e., telling the build to use this particular font in this context.
When this didn't work, I did a lot of googling to understand if other's had a similar problem. I found some material for converting right to left, and to use RTL languages for one-off words within mostly English content, but that did not address the usage of fonts. Some usage was also found re fonts but that was typically within a single html file, not within a separate SCSS and md file.
Here's what I've tried:
(in main.scss)
html { #font-face{
font-family: {"Gulzar-Regular", serif;
src: url(Gulzar-Regular.ttf);
}
I've also tried:
html {
font-family: Gulzar-Regular;
src: url(Gulzar-Regular.ttf);
}
Note, I downloaded the file (ttf) in the same directory as the main.scss file.
In my .md file, I've added:
<div dir="rtl">
<span style="font-family:Gulzar-Regular;font-size:1em">
!CONTENT!
</span>
</div>
In either case, I only get Naskh (i.e, default font). Would love to hear from anyone who has used additional fonts, especially for non-latin and right-to-left languages like Arabic, Hebrew, Persian, etc.
I'm using TheArtOfDev's HtmlRenderer.PdfSharp to convert an HTML string to PDF in a ASP.NET web application. The HTML contains Japanese characters. The Japanese symbols are converted to ☐ ascii characters.
How can I enable UTF-8 or use a custom Japanese font? I tried the following without results:
Adding <head><meta charset='utf-8'></head> to the HTML string.
Adding <style>#font-face { font-family: myFont; src: url('path/font.ttf'); }</style> to the HTML string and then settings the font style on the element with Japanese text.
Try a CSS file with #font-face and calling TheArtOfDev.HtmlRenderer.PdfSharp.PdfGenerator.ParseStyleSheet
I gave up on HTMLRenderer and PDFSharp and solved all my issues with TuesPechkin, a wrapper for wkhtmltopdf.
I want to add a base64 encoded OpenType font as a data URI in font-face.
I have this so far:
#font-face {
font-family: 'test';
src: url(data:font/otf;base64,
// Base64 string here ...
) format('opentype');
}
But I believe it does not include the font correctly to my style.
Any help with this would be really appreciated.
Although not asked, I'm sure that someone will come here looking for the woff2 solution and will have the same issues I had. Upload the file using this site: https://base64.guru/converter/encode/file Ensure you use the option "Data URI". Replace the url() value with the code from the site.
For the CSS I had to use the following code:
#font-face {
font-family: 'MYFONT'; /*This is what your font will be named*/
src: local('MYFONT'), /* It will check the machine for a font matching this name, if it exists it will use this. Not needed when your are writing the woff2 file since you already sending all the data. */
url('data:#file/octet-stream;base64,d09GMgABAAAAAK6kABIAAAABgQgAAK47AAA=') /*This is the base64 code copy pasted from the site*/
format('woff2'); /*This ensures the browser treats it as a WOFF2 file. Notice there is no comma after the url() */
}
To get your custom font to work you need to specify it:
<div style="font-family: MYFONT">
My new font
</div>
The actual base64 code I have posted does not work. The woff2 file i was using is 50kb and didn't want page after page of base64 code.
Data URIs are always of this format:
data:[<mediatype>][;base64],<data>
The very first part of every data URI is the media-type, which in the case of an Open Type font is:
font/opentype
So, you may use it like this:
#font-face{
font-family: test;
src: url(data:font/opentype; base64, [base64 string here]);
}
Replacing
[base64 string here]
with the exact copy-pasted version of your base-64 encoded string.
Notes
Please note that:
you should use font/opentype for the data, not otf.
you should copy-paste the exact base-64 encode string, without any changes like added spaces, etc (I believe there are some spaces in it)
Online Encoding Tool
You may use this tool, to convert your font file to the encoded string.
I'm trying to generate a pdf from html by using Hiqpdf. As they say in the website: http://www.hiqpdf.com/documentation/html/037cb13e-febe-4d08-a90c-a08bbd5a4348.htm this dll supports fonts embedding. However, I'm using the following fonts stored in my computer and it doesn't work.
#font-face {
font-style:normal;
font-weight:normal;
font-family:f2generic;
src:url('C:/Users/myuser/AppData/Local/Temp/f2generic.otf') format("opentype");}
I don't know is it is something wrong with the path (as it must be absolute path or the format of the font). In html format i can display the fonts right.
I checked property htmlToPdfConverter.Document.FontEmbedding and it is true, so I don't know why it doesn't work.
Thanks in advance.
You should try to use fully qualified URLs for resources like file:///C:/Users/myuser/AppData/Local/Temp/f2generic.otf
I'm writing a Pure AS3 app, embedding a font using the Embed metatag like so:
[Embed(source="assets/fonts.swf", fontName="AlternateGothic No2")]
public static const ALTERNATE_GOTHIC_2:Class;
This has always worked for me, but Alternate Gothic No. 2 gives me issues. In Flash, the font is labeled as AlternateGothic and the style is No2. I typically combine these with a space in between as the fontName, but it's not working.
The font is Postscript Type 1, so I can't embed the file and fontFamily, unless I spend $100+ on a font converter.
I also tried creating a font symbol, but that didn't work either. Any ideas?
FontExplorerX has the font labeled as AlternateGothic-No2, so I tried that and it worked.