I am trying to use a custom font using font-face in my AMP pages, but the font is not rendered. The console says "Font download timed out for icons".
#font-face {
font-family: 'icons';
src: url('/fonts/icos2/icomoon.ttf?126oo9') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-clock:before {
content: "\e94e";
}
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
<amp-font layout="nodisplay"
font-family="icons"
timeout="2000"
on-error-remove-class="icons-loading"
on-error-add-class="icons-missing"
on-load-remove-class="icons-loading"
on-load-add-class="icons-loaded">
</amp-font>
<span class="icon-clock"></span>
<span class="ribbon-txt">Text</span>
The font is being fetched via HTTPS.
Any help will be strongly appreciated.
Thanks!
Here is working Url
Js on Head
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
Css on Head
<style amp-custom>
h1 {
color: red;
}
#font-face {
font-family: 'icomoont';
src: url(https://www.fanaticguitars.com/download/icomoon.ttf) format('truetype');
}
.font {font-family: 'icomoont'; color:#f00;}
span {font-size:25px;}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-clock:before {
content: "\e94e";
}
</style>
HTML
<span>Hello Font!</span>
<br>
<span class="font">Hello Font!</span>
<br>
<span class="icon-clock"></span>
<span class="ribbon-txt">Text</span>
Related
Iam using Itext7 to convert html to pdf using HtmlConverter, and here is the html2pdf dependecy. Iam getting the following error in the log.
ERROR com.itextpdf.styledxmlparser.css.resolve.CssDefaults - Default value of the css property "text-decoration-thickness" is unknown.
<dependency>
<groupId>com.itextpdf</groupId>`enter code here`
<artifactId>html2pdf</artifactId>
<version>3.0.5</version>
</dependency>
sample html:
<head></head><body>
<p style="color: rgb(0, 0, 0); font-family: "Times New Roman"; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; text-align: left; break-inside: auto; break-after: auto; break-before: avoid; line-height: normal; margin: 14pt 0pt; text-indent: 36pt; border-left-style: hidden; border-right-style: hidden;">
<span lang="en-US" style="font-family: Calibri; font-size: 11pt; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none;">
sample html with text-decoration-thickness warning in html2pdf conversion
</span>
</p>
</body>
you can try your test on the demo lab. if it does not work on the demo lab, it is not supported.
I provided css and fonts to iText as specified in https://developers.itextpdf.com/fr/node/2085: for this I installed arial.ttf on a directory. I provided also a css where I stated that Arial is the official font for all
h1 {
font-family: Arial;
font-size: 24px;
font-style: bold;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
h2 {
font-family: Arial;
font-size: 20px;
font-style: bold;
font-variant: normal;
font-weight: 500;
line-height: 22.4px;
}
h3 {
font-family: Arial;
font-size: 14px;
font-style: bold;
font-variant: normal;
font-weight: 500;
line-height: 15.4px;
}
body {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
p {
font-family: Arial;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
}
but my server spent 2 minutes to create a pdf from a simple html page. Any other suggestion?
I made a form to send email on a website built on Laravel. It used to work without problems, but then I added an html/css template to the email. The user should receive an html/css template in the email, but is receiving only text.
This is my send function
public function sendmail(Request $request)
{
$str = preg_replace('/\s\s+/', ' ', $request->emails);
$arr=explode(" ", $str);
$emails = array_slice($arr, 1, -1);
$subject = $request->subject;
$body = $request->body;
$sent = 0;
$declined = 0;
$decEmails=[];
$send = 0;
$declined = 0;
foreach($emails as $email)
{
$send = Mail::send(['html' => 'pages.sendemail'],['subject'=>$subject, 'body'=>$body], function($message) use ($email, $subject)
{
$message->to($email)->subject($subject);
});
if( $send == 1 )
{
$sent++;
}
else
{
array_push($decEmails, $email);
$declined++;
}
}
return view('sent', compact('sent','declined','decEmails') );
}
and this is my view
<!DOCTYPE html>
<html>
<head>
<title>Ebay Georgia</title>
<!--<link type="image/x-icon" rel="icon" href="images/icon.ico">-->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("footer");
document.createElement("section")
</script>
<style>
*{ margin:0; padding:0}
html, body{width:100%; min-height:100%;}
a{ text-decoration:none;}
li{ list-style-type:none;}
img{border:0;}
#font-face {
font-family: 'Conv_BPG DejaVu Sans ExtraLight 2012';
src: url('fonts/BPG DejaVu Sans ExtraLight 2012.eot');
src: local('☺'), url('fonts/BPG DejaVu Sans ExtraLight 2012.ttf') format('truetype'), url('../fonts/BPG DejaVu Sans ExtraLight 2012.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Conv_BPG DejaVu Sans ExtraLight Caps 2012';
src: url('fonts/BPG DejaVu Sans ExtraLight Caps 2012.eot');
src: local('☺'), url('fonts/BPG DejaVu Sans ExtraLight Caps 2012.ttf') format('truetype'), url('../fonts/BPG DejaVu Sans ExtraLight Caps 2012.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*main css*/
#wrapper{
width:92%;
max-width:600px;
padding:29px 4% 10px 4%;
background:#1c75d7 url(../images/corner.png) no-repeat right bottom;
background-size:auto 100%;
margin:50px auto;
}
#maincContent{
-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.24);
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.24);
background-color:#fff;
margin-bottom:13px;
position:relative;
clear:both;
overflow:hidden;
border-bottom-right-radius:40px;
}
#head{
width:92%;
max-width:550px;
margin:25px auto;
}
#head h1{
width:94px;
height:47px;
margin:25px 5.45%;
}
#head h1 a{
display:block;
text-indent:-9999px;
width:100%;
height:100%;
background: url(../images/logo.png) no-repeat center center;
}
#content{
width:92%;
max-width:550px;
margin:25px auto;
}
#content h2{
color:#5c5c5c;
font-size:15px;
margin-bottom:20px;
font-family: 'Conv_BPG DejaVu Sans ExtraLight 2012';
margin:0px 5.45% 25px 5.45%;
}
#content .parpagraph{
color:#5c5c5c;
font-size:15px;
margin-bottom:20px;
font-family: 'Conv_BPG DejaVu Sans ExtraLight 2012';
font-weight:600;
margin:0px 5.45% 25px 5.45%;
}
#content .parpagraphGreen{
color:#86b817;
font-size:14px;
margin-bottom:20px;
font-family: 'Conv_BPG DejaVu Sans ExtraLight Caps 2012';
font-weight:600;
margin:0px 5.45% 44px 5.45%;
}
#content img{
display:block;
margin:0px 5.45% 60px 5.45%;
}
#maincContent::after {
content: "";
position: absolute;
z-index:2;
bottom: 0;
right: 0%;
width: 0px;
height: 0px;
border-top:35px solid #dbdbdb;
border-right: 35px solid #dbdbdb;
#footer{
width:92%;
max-width:550px;
margin:0 auto;
}
#footer ul{
margin-left:7%;
overflow:hidden;
}
#footer ul li{
display:inline-block;
float:left;
width: 31px;
height:35px;
margin-right:2%;
}
#footer ul li a{
display:block;
width:100%;
height:100%;
text-indent:-9999px;
margin-bottom:8px;
}
#footer ul li a.mail{
background:url(../images/mail.png) no-repeat center center;
}
#footer ul li a.fb{
background:url(../images/fb.png) no-repeat center center;
}
#footer ul li a.link{
background:url(../images/link.png) no-repeat center center;
}
</style>
</head>
<body>
<section id="wrapper"><!--id="wrapper"-->
<section id="maincContent"><!--id="maincContent"-->
<header id="head"><!--header-->
<h1>Ebay Georgia</h1>
</header><!--End of header-->
<section id="content"><!--id="content"-->
<h2> {!! $subject !!}</h2>
<div class="parpagraph">
{!! $body !!}
</div><br>
<div class="parpagraphGreen">
მადლობა ჩვენი სერვისით სარგებლობისთვის.
</div>
<img src="../images/line.png" alt="#" />
</section><!--End of id="content"-->
</section><!--En dof id="maincContent"-->
<footer id="footer"><!--id="footer"-->
<ul>
<li>mail</li>
<li>facebook</li>
<li>link</li>
</ul>
</footer><!--End of id="footer"-->
</section><!--End of id="wrapper"-->
</body>
</html>
By default, the view given to the Mail::send() method is assumed to contain HTML. So no need to give html key to your view array, this should work:
Mail::send('pages.sendemail', ['subject'=>$subject, 'body'=>$body]...
But if you want to send a plain text you must define it as ['text' => 'pages.sendemail'].
I have an issue with #Fontface via MyFonts for ProximaNova... Only in firefox and for some weights.
As you can see by the screenshot my fonts are not loading in firefox but have no problem in Safari and in Chrome. I've also noticed, on another page where I have multiple weights, some work, others do not. I have no altered the font face css file that was generated for me, other then adding font-weight/style to normal.
#font-face {font-family: 'ProximaNovaS-Extrabld';src: url('../webfonts/278301_2_0.eot');src: url('../webfonts/278301_2_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_2_0.woff') format('woff'),url('../webfonts/278301_2_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNovaS-Semibold';src: url('../webfonts/278301_6_0.eot');src: url('../webfonts/278301_6_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_6_0.woff') format('woff'),url('../webfonts/278301_6_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Extrabld';src: url('../webfonts/278301_F_0.eot');src: url('../webfonts/278301_F_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_F_0.woff') format('woff'),url('../webfonts/278301_F_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Regular';src: url('../webfonts/278301_13_0.eot');src: url('../webfonts/278301_13_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_13_0.woff') format('woff'),url('../webfonts/278301_13_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Bold';src: url('../webfonts/278301_14_0.eot');src: url('../webfonts/278301_14_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_14_0.woff') format('woff'),url('../webfonts/278301_14_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNovaS-Bold';src: url('../webfonts/278301_7_0.eot');src: url('../webfonts/278301_7_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_7_0.woff') format('woff'),url('../webfonts/278301_7_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Semibold';src: url('../webfonts/278301_12_0.eot');src: url('../webfonts/278301_12_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_12_0.woff') format('woff'),url('../webfonts/278301_12_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
Here is a sample of the bigger text style
h1 { color: #ff6500; display: inline; font-family: 'ProximaNova-Semibold'; font-size: 34pt; letter-spacing: 1px; line-height: 42pt; text-align: left; text-transform: uppercase; }
I've tried to do some tests... as far as putting the same markup and style of working weights (in firefox) in the the same page as shown in the screen shot, which then doesn't work. So I'm stumped.
Thank you for your help.
---------- Update -----------
It seems for the most part Firefox is displaying the fonts correctly. However as you can see in the top window (firefox) the text different from the the bottom (Safari) This is really stumping me... http://postimg.org/image/vftkepyw1/
Font files do not exist at the specified path.
I believe you where just not linking to the specified font.
The above link http://www.chezvalois.com/test/index.html is now showing all proxima nova fonts in my Firefox.
I believe this is now fixed.
Using this #font-face css. works in Chrome, Safari, and IE, only not Firefox. All required files are uploaded to the server.
CSS:
#font-face {
font-family: 'Calgary';
src: url('../fonts/calgary.eot');
src: url('../fonts/calgary.eot?#iefix') format('embedded-opentype'),
url('../fonts/calgary.woff') format('woff'),
url('../fonts/calgary.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#header-text-webform {
position: relative;
top: 59px;
left: 20px;
font-family: 'Calgary', 'Helvetica', 'Arial', sans-serif !important;
color: white;
font-size: 26px;
font-weight: normal;
text-transform: uppercase;
z-index: 1;
}
You have a duplicate src declaration. Remove this line:
src: url('../fonts/calgary.eot');
and see if that helps at all. If Firefox only reads this, first, src definition, it will be trying to load an EOT font which it doesn't support...
I always use the following structure and have no issues in firefox (or anything else)
#font-face {
font-family: 'Calgary';
src: url('/fonts/calgary.eot');
src: url('/fonts/calgary.eot?#iefix') format('embedded-opentype'),
url('/fonts/calgary.woff') format('woff'),
url('/fonts/calgary.ttf') format('truetype'),
url('/fonts/calgary.svg#calgary') format('svg');
font-weight: normal;
font-style: normal;
}