I am using two webfonts in a page that I convert to a PDF using dompdf. I have this in the header:
<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>
I then use them in CSS rules like
body {
font-family: "Roboto Condensed", sans-serif;
[ ... ]
}
h1 {
font-family:'Signika', Arial, Helvetica, sans-serif;
[ ... ]
}
Now, when I generate the PDF, the h1 is displayed with the "Signika" font, but "Roboto Condensed" is replaced by Helvetica or some other standard sans-serif font.
If I open the "preview" file (i.e. the php page which I then include in the PDF generation script), "Roboto Condensed" is displayed as expected, but it doesn't make it into the PDF. But as I wrote, "Signika" is there in the PDF, and that's somehow odd to me. BTW, I also tried to include the font-face rule directly in CSS rules for p, div, li etc. but that wouldn't change anything.
Any suggestions how I could fix that?
EDIT/ADDITION:
Thinking about it, a difference between the two fonts is that Roboto Condensed has a space in its name. I wonder if that could cause the problem (i.e. dompdf not being able to handle such a font name)? But I can't change that as long as I am fetching the fonts from the Google server.
I found the solution myself:
As I had added to my question in an edit, the reason obviously was that the font-family name "Roboto Condensed" contains a space, which dompdf doesn't seem to like.
I downloaded the font, created three versions of it with the font generator on Fontsquirrel and put them on my server, together with this stylesheet:
#font-face {
font-family: 'roboto_condensedregular';
src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
url('robotocondensed-regular-webfont.woff') format('woff'),
url('RobotoCondensed-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Then, in my CSS rules I used that new font name roboto_condensedregular in font-family: roboto_condensedregular, sans-serif;
Now it works, also in the PDF.
You don't need to actually do all of this. Simply use the #importoption to embed the font in your html. Works like a charm using laravel-dompdf.
screenshot
Related
I need to includes the font-faces directly in the DOM, what I'm trying to say is I need to put the font-faces in a tag. I could did it, but now, the fonts looks different
PD: ONLY HAPPENS WITH OPEN SANS FONT
I tried to put different css properties, like font-smoothing
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering: optimizeLegibility;
Update: Well, I found the problem, but not the solution, it's a weird issue. By downloading the "OpenSans-Regular" you can notice it's not only regular, if you put the
font-weight: bold;
You will able to see a bold weight, but not really the original "OpenSans-Bold", if you download the "OpenSans-Bold" you can see a difference bewtween put
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
font-family: 'Open Sans'; // Actually this is the open sans regular
font-weight: bold;
Results:
AND
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
font-family: 'Open Sans'; // And this is the original open sans bold
font-weight: bold;
Results:
The second result is bolder than regular (obviously) with font weight 700
Does anyone know what this behavior is due to? I need to use the bold of the Regular and the original bold of "OpenSans-Bold" (both of them in the same website). Thanks in advance.
(Friendly reminder! I'm not using google fonts API, just for example purpose -but I downloaded manually OpenSans from it-)
I'm trying to use fontlibrary.org to load fonts to produce documents as PDF. I currently use these same fonts on web sites and everything works as expected; however, when I try to print a document with these fonts, strong does not render bold and em does not render as italic. To work around this problem, I have to do this (this is already sass, so you can imagine the corresponding CSS):
body {
font-family: "HkGroteskRegular", sans-serif;
strong {
font-family: "HankenGroteskBold", sans-serif;
font-weight: bold;
}
em {
font-family: "HankenGroteskItalic", sans-serif;
font-style: italic;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: "NormungRegular", serif;
strong {
font-family: "NormungBold", serif;
font-weight: bold;
}
em {
font-family: "NormungItalic", serif;
font-style: italic;
}
}
code, pre {
font-family: 'FantasqueSansMonoRegular', monospace;
strong {
font-family: "FantasqueSansMonoBold", monospace;
font-weight: bold;
}
em {
font-family: "FantasqueSansMonoItalic", monospace;
font-style: italic;
}
}
So that leaves me with a few questions:
How does this work at all on the web? How does the browser load the bold font for bold, the italic font for italics, and so on? Evidently, the browser simulates font variants for bold and italic, so it doesn't use the imported font variants.
Since this doesn't work for print, who's broken? Does fontlibrary.org serve the fonts incorrectly and the browser (and wkhtmltopdf) can't find them? Do both the browser and wkhtmltopdf load the font files incorrectly?
If fontlibrary.org is broken Since fontlibrary.org seems to use a font variant naming scheme that doesn't match what the rest of the world seems to except, then whom can I trust to serve these #font-face rules correctly? Do I have to write them myself to be sure?
Is there anything I can do to make this work better?
UPDATE: 2018-10-14. I have noticed that when I download the fonts so that they can be found locally, everything works. I suspect that this happens because the locally-installed font names follow a naming convention for the font variants that allows the browser, Print Preview, and pandoc to find them. I would really appreciate it if a few people would confirm that the naming convention solves the problem. In that case, I could tweak the #font-face rules to load the fonts from fontlibrary.org so that I don't need to install the fonts locally.
I believe that this is a result of how Fontlibrary shares their fonts. If you look at the file https://fontlibrary.org/face/hk-grotesk (which is the link containing the font face css) at the very bottom you will see a section marked "The following rules are deprecated."
If you use the font names from that section (i.e. "Hanken Grotesk") and not the special names (like "HankenGroteskBold"), then web browsers seem to find the correct bold & italic forms. It's only using these special names that I find trouble (in my case with the Libertinus fonts).
Unfortunately, as these names are marked "deprecated", I don't know how long they will stay working. Nor, do I know why Fontlibrary setup this naming convention, which makes it more difficult to use the fonts than is necessary (in my opinion).
For some reason the font I'm trying to add won't add itself to my website. I'd rather not do this with an image, so is it possible the font is broken? Would it be possible to fix it with just the otf or ttf?
My code (in case I'm missing something):
#font-face {
font-family: urbanJungle;
src: url('UrbanJungleDEMO.ttf');
}
h1 {
font-family: urbanJungle;
font-size: 100px;
color: #34495e;
}
Additional details: This is in the latest Chrome, other custom fonts work.
In the network console the font is red and it says cancelled.
Live URL: http://codestack.co.uk/website/
The font was from Dafont, no extra processing applied by myself, it's in the same directory as the index page. All the relevant CSS is included.
You should use Font Squirrel font-face generator for this: http://www.fontsquirrel.com/tools/webfont-generator
Different browsers need different font formats, you only provided one. The generator will convert your font to all the formats needed and give you a CSS file too, with no hassles.
You are using only TrueType font, IE support only *.eot fonts. And you are missing a lot informations. It is always better to use font stack instead of using single font, if first font went missing css use immediate next font on the list (called font-stack).
Here is an interesting article about #font-face by Paul Irish : Bulletproof #font-face Syntax
#font-face{
font-family:MyFont;
src:url(../font/MyFont.eot);
src:local('?'),
url(../font/MyFont.woff) format("woff"),
url(../font/MyFont.otf) format("opentype"),
url(../font/MyFont.ttf) format("Truetype"),
url(../font/MyFont.svg#myfont) format("svg");
font-weight: normal;
font-size:normal;
}
body{
font-family: "MyFont", Verdana, sans-serif; /* Font stack */
}
My website is not showing the appropriate font, PT Sans.ttc. I checked on other browsers and it works fine.
www.farmap-ux.com. Below is CSS code.
#font-face
{
font-family: PT Sans;
font-family: font-family: 'PT Sans', sans-serif;
src: url("http://fonts.googleapis.com/css?family=PT+Sans")
}
So it works on everything like I said (Chrome, Safari, even Opera!) Any ideas? I've tried to find .woff files for the font but I don't think it's in my Font Book.
Maybe it's because your #font-face declaration isn't valid at all. It should be something like:
#font-face
{
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
However, it's even better to use the CSS file provided by google:
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans">
If you want to stick to a CSS import use
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
You should really check your css! The syntaxe is miles away from correct.
Also, http://fonts.googleapis.com/css?family=PT+Sans is already a css file!
what you should do is import is put it directly into the <head> your html using the link tag.
Have a look at this example: http://www.w3schools.com/tags/tag_link.asp, or just add the following to your html file as said before.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans">
Following the directions at Google Webfonts should fix your problem.
First, make sure you're including the Google CSS necessary to reference the font files. You have the option to include a LINK tag in your HTML, a #import directive in your CSS, or some Javascript. I recommend the LINK tag for maximum browser compatibility:
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
When adding this CSS to your site, Google will automatically determine the correct font type to use for your browser. Not all browsers use WOFF files. Older versions of IE use EOT files, some browsers prefer SVG or TTF. Google is able to sniff for the browser type and modify the included CSS as necessary.
After Google's CSS is included, you only have to reference the font family in your CSS where you want the font to appear.
font-family: 'PT Sans', sans-serif;
That's the only CSS necessary. Remove all the other CSS you linked… as mentioned in the other answers your CSS has some errors.
Try:
#font-face {
font-family: 'PT Sans';
font-weight: normal;
src: url("http://fonts.googleapis.com/css?family=PT+Sans");
}
I have a really bad conflict with using google-webfonts.
OK here is the code:
This is in head:
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
And this is in the css-file:
body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }
"Oswald" is a font-family of 3 fonts:
book (300)
normal (400)
bold (700)
As you can see.. i've loaded only the bold-face (700). (you can see it in the query)
And it works till here BUT …
THE PROBLEM IS:
I have a desktop-version of the 3 fonts (300,400,700) installed on my computer and as long as these fonts are activated … the browser shows me the wrong font-weight (400) in my html-document.
OK. The problem is that in my css 'Oswald' takes the localfont and not the webfont. But the local font "Oswald" is "Oswald normal". I don't know why google is calling it 'Oswald' instead of 'Oswald Bold'. So I don't know how to fix this problem.
I don't want the css to point at the local-font .. i want it to show always the webfont … because of the right font-weight!
Do you have any ideas?
Please?
Possible to Rename the webfont-call?
You can edit the CSS #font-face rule to fit your needs instead of just loading the automatically-generated one from Google. Basically the issue is that their rule prefers local versions (src: local('Oswald Bold'), local('Oswald-Bold'), ...). The corrected verison would look like:
#font-face {
font-family: 'WebOswald';
font-style: normal;
font-weight: 700;
src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Just add that to your CSS manually, and use font-family: 'WebOswald'; when you want to use Google's Web version of the font.
I hope that helped!