Multiple #font-face ignored in epub - html

I am generating EPUB files with embedded fonts using ebook-convert from the calibre project. When I declare multiple font faces in HTML, it works fine:
<html>
<head>
<style type="text/css">
#font-face{
font-family: "test";
font-style: normal;
font-weight: normal;
font-variant: normal;
src: url(fonts/EBGaramond12-Regular.otf);
}
#font-face{
font-family: "test";
font-style: italic;
font-weight: normal;
font-variant: normal;
src: url(fonts/EBGaramond12-Italic.otf);
}
body{
font-family: "test";
}
</style>
</head>
<body>
This is a test with <i>italic</i>.
</body>
</html>
produces:
but when I convert it to EPUB, I only get the first font for the whole document:
I checked the EPUB. The fonts are embedded properly and the CSS is included. There can't be a conflict with my system fonts since I used "test" as a string to identify the font.
What is wrong with EPUB? Am I declaring the fonts wrong?

This blog post about epub fonts may help

Related

Custom .woff format fonts in Sendgrid - how to use?

I am trying to figure out how to use custom fonts in Sendgrid. Google fonts work properly, but custom .woff format font doesn´t seem to work. I have tried 3 solutions below. When I use solution nr. 1 in Preview tab it gets applied, but in the email it´s not
Would appreciate any suggestions on the problem.
1.
<head><link href="https://somelink" rel="stylesheet" type="text/css"><style>
* { font-family: 'BrownLight', sans-serif; }
</style></head>
2.
<head>
<style>
#media screen {
font-family: 'BrownLight';
src: url('somelink.woff') format('woff');
}
.text {
font-family: 'BrownLight';
}
</style>
</head>
3.
<head>
<style>
#media screen {
#import url('https://somelink');
}
* { font-family: 'BrownLight', sans-serif; }
</style>
</head>
Twilio SendGrid developer evangelist here.
I assume you have a URL where the WOFF font file itself is hosted. You can then follow what a Google Font would do, like this example.
<head>
<style>
#font-face {
font-family: 'BrownLight';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(YOUR_FONT_URL) format('woff');
}
.text {
font-family: 'BrownLight', sans-serif;
}
</style>
</head>
Though, do note that many clients do not support web fonts. You can see more on adding custom fonts in the SendGrid documentation here.

How do I actually import external fonts to my website (CSS)

I searched the web and look for ways to add an external fonts to the web or CSS. I know we should use #font-face to do that. But, my website doesn't load the font when I reload. Can someone see the problems for me?
This is my codes:
<style>
#font-face {
font-family: 'vcr_osd_monoregular';
src: url('vcr_osd_mono-webfont.woff2') format('woff2'),
url('vcr_osd_mono-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h1 {
font-size: 90px;
font-family: "vcr_osd_monoregular", sans-serif;
color: yellow;
}
</style>```
Instead of printing out vcr_osd_monoregular font, it prints out sans-serif. Please help.

Why isn't #font-face working on my website?

I've got a woff file named 'azonix-webfont.woff'. I added it to my website using #font-face. but it's not working. The text is displayed with the default font. Where's the error?
<head>
<meta charset="UTF-8">
<style>
#font-face
{
font-family: Azonix;
src: url(azonix-webfont.woff);
}
</style>
</head>
<body>
<p style="font-family: Azonix;">Hello!</p>
</body>
The text is displayed in default font. I don't know where's the error.
Edit: OK, I found the answer. It started working when I posted the files to the server.
You should upload your font to transfonter.org and convert. Will come css code with transfonter zip folder. And then you should change font url in css, according to place of your font files. Like this:
#font-face {
font-family: 'Proxima Nova Cn Lt';
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot');
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff2') format('woff2'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff') format('woff'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}

Doesn't show supported letters

I'm using Signika Bold as font for my headers. Font is loaded from Google Webfonts. As you can see in the demo, there is a problem with showing letter "Č", both upper and lower case. The letter is on the list of supported fonts on the official Webfonts page.
CSS:
#font-face {
font-family: "Signika";
font-style: normal;
font-weight: 700;
src: local("Signika-Bold"), url(http://themes.googleusercontent.com/static/fonts/signika/v3/7M5kxD4eGxuhgFaIk95pBRsxEYwM7FgeyaSgU71cLG0.woff) format("woff");
}
h1 {
font-family: "Signika", Helvetica, sans-serif;
}
I have also tried typing the letter as HTML entitle (č), but it doesn't help.
<link href='http://fonts.googleapis.com/css?family=Signika:700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
Thanks to Anon, the solution is to check the Latin Extended in the Google font settings. The demo is updated.
CSS:
#font-face {
font-family: 'Signika';
font-style: normal;
font-weight: 700;
src: local('Signika-Bold'), url(http://themes.googleusercontent.com/static/fonts/signika/v3/F587cG5P5ff3TX6w4JlorxsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
Or:
HTML:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Signika:700&subset=latin,latin-ext">

How do I use .woff fonts for my website?

Where do you place fonts so that CSS can access them?
I am using non-standard fonts for the browser in a .woff file. Let's say its 'awesome-font' stored in a file 'awesome-font.woff'.
After generation of WOFF files, you have to define font-family, which can be used later in all your css styles. Below is the code to define font families (for normal, bold, bold-italic, italic) typefaces. It is assumed, that there are 4 *.WOFF files (for mentioned typefaces), placed in fonts subdirectory.
In CSS code:
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font.woff") format('woff');
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-bold.woff") format('woff');
font-weight: bold;
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-boldoblique.woff") format('woff');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: "myfont";
src: url("fonts/awesome-font-oblique.woff") format('woff');
font-style: italic;
}
After having that definitions, you can just write, for example,
In HTML code:
<div class="mydiv">
<b>this will be written with awesome-font-bold.woff</b>
<br/>
<b><i>this will be written with awesome-font-boldoblique.woff</i></b>
<br/>
<i>this will be written with awesome-font-oblique.woff</i>
<br/>
this will be written with awesome-font.woff
</div>
In CSS code:
.mydiv {
font-family: myfont
}
The good tool for generation WOFF files, which can be included in CSS stylesheets is located here. Not all WOFF files work correctly under latest Firefox versions, and this generator produces 'correct' fonts.
You need to declare #font-face like this in your stylesheet
#font-face {
font-family: 'Awesome-Font';
font-style: normal;
font-weight: 400;
src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}
Now if you want to apply this font to a paragraph simply use it like this..
p {
font-family: 'Awesome-Font', Arial;
}
More Reference