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

Question

I have tried many times to generate or convert these two fonts into webfont but they are not working. I try almost webfont services found in Google search result but none works. Here are the fonts:

1) NotoSerifLao-Regular https://www.dropbox.com/s/a4e5jfwy5umlj41/NotoSerifLao-Regular.ttf?dl=0
2) NotoSerifLao-SemiBold https://www.dropbox.com/s/2x84v1acibga5iu/NotoSerifLao-SemiBold.ttf?dl=0

This webfont generator service https://www.fontsquirrel.com doesn't work at all but this service https://fontie.pixelsvsbytes.com works only with NotoSerifLao-Regular (the first one) but doesn't work with NotoSerifLao-SemiBold (the second one). I don't understand why it doesn't work with the second one, but the first one. I have these two fonts in my computer and they both work fine in MS Office.

I place the generated/converted fonts in a child theme like this:

              -----fonts (folder)
  child-theme}  
              -----css  (folder)

So the path in my css looks 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;
    unicode-range: U+0020-00A0;
}

The above code is the example of the first font generated from this service fontie.pixelsvsbytes.com. And it works. As I said, this website works only with the first font, not the second one. The paths are same and correct. No errors found in chrome. I've tried other webfont generator services but they don't work at all. Could you please tell me how to get these two fonts work as webfont? Or if you know other webfont generator websites, please let me know. But I've tried almost all found in Google, none works. I've shared the fonts via Dropbox. You can download and test them.

nwalton · Accepted Answer · 2018-02-09T15:56:10.590

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>

Self-hosted

For the self-hosted I only specified the TTF version since that's what you supplied above. I just used the Dropbox links for this demo, but you can swap them out for your specific paths. If you want to include other font formats (.woff, .svg, etc) you'll need to make sure you have separate files for all of those, for both weights.

font-face {
    font-family:'Noto Serif Lao';
    src: url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-regular-webfont.woff2') format('woff2'),
         url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0E80-0EFF;
}

@font-face {
    font-family:'Noto Serif Lao';
    src: url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-bold-webfont.woff2') format('woff2'),
         url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0E80-0EFF;
}

.lao {
  font-family: 'Noto Serif Lao';
  font-weight: 400;
}
.lao-bold {
  font-family: 'Noto Serif Lao';
  font-weight: 700;
}

<h1>No font: ຕົວອັກສອນລາວ</h1>
<h1 class="lao">Regular: ຕົວອັກສອນລາວ</h1>
<h1 class="lao-bold">Bold: ຕົວອັກສອນລາວ</h1>

