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.
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.
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');
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;
}
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>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>