I am sending mail using PHPMailer and Gmail doesn't seem to recognize the font "Kaushan Script" in heading while it successfully recognizes "Roboto Condensed" in rest of the body. Both are Google Fonts. Still, gmail is able to recognize one and ignores the other and places it's own random font. Inspecting element in gmail still shows the font name I used. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<style>
.mail-head, .mail-foot {
background: linear-gradient(315deg, #ee9617 0%, #fe5858 74%);
padding: 10px;
width: 100%;
box-sizing: border-box;
color: #fff;
font-size: 2rem;
font-family: "Kaushan Script", cursive;
}
.mail-foot {
font-size: 14px;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
}
.mail-body {
font-size: 1rem;
font-family: "Roboto Condensed", sans-serif;
padding: 20px;
line-height: 1.5;
border-right: 1px solid #ee9617;
border-left: 1px solid #fe5858;
}
.logo {
width: auto;
height: 2.5rem;
}
.logo-title {
position: absolute;
top: 1rem;
left: 4.5rem;
}
.otp {
color: #f69;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="mail-head">
<span class="logo-title">Site Name</span>
</div>
CONTEXT
As far as I know Gmail doesn't support all Google Fonts or webfonts. In April 2018, Gmail released an updated interface for their webmail client. This new interface uses a limited list of popular webfonts including Google Sans and Roboto. (This explains why Roboto works is your case).
PROBLEM
I haven't found official documentation on this nor a list of the Google fonts or webfonts supported Gmail's interface.
ALTERNATIVE
These are the fonts supported by Gmail. Try to change "Kaushan Script" for any of them to confirm "Kaushan Script" is not supported by Gmail. Check if you can use any of these fonts to replace "Kaushan Script". Otherwise I suggest to use an image instead.
Arial
Arial Black
Arial Narrow
Bookman Old Style
Book Antiqua
Charcoal
Courier
Courier New
Comic Sans MS
Fixed width (monospace)
Garamond
Geneva
Georgia
Helvetica
Impact
Lucida Console
Lucida Grande
Lucida Sans Unicode
Monaco
Monospace
MS Sans Serif
Narrow (arial narrow)
New York
Palatino
Palatino Linotype
Roboto
Sans serif (arial)
Serif (times new roman)(serif)
Symbol
Tahoma
Times
Times New Roman (times new roman, serif)
Trebuchet MS (trebuchet ms, sans-serif)
Verdana
Webdings
Wide (arial black)
Wingdings
Zapf Dingbats
Good luck!
Related
I created pdf with wkhtml2pdf with Arial font, while generate on local does not matter. But at the time of generating in online, font changed to be Times New Roman.
Code CSS
.div1 {
font-family: Arial;
font-size: 10px;
padding-left: 5px;
padding-top: 0px;
}
Try this
.div1 {
font-family: Arial!important;
font-size: 10px;
padding-left: 5px;
padding-top: 0px;
}
Hope it will help.
kind late, but i use this and works fine...
<head>
<meta charset="UTF-8">
<style>
body{
font-family:Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hi!</h1>
</body>
the key is in meta charset inside the head tag
I have a PHP file from which i want to create the PDF file but problem is that it is not creating the PDF file.
If i give $content = 'ABC BCNNCNCN'; it works but for my .php file who only contains the html content, it is not working all the way.
I am also pasting my code here:
require_once('../styles/uploads/files/extract/'.$bookName.'/'.$bookName.'_coverFinal.php');
$content = ob_get_clean();
require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(25, 20, 25, 20));
$html2pdf->writeHTML($content, isset($_GET['vuehtml']));
html2pdf->Output("../styles/uploads/files/pdf_files/htmltopdf.pdf", 'F');
Below is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title></title>
<style type="text/css">
.main-container {
margin-left: auto;
margin-right: auto;
width: auto;
font-family: Myriad Pro;
}
.page-title {
font-family: Myriad Pro;
font-size:25px;
text-align: center;
}
.stepone {
padding: 10px;
}
.steptwo {
padding: 10px;
}
.codeis {
font-size: 25px;
text-align: center;
}
.code {
font-size: 50px;
padding: 8px;
}
.stepthree {
padding: 10px;
}
.bookgift {
font-weight: bold;
text-align: center;
}
.registration {
padding: 10px;
}
.given {
font-size: 20px;
font-weight: bold;
padding: 10px;
}
.too {
font-size: 20px;
font-weight: bold;
padding: 10px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="page-title">Giftcardbooks.org</div>
<div class="stepone"> Step1. Register this book at www.giftcardbooks.org/register</div>
<div class="steptwo"> Step 2. Enjoy the book and write down the code as you go through the book. Look for the sentences stating. Congratulations, you have just unlocked a letter in your code. The first letter is P.</div>
<div class="codeis"> Your Code is:</div>
<div class="code"> P _ _ _ _ _ _</div>
<div class="stepthree"> Step 3. After finishing the book put your code in the website (www.giftcardbooks.org/giftscards) and enjoy your gift card. Thanks</div>
<div class="bookgift">j ghjhg jghj ukrtert</div>
<div class="registration"> Book Registration Number: 68217543</div>
<div class="given"> This book was given by <font style="text-decoration:underline">_mohsin_</font></div>
<div class="too"> This book was given to <font style="text-decoration:underline">_yousaf_</font></div>
</div>
<style type="text/css">
pre{display:none !important;}
</style>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- $Id: header.txt 236 2009-12-07 18:57:00Z vlsimpson $ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>The Project Gutenberg eBook of The Secret Battle, by A. P. Herbert.</title>
<style type="text/css">
body {
margin-left: 10%;
margin-right: 10%;
}
h1, h2, h3, h4, h5, h6 {
text-align: center; /* all headings centered */
clear: both;
}
p {
margin-top: .75em;
text-align: justify;
margin-bottom: .75em;
}
hr {
width: 33%;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
clear: both;
}
table {
margin-left: auto;
margin-right: auto;
}
.pagenum { /* uncomment the next line for invisible page numbers */
/* visibility: hidden; */
position: absolute;
left: 92%;
font-size: smaller;
text-align: right;
} /* page numbers */
.linenum {
position: absolute;
top: auto;
left: 4%;
} /* poetry number */
.blockquot {
margin-left: 5%;
margin-right: 10%;
}
.sidenote {
width: 20%;
padding-bottom: .5em;
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
margin-left: 1em;
float: right;
clear: right;
margin-top: 1em;
font-size: smaller;
color: black;
background: #eeeeee;
border: dashed 1px;
}
.bb {
border-bottom: solid 2px;
}
.bl {
border-left: solid 2px;
}
.bt {
border-top: solid 2px;
}
.br {
border-right: solid 2px;
}
.bbox {
border: solid 2px;
}
.center {
text-align: center;
}
.smcap {
font-variant: small-caps;
}
.u {
text-decoration: underline;
}
.caption {
font-weight: bold;
}
/* Images */
.figcenter {
margin: auto;
text-align: center;
}
.figleft {
float: left;
clear: left;
margin-left: 0;
margin-bottom: 1em;
margin-top: 1em;
margin-right: 1em;
padding: 0;
text-align: center;
}
.figright {
float: right;
clear: right;
margin-left: 1em;
margin-bottom:
1em;
margin-top: 1em;
margin-right: 0;
padding: 0;
text-align: center;
}
/* Footnotes */
.footnotes {
border: dashed 1px;
}
.footnote {
margin-left: 10%;
margin-right: 10%;
font-size: 0.9em;
}
.footnote .label {
position: absolute;
right: 84%;
text-align: right;
}
.fnanchor {
vertical-align: super;
font-size: .8em;
text-decoration:
none;
}
/* Poetry */
.poem {
margin-left:10%;
margin-right:10%;
text-align: left;
}
.poem br {
display: none;
}
.poem .stanza {
margin: 1em 0em 1em 0em;
}
.poem span.i0 {
display: block;
margin-left: 0em;
padding-left: 3em;
text-indent: -3em;
}
.poem span.i2 {
display: block;
margin-left: 2em;
padding-left: 3em;
text-indent: -3em;
}
.poem span.i4 {
display: block;
margin-left: 4em;
padding-left: 3em;
text-indent: -3em;
}
</style>
</head>
<body>
<div class="figcenter"> <img src="images/cover.jpg" alt=""/> </div>
<hr style="width: 65%;" />
<h1>THE SECRET BATTLE</h1>
<h2>BY A. P. HERBERT</h2>
<h3>AUTHOR OF 'THE BOMBER GYPSY'</h3>
<h3>METHUEN & CO. LTD.<br />
36 ESSEX STREET W.C.<br />
LONDON</h3>
<h3><i>First Published in 1919</i></h3>
<hr style="width: 65%;" />
<h2>CONTENTS</h2>
<hr style="width: 65%;" />
<h2>THE SECRET BATTLE</h2>
<hr style="width: 65%;" />
<h2><a name="I" id="I"></a>I</h2>
<p>I am going to write down some of the history of Harry Penrose, because I
do not think full justice has been done to him, and because there must
be many other young men of his kind who flung themselves into this war
at the beginning of it, and have gone out of it after many sufferings
with the unjust and ignorant condemnation of their fellows. At times, it
may be, I shall seem to digress into the dreary commonplaces of all
war-chronicles, but you will never understand the ruthless progression
of Penrose's tragedy without some acquaintance with each chapter of his
life in the army.</p>
<hr style="width: 45%;" />
<p>He joined the battalion only a few days before we left Plymouth for
Gallipoli, a shy, intelligent-looking person, with smooth, freckled skin
and quick, nervous movements; and although he was at once posted to my
company we had not become at all intimate when we steamed at last into
Mudros Bay. But he had interested me from the first, and at intervals in
the busy routine of a troopship passing without escort through submarine
waters, I had been watching him and delighting in his keenness and happy
disposition.</p>
<p>It was not my first voyage through the Mediterranean, though it was the
first I had made in a transport, and I liked to see my own earlier
enthusiasm vividly reproduced in him. Cape Spartel and the first glimpse
of Africa; Tangiers and Tarifa and all that magical hour's steaming
through the narrow waters with the pink and white houses hiding under
the hills; Gibraltar Town shimmering and asleep in the noonday sun;
Malta and the bumboat women, carozzes swaying through the narrow,
chattering streets; cool drinks at cafés in a babel of strange tongues;
all these were to Penrose part of the authentic glamour of the East; and
he said so. I might have told him, with the fatuous pomp of wider
experience, that they were in truth but a very distant reflection of the
genuine East; but I did not. For it was refreshing to see any one so
frankly confessing to the sensations of adventure and romance. To other
members of the officers' mess the spectacle of Gibraltar from the sea
may have been more stimulating than the spectacle of Southend (though
this is doubtful); but it is certain that few of them would have
admitted the grave impeachment.</p>
<p>That was the end of it. They were kind enough, those grey men; they did
not like the job, and they wanted only to do their duty. But they
conceived that their duty was 'laid down in The Book,' to look at the
'hard facts,' and no further. And the 'hard facts' were very hard....</p>
<p>The Court was closed while they considered their verdict; it was closed
for forty minutes, and when it reopened they asked for evidence of
character. And that meant that the verdict was 'Guilty.' On the only
facts they had succeeded in discovering it could hardly have been
anything else.</p>
<p>The Adjutant put in formal evidence of Harry's service, age, record, and
so on; and I was allowed to give evidence of character.</p>
<p>I told them simply the sort of fighting record he had, about Gallipoli,
and the scouting, and the job he had refused in England.</p>
<p>I am glad to believe that I did him a little good; for that evening it
got about somehow that he was recommended to mercy.</p>
<p>And perhaps they remembered that he was twenty-three.</p>
<hr style="width: 65%;" />
<h2><a name="XIII" id="XIII"></a>XIII</h2>
<p>That evening I sat in C Company mess for an hour and talked with them
about the trial. They were very sad and upset at this thing happening in
the regiment, but they were reasonable and generous, not like those D
Company pups, Wallace and the other. For they were older men, and had
nearly all been out a long time. Only one of them annoyed me, a fellow
in the thirties, making a good income in the City, who had only joined
up just before he had to under the Derby scheme, and had been out a
month. This fellow was very strong on 'the honour of the regiment'; and
seemed to think it desirable for that 'honour' that Harry should be
shot. Though how the honour of the regiment would be thereby advanced,
or what right he had to speak for it, I could not discover.</p>
<hr style="width: 45%;" />
<div class="footnote">
<p><a name="Footnote_1_1" id="Footnote_1_1"></a><span class="label">[1]</span> It is only fair to say that, long after the supposed date
of this conversation, a system of sending 'war-weary' soldiers home for
six months at a time was instituted, though I doubt if Foster would have
been satisfied with that.</p>
</div>
</body>
</html>
If the PHP file you are including is just HTML try getting its contents with file_get_contents instead of messing with output buffering:
$content = file_get_contents('../styles/uploads/files/extract/'.$bookName.'/'.$bookName.'_coverFinal.php');
require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(25, 20, 25, 20));
$html2pdf->writeHTML($content, isset($_GET['vuehtml']));
$html2pdf->Output("../styles/uploads/files/pdf_files/htmltopdf.pdf", 'F');
EDIT: Missing $ on last line
I'm having a issue when converting my .html page into .php when I do so, one of the elements jumps from it's position.
(Note: the following links to the images will not work if you do not delete one of the extra dots before the png extension I'm sorry that I have to do it this way it's just that I'm new here in the site and I still have a low reputation to post pictures, I really need help)
This is how I want it to be and how it displays in the .html page
But this is how it turns out after converting to .php
Thanks in advance!
<div class="top-headlines">
<ul class="th-content">
<a href="#"><li><img src="publicidade/002.jpg" /><h1> Getting
freelance jobs is very common</h1> amongst designers and programmers. It gives you the
freedom to use your time the way you wish to and also to work on projects that you
like. But, the problem often arises in finding ample freelance jobs to sustain yourself.
Not to worry though. Here’s a list of 10 different websites where programmers and designers
can find freelance jobs. So, if you have been looking for such jobs, take a look.</li></a>
<a href="#"><li id="top-left"><img src="publicidade/004.jpg" />
<h1>Getting freelance jobs is very common</h1> amongst designers
and programmers. It gives you the freedom to use your time the way you wish to and
also to work on projects that you like. But, the problem often arises in finding ample
freelance jobs to sustain yourself. Not to worry though. </li></a>
</ul>
</div>
.top-headlines h1{
margin-bottom: 10px;
font-family: arial, tahoma, sans-serif;
font-size: 1.5em;
font-style: normal;
font-variant: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 0.01em;
}
.top-headlines{
float:left;
clear:both;
height: 100%;
min-height: 320px;
max-height: 420px;
text-align:justify;
font-family: arial, sans-serif;
font-size: 16px;
}
.top-headlines a{
text-decoration:none;
text-align:justify;
font-family: arial, sans-serif;
font-size: 18px;
color: black;
font-size: 1em;
font-weight: 200;
line-height: 1.5em;
}
.top-headlines a:hover{
color: #666666;
}
.top-headlines img{
width: 275px;
height: 170px;
}
.th-content li{
float:left;
width:500px;
height:315px;
margin-right: 10px;
border-right: 1px #999999 solid;
padding-right: 10px;
list-style:none;
}
.th-content img{
float:left;
margin-right: 5px;
margin-bottom: 5px;
}
#top-left{
width:450px;
clear:right;
border:none;
}
Make .top-headlines have display: inline-block.
Try adding these properties:
.top-headlines {
position:relative;
}
.th-content li{
width:50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
Codepen for illustration. Images don't load but it shows the positioning:
http://codepen.io/jwktje/pen/kFJpy
I am attempting to apply some elements of responsive design to a site. My goal is to hide the right side based on screen width. I've been able to get the behavior to change on my desktop (when minimize the window) as well as my iphone. But, my andriod is still displaying the right side just like the full desktop site.
I had the max-width set to 750px, but increased it to 1000 to try and get the andriod to do something, but still not luck.
My CSS looked like this originally:
#container {
width: 980px;
text-align: left; margin: 10px auto; font-family: Arial; font-size: 1em;
}
#rightnav {
float: right; align: center; width: 300px !important; margin: 0; padding: 12px 5px 5px 5px;
}
To the CSS, I added this media query stuff:
#media all and (max-width: 1000px) {
#container {
width: 95%;
margin: 5px auto;
padding: 5px;
}
#rightnav {
display:none;}
I don't have it perfect, but on a minimized desktop screen or my iphone4, the right side doesn't display, indicating that the responsive design is working. However, on the andriod the CSS isn't responding at all.
As always, thanks in advance...
Add a viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I've built my current site into a mashup of HTML & PHP. I originally embedded CSS to each individual page. I'm using a PHP include for the separate header & footer PHP files. I've linked the footer.php & header.php to their respective .css files, and it works to a degree, but it seems that CSS is "bleeding through" to both the header and footer PHP files.
For instance, I'll apply a dark gray to my body text & links to my footer.css file:
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #808080;
}
a:link {
color: #808080 ;
}
a:visited {
color: #808080 ;
}
body {
background-image: url();
background-repeat:repeat-x;
background-color: #000000;
}
.style4 {font-size: 13px}
-->
#footer { width: 100%; height: 20%; background: #181818 ; }
//footer-nav style
#footer-nav {
list-style-type: none;
padding: 0;
float: center;
}
#footer-nav li {
display: inline;
}
#footer-nav li a {
float: center;
text-align: center;
background: none;
margin-left: 15px;
margin-right: 15px;
text-decoration: none;
height: 23px;
line-height: 23px;
}
</style>
`
This is then transferring over to my header.php file and changing the links to a dark gray (which shouldn't be happening as I'm linking header.php to it's own header.css file).
What I'm essentially trying to achieve is a dynamic header & footer linking system on my website so that I can easily update all headers & footers site-wide by replacing just one file in case of an added link, service, etc.
If there is a more efficient way of doing this please let me know!
Technically, should only belong in the of your page, not in inline blocks (though it does work).
You would need to change your CSS to select just the region you want to apply the styles to in each case. For example all the CSS for your header should be prefixed with your top level header element, #header.
Right now you are just styling top-level elements and the last to load is taking effect.
You could try putting something like this on the background of the particular css.
Ex.
background: #181818 !important;