I have problem with proper font rendering in html and wkhtmltopdf. I am using Muli font in the whole body (download from Google: https://fonts.google.com/specimen/Muli), but some parts are cut out (image below where zeros are not well rounded). I do not see the same effect with Roboto or Montserrat. Here is my code:
<html>
<head>
<style>
body {
font-family: 'Muli', sans-serif;
}
.thin {
font-weight: 200;
}
.light {
font-weight: 300;
}
.regular {
font-weight: 400;
}
.bold {
font-weight: 600;
}
.extraBold {
font-weight: 700;
}
.black {
font-weight: 800;
}
.extraBlack {
font-weight: 900;
}
</style>
</head>
wkhtmltopdf -L 0 -R 0 -T 0 -B 0 --page-width 2933px --page-height 5194px --disable-smart-shrinking
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
body {
font-family: 'Muli', sans-serif;
}
h1 {
font-size: 110px;
font-weight: 900;
color: #00b3b8;
}
h2 {
font-size: 110px;
font-weight: 700;
color: #001fb8;
}
h3 {
font-size: 110px;
font-weight: 600;
color: #b88800;
}
h4 {
font-size: 110px;
font-weight: 400;
color: #b82a00;
}
h5 {
font-size: 110px;
font-weight: 300;
color: #ad00b8;
}
h6 {
font-size: 110px;
font-weight: 200;
color: #000000;
}
</style>
</head>
<body>
<h1>100</h1>
<h2>200</h2>
<h3>300</h3>
<h4>400</h4>
<h5>500</h5>
<h6>600</h6>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
There are a couple of things that could be causing issues. Or possibly a combination of serveral.
Make sure you're specifying font sizes in pt or em NOT px. The reason for this is kerning tables (usually built into the font) combine with font-smoothing and converting pixel to print sizes can cause artifacts.
In the past I've experienced the Google Font downloaded to my computer was physically different than what is streamed via javascript from the service. I assume they don't get updated at the same time. If you can try letting Google's server provide the font each time. Or can you try finding the files elsewhere? (this sounds like a corrupted font file)
If you are self-hosting the fonts, make sure that your server is sending them with the correct MIME type. Here's a list of what they should be. You can change that in IIS or your .htaccess file depending on the server environment you have. I know this seems strange since it's only one font, but the other's you've tried could be loading a different font type (ttf, otf, etc) that what the browser is getting for Muli
If none of that helps could you post more of you're CSS including how the fonts are loaded and how they're set to display (size, smoothing, line-height, etc)?
Related
I have a springboot application which has an endpoint which would load a freemarker template(abc.ftlh). It looks like this
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;500&display=swap" rel="stylesheet">
<style type="text/css">
.topRight {
position:absolute;
top:0;
right:0;
}
.data-body {
font-family: 'Roboto', sans-serif;
background-color: #f7f7f7
}
.option, .span {
font-size: 14px;
}
.p {
font-weight: 300;
font-size: 16px;
color: #333333;
line-height: 1.22;
}
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
</style>
</head>
<body class="data-body">
<br /><br />
<div class="topRight">
</div>
<div>
${databody}
</div>
</body>
</html>
the variable databody is being set from the backend. It has content like
<h1>Something</h1>
<h2>foo bar</h2>
css is applied to elements which are present in the template for example data-body and topRight is applied. But css is not applied for the elements which are rendered from backend. For example <h1>, <h2> are not applied.
How can I get this working.
It's simply because in your css you have .h1 instead of just h1, etc. The .h2 selector matches <... class="h1">, not <h1> itself.
Also, in CSS issues it never matters if something was generated by FreeMarker or not, as the browser can't tell the difference.
.h1 means that you want to select all class="h1" elements.
.h1, .h2 {
font-weight:normal;
font-size: 18px
}
.h3 {
color: #9b9b9b;
font-size: 16px;
font-weight: 300;
line-height: 1.22;
}
You can select the <h1> directly and apply css to it via h1{...}
It would be easier if you place these css files under resouce/static folder, and reference in the HTML head.
There are couple of issues here.
The css for html tags should be named without the preceding dot.
For example .h1 should be h1
Most important thing here is to tell freemarker to not not escape the value. By default auto escaping is enabled.
If the string value to print deliberately contains markup, auto-escaping must be prevented like ${value?no_esc}.
So the solution here is ${databody} should be ${databody?no_esc}
More on this topic here https://freemarker.apache.org/docs/dgui_quickstart_template.html#dgui_quickstart_template_autoescaping
I made a website with GitHub and the font I used (Lato) only seems to be showing on Google Chrome, but just on macOS and Android phones. Safari, iPhones, and Windows laptops display Times New Roman instead. I'm not sure what the issue is, since I picked Lato for being a Google font? Shouldn't it work across all browsers/operating systems/devices? Am I supposed to upload the font folder in my GitHub repository? Also don't know if it matters, but my code used "font-family" to call in Lato. Should I not be using that?
EDIT: adding my code for reference
HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<script src="https://kit.fontawesome.com/3fdadcecb8.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
</head>
CSS
.title {
font-family: "Lato";
text-align: left;
}
.text {
font-family: “Lato”;
font-weight: 300;
text-align: left;
}
.bold {
font-family: "Lato";
font-weight: 700;
}
You need to add the following into your <head> tag:
<link href='http://fonts.googleapis.com/css?family=Lato:300,700,900' rel='stylesheet' type='text/css'>
Then your CSS should be as follows:
.body {
font-family: "Lato";
}
.title {
font-weight: 900;
font-size: 3em;
}
.text {
color: black;
font-weight: 300;
}
.bold {
font-weight: 700;
}
Here is a working example: https://codepen.io/fraggley/pen/YzyaNJa
I FIXED IT.
Basically, what caused the issue was enforcing https on my website. The font was linking to an http, so I just changed it to https and now it works :D
I have the Inter font. I got it from Google Fonts. But It can't be shown. Seems like arrow doesn't see the font. You can see it.
Instead of the same arrow on Google Inter Font page
css:
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Inter', sans-serif;
}
</style>
</head>
html:
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
What is wrong?
if you want to use custom fonts you should copy these fonts to your project folder, after that use this code of CSS to add them to your document
#font-face {
font-family: Inter;
src: url(sansation_light.woff);
}
replace this src with your font address you copy in your project
just use this code:
It's work for me
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">
<style>
body{
font-family: Inter, sans-serif;
}
p {
font-family: verdana;
font-size: 20px;
}
div{
font-family: Inter;
font-weight: 400;
font-style: normal;
font-size:x-large;
}
</style>
</head>
<body>
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
</body>
</html>
At the top of my code I have:
< link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" >
And in my CSS I have:
font-family: 'Merriweather', ;
But it is not showing up. I'm not sure what the reasoning is. It seems so simple and yet nothing is working.
Any help would be appreciated.
Here is the top of my HTML:
<link rel = "stylesheet"
type = "text/css"
href = "stylesheet.css" />
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
<head>
<title>Jesse | Personal Chef </title>
<meta charset="UTF-8">
<meta name="description" content="Jesse Personal Chef">
<meta name="keywords" content="Food, Chef, Wilmington, NC, North Carolina Food, In Home Chef, Personal Chef, Chef For Hire, Jesse,">
<meta name="author" content="Cal & Jen T.">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is my CSS, saved in as stylesheet.css:
<style>
/* HEADERS ~~~~~~~~~~ */
h1 {
font-family: 'Merriweather', ;
text-align: center;
font-size: 2.7em;
color: 000;
font-weight: 500;
letter-spacing: 2%;
line-height: 40px;
padding-bottom: -100px;
margin: 2%;
}
.subtitle {
font-family: 'Merriweather', ;
text-align: center;
font-size: 1.04em;
color: 000;
font-weight: regular;
margin: 1;
line-height: 1px;
padding-bottom: 60px;
}
</style>
Thank you
One little fix needed:
Change this:
font-family: 'Merriweather', ;
To this:
font-family: 'Merriweather', serif;
The serif portion is the fail-over font in case it can't find Merriweather.
Test it in this snippet:
<html>
<head>
<link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" />
<style>
div {
font-family: Merriweather, serif;
}
</style>
</head>
<body>
<div>Test</div>
</body>
</html>
You can also just apply the font-family style to the <body> tag and all child elements will inherit that font-family.
Check fonts link:
if you use #font-face rule check link to the folder with fonts and be sure that font files is present in this folder, also check fonts name in #font-face rule and in font-family they must be equal;
if you use CDN - check the link to the CDN;
Open Dev Tools in your browser(Ctrl(Command) + Shift + I) and in the tab Network check whether your font is downloaded or not: https://prnt.sc/r9x8ab;
I can't see what is wrong with this. I have 2 HTML sheets and a CSS sheet.
The first HTML sheet (index.html) is like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Olive</h1>
Enter
</body>
</html>
The second HTML sheet (page1.html) is this:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
And the CSS external sheet:
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
The issue is that the id from the second HTML sheet (page1.html) doesn't work. I don't know why. I don't know if it's the syntaxis or what.
The body attributes are working in page1.html, but the id attributes don't. The <p> element only appears with any style. Could someone tell me what's wrong with this?
Few tips for debugging... try to make cache refresh few times when you have modified your css styles (with chrome and windows: ctrl+shift+r) then if it doesnt work try to use code below and cache refresh again:
#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied.
Code:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
background-color: olive;
}
h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}
a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}
#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}
</style>
</head>
<body>
<div>
<p id="prenav">Olive</p>
</div>
</body>
</html>
Edit:
Solution was to put .css stylesheet to correct folder.
Cheers.
Not sure if this is the issue, but your first line should be:
<!DOCTYPE html>
If you don't declare it properly, your browser could render in quirks mode which can result in all sorts of odd behavior.
The syntax is correct, but maybe the script is any command that changes the style for this id.