I'm using dompdf to turn HTML code into pdf. I'm using Google fonts and are importing them like this:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap');
When i use them in my css with:
h1, h3, .text {
font-family: 'Open Sans';
font-weight: 400;
}
i get my text in the right font. Now when some of the text is bold like the headings or certain pieces of text that are bold, they don't get the right font weight. When i change the font-weight to above 400 they don't work anymore.
Does anyone know how to use multiple font weights in dompdf?
Until the release of Dompdf 0.8.4 numeric font weights were not supported. If you're using a version of Dompdf prior to 0.8.4 you can not use fonts defined with numeric weights.
Additionally, though numeric font weights are supported, there appears to be a bug in how Dompdf parses the Google Font URL when using with an #import rule. (ref issue 2054). You can work around this issue by using a link element instead.
Something like the following should work:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
<style>
.opensans {
font-family: 'Open Sans';
font-weight: 400;
}
</style>
</head>
<body>
<h1 class="opensans">The quick red fox jumped over the large brown log.</h1>
</body>
</html>
Related
i have problem with font-weight, for "EN" languages it is working fine, but when I do the same thing with with my lang (SK) some characters have different font weight. Font is 'Open Sans'. When I try these chars in font.google viewer there is no problem. Actual font-weight is 300, on 400 there is no problem but I want it to be thin. The problem occurs on some Chrome(Mobile),Edge, IE. Any ideas?
Open Sans on fonts.google
Open Sans on my website
link to page: thomaskovo.github.io/hotel-it/IT_Bussiness_Solutions/hosted_exchange_office_365.html
body{
font-family: 'Open Sans', sans-serif;
font-weight:300;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
This is a testing text.
Mačka žena ťava šošovica
<hr>
Open this in Edge or IE
</body>
</html>
The font used doesn't contain all glyphs. Due to font fallback, the missing glyphs fall back to some other font.
You only load the Latin glyphs. You also need to load subsets that contain the needed glyphs:
<link href="https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext" rel="stylesheet">
Note: subset=latin-ext.
I took this snippet form fonts.google.com on the embed AND customize tabs (bottom right).
I am using Laravel 5.1 SnappyPDF wrapper, which is using WKHTMLTOPDF library. I am trying to include some custom google fonts for my PDF file, but those fonts are not working in generated PDF file.
I tried, converting fonts into Base64 and also tried to include fonts by absolute URL and relative URL, also tried many answers available at stack overflow but none of them worked for me. How to fix this issue.
//Calling fonts
#font-face {
font-family: Roboto Condensed;
src: url("/fonts/RobotoCondensed-Regular/RobotoCondensed-Regular.ttf");
}
#font-face {
font-family: 'Open Sans';src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
}
#font-face {
font-family: 'Open Sans Semi Bold Italic';
src: url("/fonts/OpenSans/OpenSans-SemiboldItalic.ttf");
}
//implenting fonts
.report-page2-col-wrapper .col-heading{
font-family:"Open Sans Semi Bold Italic";
font-size:12pt;
line-height:17pt;
}
see difference in screen shots
1) This is web browser HTML version, looks find and fonts implementing properly
2) This is Generated PDF version, fonts not applying properly
There are multiple solutions to accomplish this:
1) If you use google font, try below:
Use <link> to include google font
<link href='http://fonts.googleapis.com/css?family=YOURFONTFAMILY' rel='stylesheet' type='text/css'>
Use <style> to apply font effect
<style type = "text/css">
p { font-family: 'YOURFONTFAMILY'; }
</style>
2) Encode font with Base64 encode tool and use it in css
#font-face {
font-family: 'YOURFONTFAMILY';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
Hope one of the above is your solution!
Taken ref: use custom fonts with wkhtmltopdf, helvetica font not working in wkhtmltopdf
In addition to AddWeb, you have to add to HTML header META with unicode information
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
I have installed a Wordpress plugin, called IgniteUp and I want to emphasize some words by using a heavy weight (900). But no matter what I try, the thickest font weight I get is Bold (this works when I use <strong>). I tried using <bolder>, <thicker> and others but it's not working.
I'm using the font Lato. Thanks!
font-weight: 900 will only work by first referencing the font with that weight - from Google Fonts this would be something like:
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
Then you can write a CSS style like:
strong {
font-family: 'Lato', sans-serif;
font-weight: 900;
}
I have got this annoying problem where I cant seem to find a way to use specific styles from the ACTUAL font family and NOT with css or html styling.
In my case I am linking in to the html Google's Webfont: Lato. Now I only need the styles Normal400 and Bold700Italics.
Naturally, when you select the fonts on googlefonts, it generates the codes automatically. I copy and paste both codes one in my html doc and the other in the css. but I can't find out how to use the styles Normal400 and Bold700Italics of the font lato.
What I am getting at is the same as using a FONTS' 'italic' and 'bold' styles rather then an emphasis or bold tag in html to style. There is a massive difference in the outcome of the font's aesthetics.
Is there a way of doing this? If so, do I have to use the #fontface rule in my css or is there another way round it as I am scared of using this rule sometimes.
I have looked everywhere, even on google's forums and they all give the same answer: "font styling with css or html."
Link to the fonts:
<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic' rel='stylesheet' type='text/css'>
Declare the font in your css:
.Lato-italic-700 {
font-family: 'Lato', arial, sans-serif;
font-style: italic;
font-weight: 700;
}
Place the class on the element you want it to be displayed on:
<p class="Lato-italic-700">This is Bold 700 Italic text</p>
It’s not clear what the problem is. But basically, when you have used a link element, as suggested by Google, to use Lato in regular and bold italic typeface, then any text for which you declare font-family: Lato, will appear
a) in Lato Regular, if its font weight and font style are normal
b) in Lato Bold Italic, if it has both font-weight: bold and font-style: italic applying to it
c) something else in other cases, possible e.g. synthetically bolded Lato Regular, if font weight has been set to bold but font style is normal.
For example, the following produces first Lato Regular, then Lato Bold Italic. You can (and normally should) use other markup or CSS instead; this is just a simplistic example:
<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic'
rel='stylesheet' type='text/css'>
<style>
body { font-family: Lato; }
</style>
Hello<br>
<i><b>Hello</b></i>
If problems remain, please post your HTML and CSS code and explain what you mean by “font's style not html or css font style” and how you can tell the difference from the visual appearance.
I'm using the Google webfonts API to embed Droid Sans on a page. All is fine, except for the descenders (i.e. the dangly bits on y, g, etc). The latest versions of Firefox, IE and Chrome on my Windows Vista box are all cutting the bottom off.
<!DOCTYPE html>
<html>
<head>
<title>Droid sans descender test</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
<style type="text/css">
body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
h1, h2, h3 { margin: 1em 0; font-weight: normal; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1em; }
</style>
</head>
<body>
<h1>A bug ran under the carpet anyway</h1>
<h2>A bug ran under the carpet anyway</h2>
<h3>A bug ran under the carpet anyway</h3>
</body>
</html>
The above code looks like this:
(source: thinkdrastic.net)
I've tried line-height, font-size, padding etc to no avail. I had some success with font-size-adjust, but the last time I checked it was Gecko only. Does anybody know of a fix for this?
With some help from #adamliptrot, I discovered that Droid Sans' descenders are absolutely fine at a few precise pixel sizes: 18, 22 and 27px. I adjusted my em's accordingly:
h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }
Not ideal, but it works:
(source: thinkdrastic.net)
Although your question is in relation to the Google Web Fonts API, the principle of my answer beneath is the same.
If the descendants are being cut-off when serving a TrueType Font, the most likely cause is that OS/2 metrics are incorrectly set (negatively) on the font.
The values that may need adjustment are WinAscent & WinDescent.
A quick and dirty fix would be to adjust these both to 0.
This can be done using Font Forge. Once the font is opened in FontForge, you can gain access to these parameters via the 'Font Info' dialogue.
I have checked the referenced ttf files, and even in windows font viewer the descenders are being cut. Seems more of an issue with the font being served rather than with your styles.
If you're using Font Squirrel, it seems the issue with the sans variant has been sorted, but the issue remains with Font Squirrel's serif variant.
For a fix for the serif variant, go to the Web Font Generator and load the font files you need (do not rely on the package they provide).
Click the 'Expert' radio button, leave all of the settings but under 'Advanced Options' change the 'Em Square Value' to '2162' and generate the font.
This renders the font properly at all sizes
we've been having the same problem...we tried using font squirrel. we tried using google web fonts. The font kept cutting off "hanging" letters like g. Also, the google hosted version did not appear as true and clear as the other ones. The font seemed a bit choppy.
Our solution:
We hosted the font ourselves without formatting it for the web. Then we converted the ttf file to an svg, .eot, and .otf, and uploaded those as our fixes for ie and mozilla etc.
If the tip at the top - changing font-size to....
h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }
doesn't work for you, then add "line-height" to the element that is cutting off the descenders. ``
I'm just guessing here, but I've had the same problem occur when fonts get substituted. I just wonder if this occurs when say a font substitution replaces a 1024em font with a 1000em font or vice-versa. I had some major descender cut-off using a 2048em font. Might be worth investigating.
I had a similar dilemma and the line-height fix worked for me (i.e. I added this code to the Custom CSS section):
h2 { line-height: 140%; }