I want to print an HTML page, that contains Font Awesome icons, with wkhtmltopdf. I saw this issue with Google fonts: Google Web Fonts and PDF generation from HTML with wkhtmltopdf, but this way is not working.
I solved this by inlining the TTF version of the file like this:
<style type="text/css">
#font-face {
font-family: 'FontAwesome';
src: url(data:application/x-font-truetype;base64,<< insert base64 encoded fontawesome-webfont.ttf here >>) format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
And then inlining the font-awesome.css file. BUT you need to remove the #font-face at-rule of that file, since wkhtmltopdf doesn't like multiple #font-faces that define the same font. You can do that by either inlining a modified version of the file or by using a RegEx to remove the at-rule (e.g.: #font-face\s*\{[^\}]*\}).
(I tried leaving the original #font-face intact, hoping a later definition would overwrite it, but that didn't work. The CSS standard doesn't seem to define what happens when two #font-face for the same font appear, if I read it correctly)
Do you have any examples ??
I saw something similar in this issue:
https://github.com/mileszs/wicked_pdf/issues/587
The filename contains a carriage return character, which is not a valid display symbol. The glyph you're seeing is one usually research for private Unicode character areas.
Add the .woff file in your Font Awesome lib dir (no base64 in css) and it should work.
Related
I'm using Heebo Google fonts and commas and apostrophes appearing strangely in my HTML. As far as I know it only appears on desktop and not mobile.
Heebo is imported like this:
<link href="https://fonts.googleapis.com/css?family=Heebo:400,500,700,800|Fira+Sans:600" rel="stylesheet">
https://culturestride.com/
Fixed a few hours ago in the Google Fonts API. No changes need to be made.
I managed to fix this by using the github version. I converted them to the Webfont versions using https://transfonter.org/. I added a font cache (OMGF Wordpress Plugin), disabled Google Fonts (disable google fonts) on my Wordpress, then replaced these fonts (through cpanel). I know this is a temporary fix but it works. Working site: https://littlethiings.com. If someone, else finds a related fix please do update this forum. I created a css format for the font, you can call the included stylesheet and your font should work as intended (remove google font first). Link (scroll to bottom). Thanks!
UPDATE: The rollback has been completed. You can switch back to the google fonts again.
The cheapest solution to the problem
You can include all characters in Heebo font but not the ,
Use this link tag for your font. I have included all characters of keyboard in it but not including those chars who are not working properly. As a result of which , will work in normal way and it does not look ugly.
<link href="https://fonts.googleapis.com/css? family=Heebo:400,500,700,800|Fira+Sans:600&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz?.1234567890[]';.()/\!##$%^&*-=+_{}:|\.ABCDEFGHIJKLMNOPQRSTUVWXYZ*~\>" rel="stylesheet">
I had the same error from today in my website and i guess is a Google Font error.
Basically, what you need to do is to download an old version of the font, for example https://www.fontsquirrel.com/fonts/heebo).
Then call again the font inside your local .css and not anymore through Google Api.
#font-face {
font-family: 'Heebo';
src: url('Heebo-Regular.eot');
src: url('Heebo-Regular.eot?#iefix') format('embedded-opentype'),
url('Heebo-Regular.woff') format('woff'),
url('Heebo-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
In my webpage, using google web fonts is ok.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700,300italic,400italic,600italic">
<div style="font-family: 'Source Code Pro';">My Text</div>
it's ok using like this. But I've server hosted .otf font and I want to use it on my webpage, I've tried using like
#font-face {
font-family: 'MyFontName';
src: url("https://www.mywebsitepage.com/fonts/MyHostedFont.otf") format("opentype");
}
<div style="font-family: 'MyFontName';">My Text</div>
But it doesn't work. The reason why use my font is I can't find my font in free google web fonts.
Regarding to your sample, I hope that not the case you are really using it. I mean you have separate .css file which includes the font-face declaration and you attach this file in the head of your document, or using it like a part of <style>...</style> construction better also in head of document. If yes, so you can try to not use .otf, but using .woff and .woff2 instead.
It's not proper way to use .otf for web fonts now. Currently, if you don't really need support old versions of IE (8 and lower) you can just load fonts in .woff and .woff2 formats and that will cover your needs.
Like this:
#font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
If you have .otf font you can really easy convert it to need web-font formats using some online generators like https://transfonter.org/ or similar.
I have a problem when using yojo.ttf font.
Here is my simple html code
<html>
<head>
<style>
#font-face {
font-family: 'yojo';
src: url('./yojo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<p style="font-family: 'yojo'">ありがとう</p>
</body>
</html>
yojo.ttf
This font works well on Safari, but it doesn't work on chrome and firefox: the font of the text in the paragraph is not yojo font family, and the console just show a warning message:
Failed to decode downloaded font OTS parsing error: post: Failed to parse table
Is there any way to fix the problem without modifying the font file? Thanks!
I know this is a bit old, and you probably already figured it out, but just in case you didn't or someone has the same issue...
Had the same problem, and basically it seems Chrome and other browsers can't read the .ttf font format. Here's how I fixed it:
Convert your .ttf file into other font formats like .eot and .woff formats.
You can do that by going to this site...
https://transfonter.org/
Upload your font, then select all the formats you need (I selected everything), and I think you can leave everything else at the default setting.
Then hit the download button. You'll get a compressed file with all the font file formats and a css stylesheet that gives you an example of how your #font-face declaration should look like. You can copy this to your css file, or just make your own declaration. Of course you should also place the font files where you want your site to access them from.
And now it should work for Chrome, Safari, and Firefox. Not sure about other browsers though!
I hope that helps you or someone.
I'm currently making a webpage that imports the needed fonts from Google Fonts this way:
#import url(http://fonts.googleapis.com/css?family=Italianno);
The problem is that every time I load the page I need to be connected to the Internet and it also takes time to load the font. Is there any way I can load the font offline because while testing the page I'll be refreshing it countless number of times and I might not be connected to the internet all the time and I don't want to wait for 3-5 seconds every time for the font to be loaded.
I tried installing the font in the system and then using it in the CSS. It didn't work.
Hey make a fonts folder with css folder and put the desired font there. Then in CSS call this code as example for MeriyoUI font as mentioned below. This would load the font onto your app.
For this you just need to download the font and put that in fonts folder. (pre-requisite).Try using web safe fonts.
Hope it helps.
CSS
#font-face
{
font-family: 'Meiryo UI';
font-weight: normal;
font-style: normal;
src: url('../fonts/MeiryoUI.ttf');
}
1. create a folder in website directory and move your fonts
to it! ( .ttf , .eot , .woff )
example: directory --> webfonts
2. create a css document for that!
example: directory --> css --> webfont.css
3. use this code into webfonts.css
#font-face {
font-family: 'name';
font-style: normal;
font-weight: 400;
src: url('../webfonts/fontname.eot');
src: url('../webfonts/fontname.eot?#iefix') format('embedded-opentype'),
url('../webfonts/fontname.woff2') format('woff2'),
url('../webfonts/fontname.woff') format('woff'),
url('../webfonts/fontname.ttf') format('truetype');
}
4. and in the first line of haed element into your webpage, use bellow code:
<link rel="stylesheet" href="css/webfonts.css" type="text/css"/>
Use CSS3 #font-face. Try making font face of your fonts from any fontface generator like this http://www.fontsquirrel.com/tools/webfont-generator. And to learn how to use them take a look in here http://css-tricks.com/snippets/css/using-font-face/
This question already has answers here:
How to embed fonts in HTML?
(6 answers)
Closed 6 years ago.
In order for my website to look good I need to use a custom font, specifically, Thonburi-Bold. The problem is - the font does not get displayed unless the user has installed it. It also isn't displayed in firefox.
Is there a workaround to this problem?
You have to import the font in your stylesheet like this:
#font-face{
font-family: "Thonburi-Bold";
src: url('Thonburi-Bold.ttf'),
url('Thonburi-Bold.eot'); /* IE */
}
You can use CSS3 font-face or webfonts
#font-face usage
#font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
webfonts
take a look at Google Webfonts, http://www.google.com/webfonts
Yes, there is a way. Its called custom fonts in CSS.Your CSS needs to be modified, and you need to upload those fonts to your website.
The CSS required for this is:
#font-face {
font-family: Thonburi-Bold;
src: url('pathway/Thonburi-Bold.otf');
}
CSS lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let’s say myfont.ttf, and upload it to your remote server where your blog or website is hosted.
#font-face {
font-family: myfont;
src: url('myfont.ttf');
}
First, you gotta put your font as either a .otf or .ttf somewhere on your server.
Then use CSS to declare the new font family like this:
#font-face {
font-family: MyFont;
src: url('pathway/myfont.otf');
}
If you link your document to the CSS file that you declared your font family in, you can use that font just like any other font.