I have downloaded the Open Sans Condensed Light font from Google Web Fonts, and also attached their CSS code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=greek-ext&v2'
rel='stylesheet' type='text/css'>
But every browser other than Firefox, shows exact font family i.e. it looks fine in IE, Chrome, Safari, but not in Firefox.
Here is my CSS and the HTML code:
h2.title-border {
border-bottom: 1px solid #000;
margin-top: 10px;
line-height: 45px;
margin-bottom: 15px;
}
.heading-sub {
background: #000;
font-family: "Open Sans Condensed Light";
font-weight: normal;
text-transform: none;
font-size: 32px;
padding: 0 15px;
margin-bottom: 0px;
color: #fff;
border-bottom: 1px solid #000;
}
HTML:
<h2 class="title-border"><span class="heading-sub">About Us</span></h2>
Can you please suggest, how should I fix Firefox regarding this?
According to the API, you should be calling the font like this
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&v1' rel='stylesheet' type='text/css'>
The light variant needs to be called specifically, i.e. :light.
The other browsers are probably ignoring the Light in your stylesheet and giving you the Open Sans Condensed you asked for in the API call.
See here
Condensed is the "style" of the "Open Sans" font, not part of the name. This worked for me.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:Condensed" />
.selector
{
font-family:'Open Sans';
font-style:condensed;
}
I must have tried a gazillion variations to get this work. I am trying to get Open Sans Condensed embedded into a pdf via WKHtmlToPdf.
I think it is important that you download and install the Open Sans Condensed ttf directly from google and install it. It is also important to reboot to allow other services access after install. I downloaded the ttf from font-squirrel originally and condensed was listed as "Open Sans" in windows/fonts, which is wrong, if you look after the google install it is listed as "Open Sans Condensed Light" so even google's local('Open Sans Cond Light') script is wrong.
As mentioned before you need to be explicit with the stretch and weights, so this is what has worked for me:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans');
}
#font-face {
font-family: 'Open Sans Condensed';
font-stretch:condensed;
font-style: normal;
font-weight: 300;
src: local('Open Sans Condensed Light');
}
##font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}
To make the font work for IE8-IE9 you have to use a EOT font file,
On this page you can download the font as a webkit:
http://www.fontsquirrel.com/fonts/open-sans-condensed
You have to refer to Google CSS. See their QuickStart Guide.
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed">
You probably ought to use font-stretch: condensed (see Mozilla docs).
For example, change your .heading-sub CSS as follows:
.heading-sub {
background:#000;
font-family:"Open Sans";
font-stretch: condensed;
font-weight:300;
text-transform:none;
font-size:32px;
padding:0 15px;
margin-bottom:0px;
color:#fff;
border-bottom:1px solid #000;
}
Make use of Google Fonts Open Sans in the various styles:
Click on this link -> https://www.google.com/fonts/specimen/Open+Sans and then click on Open Open Sans in Google Fonts.
Under option 3 and 4 you will find the html link to use in your header as well as the CSS style usage.
for Firefox:
My problem solved after I added to CSS this line:
font-stretch: condensed;
You should use Google generated code, mine was:
http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300' rel='stylesheet' type='text/css'>
as I am using 700 and 300 weights.
CSS:
font-family: 'Open Sans Condensed', sans-serif;
font-weight:700;
font-stretch: condensed;
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps - at least for me it was a major pain in the behind.
It doesn't works for me because the #import should be the first line in style.
Works:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
.myStyle {
}
</style>
Doesn't works:
<style>
.myStyle {
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
</style>
Related
When i open devtools in chrome or firefox, find my .page-header__hero-motivation and see render font is Comic Sans, not Caveat.
#font-face {
font-family: "Caveat";
src: url("../fonts/Caveat-Regular.woff2") format(woff2),
url("../fonts/Caveat-Regular.woff") format(woff);
font-weight: 400;
font-style: normal;
font-display: swap;
}
.page-header__hero-motivation {
font-family: "Caveat", "Comic Sans MS", cursive;
font-size: 18px;
color: #8E80A9;
}
My website tree
index.html
css -> style.css
fonts -> Caveat-Regular.woff2 & Caveat-Regular.woff
take this font from googlefonts and convert in online to woff&woff2.
chrome devtools
It seems that Comic Sans is the generic family not the font family. Don't set both, just set either font or generic family, also see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
Tell me if it works, otherwise post the entire code please.
OMG, i kill about 5 hours on that...
I forgot quotes in format #font-face
wrong
format(woff2)
right
format("woff2")
I am using font "Signika" for my web app. The design is provided in Adobe Illustrator files where they have used the font "Signika Semibold".
First method:
I applied font-family: Signika Semibold but it works as semi-bold only on Chrome. Firefox and IE display the text in normal font weight.
JS Fiddle
HTML
<p class="semi">
Abcd Efgh
</p>
CSS
.semi{
font-family:'Signika Semibold';
font-size:14px;
}
Second method:
I applied font-family: Signika and gave font-weight: 500 for semibold. However it appears as bold instead of Semibold on Chrome.
JS Fiddle
HTML
<p class="weight">
Abcd Efgh
</p>
CSS
.weight{
font-family:'Signika';
font-weight:500;
font-size:14px;
}
Is there a workaround for fixing this issue?
Some screenshots would be awesome. Fonts do tend to appear heavier in Webkit browsers because they use sub-pixel antialiasing for font smoothing. Try setting -webkit-font-smoothing: antialiased; and it should start looking similar to how it looks in other browsers.
Have a look at this page for some more details.
There is a caveat to using this though: Generally, you should let the browser handle this. You'll notice that the MDN page mentions this is a non-standard feature.
If you're interested in how these different smoothing techniques produce different outputs, check this out.
SOLUTION
Used google fonts with required styles:Normal(400), semi-bold(600), bold(700))
Link of Google Font
Imported the font by including this code in HEAD section of HTML
<link href='https://fonts.googleapis.com/css?family=Signika:700,400,600' rel='stylesheet' type='text/css'>
Then in CSS,
For Normal
font-weight:400;
For Semi-bold
font-weight:600;
For Bold
font-weight:700;
By using this method, fonts on all browsers look alike.
Actually, your second JSFiddle had:
font-weight: 600;
Instead of 500.
Here's your fiddle updated.
http://jsfiddle.net/gbj7b1jp/1/
Now it's not bold.
Semibold usaly is font-weight:400;
However You scan specify Your font properties when importing fonts with #font-face:
#font-face {
font-family: Signika;
src: url(SignikaLight.otf);
font-style: normal;
font-weight: 100;
}
#font-face {
font-family: Signika;
src: url(SignikaRegular.otf);
font-style: normal;
font-weight: 300;
}
#font-face {
font-family: Signika;
src: url(SignikaSemibold.otf);
font-style: normal;
font-weight: 400;
}
#font-face {
font-family: Signika;
src: url(SignikaBold.otf);
font-style: normal;
font-weight: 600;
}
This is a known issue in CSS. Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work. You can have a look on this link(only runs in IE) and identify the best match of font style from the list is the easy hack to this problem.
http://www.cs.tut.fi/~jkorpela/listfonts.html
I have no problem displaying html pages on IE and Chrome using Open Sans Light, however when using Firefox, it does not understand this type of fonts.
This is a .css sections defining my fonts:
.txtName
{
margin-left: 18px;
font-size: 20px;
color: #0140be;
font-family: 'Open Sans Light' !important;
font-weight:normal;
line-height: 1.4em;
}
This is the part of html file that need to be displayed the same on IE, Chrome and FF:
<div class="txtName-Main">
<h1 class="txtName">Your pathway to success starts here</h1>
</div>
What can be the problem?
Thx
'Open Sans Light' is not a valid representation of the font-family. The 'Light' (300 weight) version of 'Open Sans' is:
In the head of your document:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
In your CSS:
font-family: 'Open Sans', sans-serif;
font-weight: 300;
I see a few suggestions, But what worked for me is loading my fonts with:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
and in .css I had to use the following definition:
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
So, instead of having:
font-family: 'Open Sans Light'
I used
font-family: 'Open Sans';
font-style: Light;
and it worked
it appears that all the browsers are somehow using different definitions for at least this font. i had it installed on my site and been trying to figure how to make it look descent in all browsers, not just chrome and opera - as all others, that is firefox, ie and safari had those fonts screwed. until accidentally i made firefox see the font ok, but then chrome and opera got screwed. so that was when i realized that actually assigning the same font in two different ways solves the problem: if the browser's ok with the first definition, it won't look at the next one, otherwise it'll go for the second one. ah, the code itself:
font-family: open sans condensed light, open sans condensed;
i used it for assigning fonts to different divs. cheers, hope this helps.
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
Goes in the <head> element and downloads light and regular fonts
In css style:
ul, p, h1, h2, h3, h4, h5, li, dd, dt, a{
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-style: normal;
sets up (most) elements for web-based font and a (local) fall back font. font-style: normal is default, so it is not required. (Font-style:Light is not valid property.)
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">
I am using wkhtmltopdf to convert HTML files in PDF format; it gives surprisingly good results, rendering the PDF exactly as WebKit would do.
I am using Google Web Fonts to give users the possibility to customize the appearence of the document they edited, offering them the possibility to choose between a few fonts. It also works perfectly in a browser.
Problem is, I don't get the Google Fonts working when converting such HTML files to PDF with wkhtmltopdf. I read other people had the same issue.
Could anyone please help me fixing this?
EDIT: declaring #font-face directly in the CSS does not work either.
To convert HTML to PDF by wkhtmltopdf try to avoid woff font face. Use the truetype format of the Google Web Fonts with base64 encode.
Recently I tried to use a Google web font from Google Web Fonts. In the browser it shows correctly but it doesn't show after converting HTML to PDF.
After searching the web extensively, at last, I found tools to encode fonts to the base64 format and also got CSS for #font-face.
Read the solution here.
A simple solution: Base64-encode your font and embed it in the CSS:
#font-face {
font-family: 'OpenSans';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
FontSquirrel can do this for you through the advanced options of their Webfont Generator; Google and other fonts can be encoded with this tool.
I've used this solution with pdfkit and wicked_pdf, which work through wkhtmltopdf, so I presume this should work with the native wkhtmltopdf as well.
I had this same problem and solved it by downloading the fonts and running it off of a local file in my web server with this font-face declaration:
#font-face {
font-family: 'PT Sans';
src: url( '/public/inc/fonts/PTS55F-webfont.eot');
src: url( '/public/inc/fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url( '/public/inc/fonts/PTS55F-webfont.woff') format('woff'),
url( '/public/inc/fonts/PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I was able to find this font on Font Squirrel, but your mileage may vary.
I think what happens with the fonts off of Google is that it's trying to load only the format that it thinks this browser wants, which for WebKit is woff (I believe). But wkhtmltopdf can't embed a woff font in a PDF, and so defaults back to sans-serif. By declaring all of them, the TrueType font is included, which is what the PDF actually uses.
Also, you need to define the font you want used as the first one in any font-family CSS definition or wkhtmltopdf will just ignore it.
I've just tested that using the #importnotation works:
<style>
#import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>
I'm using django-wkhtmltopdf version 2.0.3
UPDATE: still working in django-wkhtmltopdf 3.3.0
I've been struggling with this for about two days now, my advice to you if none of the answers above work for you:
Install the font (ttf) in the machine that hosts the webserver and just require it in the css just like you would do with a common font.
body{
font-family: 'Lato';
}
Now wkhtmltopdf should be able to include the font
I must have tried a gazillion variations to get this work (from local). I am trying to get Open Sans Condensed embedded into a pdf via WKHtmlToPdf.
I think it is important that you download and install the Open Sans Condensed ttf directly from google and install it. It is also important to reboot to allow other services access after install. I downloaded the ttf from font-squirrel originally and condensed was listed as "Open Sans" in windows/fonts, which is wrong, if you look after the google install it is listed as "Open Sans Condensed Light" so even google's local('Open Sans Cond Light') script is wrong.
As mentioned before you need to be explicit with the stretch and weights, so this is what has worked for me:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans');
}
#font-face {
font-family: 'Open Sans Condensed';
font-stretch:condensed;
font-style: normal;
font-weight: 300;
src: local('Open Sans Condensed Light');
}
##font-face { font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');}
In my case I just had to add this option
--javascript-delay 1000
and Google Font text started to show up.
[wkhtmltopdf 0.12.4 (with patched qt)]
The following works for me. Notice the inclusion of extended character sets (if you need them):
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese);
</style>
Make sure you're not declaring what font you are printing with in your print stylesheet.
Using #import was key to getting Google Fonts working with wkhtmltopdf but then I had issues with CJK (Chinese, Japanese, and Korean) characters not appearing. The solution was to switch to version 2 of the Google Font API (https://fonts.googleapis.com/css2).
Below is the code snippet I inserted into my HTML to get all the languages I needed to be supported via a test PDF. Keep in mind the performance implications of loading dozens of remote fonts.
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans";
[lang="sq"] {font-family: 'Noto Sans', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic";
[lang="ar"] {font-family: 'Noto Sans Arabic', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali";
[lang="bn"] {font-family: 'Noto Sans Bengali', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian";
[lang="ka"] {font-family: 'Noto Sans Georgian', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati";
[lang="gu"] {font-family: 'Noto Sans Gujarati', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew";
[lang="he"] {font-family: 'Noto Sans Hebrew', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari";
[lang="hi"] {font-family: 'Noto Sans Devanagari', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Serif+Tibetan";
[lang="bo"] {font-family: 'Noto Serif Tibetan', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+Gurmukhi";
[lang="pa"] {font-family: 'Noto Sans Gurmukhi', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu";
[lang="ur"] {font-family: 'Noto Nastaliq Urdu', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+Tai+Viet";
[lang="vi"] {font-family: 'Noto Sans Tai Viet', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC";
[lang="zh-hans"] {font-family: 'Noto Sans SC', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC";
[lang="zh-hant"] {font-family: 'Noto Sans TC', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP";
[lang="ja"] {font-family: 'Noto Sans JP', sans-serif !important;}
</style>
<style>
#import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR";
[lang="ko"] {font-family: 'Noto Sans KR', sans-serif !important;}
</style>