Convert Arabic Ttf/Otf Fonts to Woff, Eof

How can I convert OTF/TTF files to EOT format?

Use the Font Squirrel Generator - this will produce not just EOT, but also SVG and WOFF formats, and converting multiple font files at once, and providing everything in a single archive along with the relevant CSS.

how do i convert OTF to TTF so that subpixel rendering (anti-aliasing) is ON?

okay. here's what i've figured out and it works. but, i can't verify that it'll work with the freeware FontStudio, but it should. i just didn't feel like installing cygwin to verify that it would for sure... meh.

i use FontLab Studio, but any font authoring tool should do the job. Simply open the PS version of the font. convert the PS paths to TT paths. this may take a minute or two, depending on font complexity. Once it's complete, generate a new TrueType font. convert this to EOT and you're away to the races.

TWO important notes:

1) if you are using an IDE like Dreamweaver or Aptana, the preview will NOT show the new subpixel rendering you just enabled. but it does show up where it matters: in the browser.

2) Mac users may not see this problem and be aware of it because the Mac type engine handles OpenType PS files differently. hopefully this will help them out.

bottom line, if you're going to be converting to EOT, start with a TrueType font. as great as OpenType PS is for layout & print, it explodes the brain when used for web layout.

hope this is useful to the community.

WR!

Can anybody get these two fonts work as Webfont? I use almost webfont generator services but none works

With webfonts (and really any font in general) the bold and italic and other variations are actually separate files that need to be loaded. So if you're using regular, bold, italic, and bold italic, you would need to load four separate files.

Google fonts

Just like with self-hosted, you have to explicitly tell Google fonts to get all of the weights and variants you want. You do that in the little box where you get the embed code. Click on the 'Customize' tab, and choose the variations you want.

Here are some examples. I'm using the @import option here, which you'd just drop into your stylesheet, but the pattern is the same for the standard link tag.

By default, it only includes the regular weight:

@import url('https://fonts.googleapis.com/css?family=Noto+Serif');

If you want regular and bold, it looks like this:

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');

And if you want italics for both of those, you'd add those too:

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i');

Self-Hosted

In your code above it looks to me like you need to define the semibold font. If the CSS above is complete, it only defines the regular weight. The paths to the semibold versions need to be defined in another @font-face directive, with the font-weight set differently. It should probably look something like this:

@font-face {
    font-family:'Noto Serif Lao';
    src: url('fonts/Noto Serif Lao Regular.eot');
    src: url('fonts/Noto Serif Lao Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Noto Serif Lao Regular.woff2') format('woff2'),
        url('fonts/Noto Serif Lao Regular.woff') format('woff'),
        url('fonts/Noto Serif Lao Regular.ttf') format('truetype'),
        url('fonts/Noto Serif Lao Regular.svg#Noto Serif Lao Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family:'Noto Serif Lao';
    src: url('fonts/Noto Serif Lao Semibold.eot');
    src: url('fonts/Noto Serif Lao Semibold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Noto Serif Lao Semibold.woff2') format('woff2'),
        url('fonts/Noto Serif Lao Semibold.woff') format('woff'),
        url('fonts/Noto Serif Lao Semibold.ttf') format('truetype'),
        url('fonts/Noto Serif Lao Semibold.svg#Noto Serif Lao Semibold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
}

---

Working versions

Google Fonts

This one only uses regular and bold, without the italics. But you can set the @import directive to bring in whatever you need for the project. Just be careful to only load what you need, since lots of font files can slow down your site.

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');@import url(//fonts.googleapis.com/earlyaccess/notosanslao.css);@import url(//fonts.googleapis.com/earlyaccess/notoseriflao.css);
h1 { font-family: sans-serif; margin: 0; }h1.noto { font-family: 'Noto Serif', sans-serif; font-weight: 400; }h1.bold { font-weight: 700; }h1.lao { font-family: 'Noto Serif Lao'; font-weight: 400; }h1.lao-bold { font-family: 'Noto Serif Lao'; font-weight: 700; }h1.sans-lao { font-family: 'Noto Sans Lao'; font-weight: 400; }h1.sans-lao-bold { font-family: 'Noto Sans Lao'; font-weight: 700; }

<h1 class="lao">ຕົວອັກສອນລາວ</h1><h1 class="lao-bold">ຕົວອັກສອນລາວ</h1><h1 class="sans-lao">ຕົວອັກສອນລາວ</h1><h1 class="sans-lao-bold">ຕົວອັກສອນລາວ</h1><h1 class="noto">Noto Serif Lao</h1><h1 class="noto bold">Noto Serif Lao Semibold</h1>

---

Related Topics