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).
Related
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>
I imported Rubik font using this code.
<link href='https://fonts.googleapis.com/css?family=Rubik' rel='stylesheet'>
When I use font-weight:500 or font-weight:800, etc working except font-weight:500
How can I do this?
Someone says importing default Rubik font family, will not import font-weight 500.
Anyhelp would be appreciate.
you may try this link :
<link href='https://fonts.googleapis.com/css?family=Rubik:500,500i' rel='stylesheet'>
By the way when you open the link https://fonts.googleapis.com/css?family=Rubik:500,500i in your browser you can see the styles that are included.
And when you don't specify anything you will only get the regular one (font-weight:400)
All the possibilties for this font are : 300,300i,400,400i,500,500i,700,700i,900,900i
You need to include the required font-weights on your link's href property. Such as :500,800 to get font-weights 500 and 800.
It seems Rubik does not support font-weight 800, so you're not going to be able to get it anyway. Instead you could use 700 or 900 fonts. So the value of href should be something like https://fonts.googleapis.com/css?family=Rubik:500,700.
div {
font-family: 'Rubik', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Rubik:500,700" rel="stylesheet">
<div style="font-weight: 500">
Hello World!
</div>
<div style="font-weight: 700">
Hello World!
</div>
Just import it with the font weights you want, for example:
https://fonts.googleapis.com/css?family=Rubik:400i,700
You have an option in Google Fonts to choose font weight:
And after clicking:
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 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 have some (test) HTML like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Monospace</title>
<style>
tt { font-family: monospace; }
</style>
</head>
<body>
<h1>Test Monospace</h1>
<p>This is normal text</p>
<p><tt>This is monospaced text</tt></p>
</body>
</html>
When I display this in IE the monospace text uses Courier New instead of the font I have configured in IE. If I do nothing other than delete the <style>...</style> block, it correctly uses the configured font.
It only does this for IE, not FF or GC. IE 9 on Windows 7.
It does this regardless of where the style's configured, including a separate stylesheet or using a style attribute.
The real problem is that specifying the font-family and font-size is key to fixing the browser's problems with monospace text using the following styles:
/* monospaced sizes are horribly broken in browser default stylesheets */
code, kbd, pre, samp, tt {
font-family : monospace,monospace; /* Chrome (but note that this makes IE use "Courier New" for some strange reason, as does plain monospace.) */
font-size : 1em; /* Firefox, IE,Opera */
}
Does anyone know how to stop IE from doing this?
monospace is not a specific font familiy. Exactly like serif or sans-serif, which are generic family definitions.
font-family: monospace; just tells the browser to use the default "monospaced font", which in this case is Courier New. See also this resource.
EDIT:
If you omit the font-family rule for tt in your CSS, IE9 seems to display the custom set plain text font. Please see this fiddle: http://jsfiddle.net/sVCwd/1/
Hope this helps.
It seems that in IE, monospace means Courier New. Changing the IE settings for “plain text font” affects the default font for some elements, like tt, but it does not change the meaning of monospace. In an old discussion someone who seems to know what he says writes: “(Please, no comments about the serif and monospace fonts which can be
selected using Tools, Internet Options. They have nothing to do with the
default CSS generic fonts.)”
If you want, as an IE user, to change the meaning of monospace, I suppose you would need to find an entry in Windows registry for it (I was unable to find it in Windows 7 – could not find IEFixedFontName for example).
But if you instead just want some elements rendered in a monospace font of your preference (which is mostly the same thing as far as practical effects are considered), you could set up a user style sheet with content like
code, kbd, pre, samp, tt, xmp, listing, plaintext {
font-family: Consolas !important;
}