I don't use Google font, just webfont generated from webfont service websites found in Google search result. — Joji adams, Feb 02 '18 at 05:39
What does your /fonts folder look like? It won’t work if the bold font isn’t there or if I’ve typed the path in wrong. — nwalton, Feb 02 '18 at 07:36
1) I places all the generated files of the two fonts in the same folder like this "child theme/fonts" 2) and I even tried put the fonts in separate folders like this "child theme/fonts/regular" & "child theme/fonts/semibold". So I write the path like this src: url('fonts/regular/Noto Serif Lao regular.eot) and src: url('fonts/semibold/Noto Serif Lao semibold.eot). Still it's not working. — Joji adams, Feb 02 '18 at 10:16
However, it's recommended that you test the fonts at your side so that you know what happen. And if it works please tell me how you place the fonts files to a folder and how the css code look like. I've done many things but not working. Thanks so much. — Joji adams, Feb 02 '18 at 10:20
I can give it a try, but is there a reason you don’t just @import from Google fonts? It seems like that would be easier. — nwalton, Feb 02 '18 at 13:58
There're no NotoSerifLao-Regular and NotoSerifLao-SemiBold fonts in Google fonts. Or is it possible to add these fonts to google fonts? — Joji adams, Feb 02 '18 at 17:25
If you use the code in my working example, it gives you both. The `@import` gets the fonts from Google, and then you specify `font-family: 'Noto Serif'` wherever you need to in your CSS. I attached it to the `h1` but you'd probably want to apply it more broadly. If you click the "Run code snippet" button you can see it working. That was just a small example that you'll have to adapt for your specific needs. You can also see there that specifying the font-weight gives you the regular and bold. — nwalton, Feb 02 '18 at 17:29
The two fonts I'm talking about are Lao fonts. In the code snippet, if you add lao word, for example, "ຕົວອັກສອນລາວ" does it work? — Joji adams, Feb 02 '18 at 17:33
Oh, I found Noto Serif Lao as well. I've updated the example with that too. You can find a whole bunch of Lao fonts here: [https://fonts.google.com/earlyaccess](https://fonts.google.com/earlyaccess) — nwalton, Feb 02 '18 at 17:51
By the way, if I would like to add a font to google, how can I do that? Possible? — Joji adams, Feb 02 '18 at 18:11
Hello, One more thing. I've tried the Noto Serif Lao in Google font but it seems that the Noto Serif Lao from Google font and Noto Serif Lao from the two fonts I've shared the dropbox link are a little bit different while they are the same name. For example, you can see the direferent of the character "ຈ". — Joji adams, Feb 03 '18 at 11:53
I prefer the version I've mentioned early. But seems that all webfont generator websites I found in Google search result cannot generate theme. — Joji adams, Feb 03 '18 at 11:55
Thanks but bot working. I've generated those two fonts using all the web font generators found in google search, none work at all. don't understand why, but work fine in MS Office. — Joji adams, Feb 05 '18 at 18:29
The 'Run code snippet' button works fine. But what doesn't work is the font. Actually, the fonts I want doesn't look like that. — Joji adams, Feb 06 '18 at 09:49
The font in the snippet code looks the same to this font "ຕົວອັກສອນລາວ" You can see the character is same, comparing to that. This is DokChampa font. I hate this font. This is the default Lao font display on web pages, not nice. — Joji adams, Feb 06 '18 at 09:49
That's why I want the Lao font to look nice in my webpage. So I want to use those two fonts. However, I can get it down now. I download the fonts from a website without the need to go through webfont generation via other websites because it doesn't work. But the fonts from Google that you refer to is also a good choice. It's just a bit different. Same name San Serif Lao but the characters are bit different. I don't know what version it is. — Joji adams, Feb 06 '18 at 09:50
Interesting. When I run the snippet it looks like it works in my browser. Maybe some browsers don't like the ttf version. I'll have to do some more testing and see if I can get it. — nwalton, Feb 06 '18 at 21:31

nwalton · Answer 2 · 2018-02-09T16:04:55.757

I've worked on this some more and I found a couple of things.

It looks like the unicode ranges you were using are wrong. Lao characters have a unicode range of 0E80-0EFF.
Some of the font converters like to strip out non-latin characters, so that could be causing some issues as well. You need to make sure there's no subsetting, or that you've specified the Lao characters in the subset. I converted these with FontSquirrel and chose the Expert option with no subsetting. A similar issue was discussed in this question.

It looks like there may still be some spacing issues, but you'd be a better judge of that.

@font-face {
  font-family: 'Noto Serif Lao';
  src: url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-regular-webfont.woff2') format('woff2'), 
       url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0E80-0EFF;
}

@font-face {
  font-family: 'Noto Serif Lao';
  src: url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-bold-webfont.woff2') format('woff2'), 
       url('https://nwalton3.github.io/fonts/noto/noto-serif-lao/notoseriflao-bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0E80-0EFF;
}

.lao {
  font-family: 'Noto Serif Lao', sans-serif;
  font-weight: 400;
}

.lao-bold {
  font-family: 'Noto Serif Lao', sans-serif;
  font-weight: 700;
}

<h1 class="lao">Regular: ຕົວອັກສອນລາວ</h1>
<h1 class="lao-bold">Bold: ຕົວອັກສອນລາວ</h1>