I'm creating a simple Vue app that I will use to generate my CV in a PDF format. I have added google font Montserrat into this project, and when I print this page to file (CTRL + P in Firefox), the text cannot be selected, its like everything is an image.
I started debugging and it seems to happen when I use an imported font. Here is a codepen that can demonstrate what happens https://codepen.io/phlame-/pen/NWNYbyb
How to replicate: Open the pen in Firefox, and print the page to file (CTRL + P). Save and open the file. The second paragraph is selectable as its Arial, but the first one is not (which is Montserrat).
It seems like if you try to do this in Chrome nothing is selectable, but I would like it to work at least in 1 browser - since only I will use it to generate PDFs.
I've tried to import the font through a link tag instead of #import in CSS, tried this answer, tried different Google fonts (Roboto and Lato), this:
#media print {
* {
user-select: text !important;
}
}
All producing same results - unselectable text. Which becomes selectable with a default font...
To be clear: the font renders in the PDF, everything looks as it should, but the text is NOT selectable when clicking and dragging over the text
Has anyone had experience with this? Any help is appreciated
I ran into the same thing once using Overlock on a resume page. The problem is that the browser print utility doesn't recognize fonts that your page downloads on the fly using link tags, as it is customary to do with google fonts. It can only recognize system fonts, meaning the ones you have installed on the machine you're running the Print from.
If some text on your web page is using a font that isn't on your installed system font list, then you won't be able to save it as text in your PDF file. When the print utility encounters such, it treats it as an image.
Different OSes have different ways of examining what fonts you have on your machine ("Font Manager" in Windows, "Font Book" in Mac OS). You can google how to see what fonts you have installed on your machine, and you should find that Montserrat isn't one of them.
To fix this, all you need to do is install the Montserrat google font on your machine. Here is one set of directions on how to do that. Once you've done that, you'll need to restart your browser.
Related
I have built a page using Bootstrap 4. I want to print this page to PDF and I want it to be printed exactly as it looks. I used Google Chrome as the browser.
Chrome's print preview displays the page correctly, but the problem is, when I open the file after saving, I see problems with the font such as the letter "L" gets bold. Then I changed the font to Times new roman. It fixed the Ls but this time some other characters were bold. To confirm it, I tried printing Bootstrap's homepage, and there was the same issue.
This is the homepage in Chrome: https://ibb.co/XScJYph
Chrome print preview: https://ibb.co/jG3hWmm
And this is how it looks after saving as a PDF: https://ibb.co/MNBkRtY
How to overcome it and maintain the consistency? Please note that I tried the fonts Times new roman, Arial and Helvetica. All of them had problems, none worked perfectly.
I didn't use any CSS except this line: #media print {body {width: 8.5in;height: 11in;}} which should not be a problem.
Thank you in advance.
I guess this problem depend your computer fonts. I mean when i check same scenario i didn't have an problem.
You can check you reader fonts or you can open that .pdf file on chrome.
A project that I'm working on is making use of icon fonts. Is there some way of seeing what icons are included in the file? I can see what the icons are labeled in the generated css file (i.e. .icon-mail-alt:before { content: '\e808'; } ), but I would like to see the what the "images: look like. Is this possible?
If you are using a mac you can open it in fontbook and see all of the characters/symbols available.
On PC you can use charmap.exe, though it hasn't changed significantly in decades and is no longer really great. A quick search turned up BabelMap as an alternative which looks much more usable.
I know the question itself is illegal - asking to steal someone's home. :)
Anyways, it's a situation when a developer's logic is not working actually. With Browser's Developer Tool, I got the site's CSS. I located the #font-face code inside the main.css.
Here's what I got:
main.css:
path: http://www.example.com/assets/css/main.css
code:
#font-face {
font-family: 'the_font';
src: url("../fonts/fontname/fontname.eot");
bla bla
font-style: normal;
font-weight: normal;
}
So, according to the code the font file is in a folder named "fontname" under the "fonts" folder. And from the path's direction we can guess that the font's location is:
http://www.example.com/assets/fonts/fontname/fontname.eot
But it's generating a 404 page.
Why NOT the path's logic is working?
Supposing the CSS file isn't bad (i.e. the font really is loaded). You may use the developper tools of your browser.
For example in Chrome : hit F12 to open the developer tools and then select the Network or Resources tab and reload the page. You'll see the font file listed.
I use multiple tools for extracting Css, depending on the website.
Specifically for fonts, this tool works amazing: FontfaceNinja - comes with 3 browser extensions to pick from.
But sometimes is not enough:
CssViewer is another option, nice design, easy to use, it extracts only the Css for the element hovered - almost the same as Chrome Developer Tools, But much more readable in my opinion. It's a Chrome extension only. Install it from here: CssViewer
The tool i use the most for this job is CSSSteal, it gives the same level of details as chrome developer tools, cascading of styles from parent to it's child - all that, but because you can easy copy and paste the Css, is much easier to use for this purpose then the default Developer Tools. Good tool for complex Css migrations.. when the fonts and other css properties override each other like crazy.. get it form here: CssSteal
Note: After installation of CssSteal, restart the browser - then make sure you open the Tab that contains the Styles (on the right) - not the Elements one - as you can see above.
Hope that helps :)
The best way so far
You can actaully do rightclick: inspect > Application (on the top tabs) > Frames (scroll on the left tabs) Then you can find a Font section where all loaded fonts are listed. It lists all that are loaded in any possible secure way.
Further more, It also previews them on the right, to make it even easier
Then you can right-click on the one you chose and click open in a new tab, and it downloads it. Then you can add a .woff at the end of the filename and use it anywhere. (you can check its extension on the bottom of the preview too)
Using Georgia for body copy on a web site we've noticed major differences between how the text is rendered on a mac vs Windows.
It would appear the issue is with Windows when using smaller font sizes, since the text rendered by the browser (tested in Chrome, Safari, Firefox) looks very different to the installed font.
At 36px the text rendered by the browser (top) matches the text typed directly into PhotoShop (bottom):
At 12px the text rendered by the browser is very different (characters look elongated):
Can anyone explain why this is the case? We need to ensure consistent rendering of type across browsers/platforms.
Update
It's worth noting that if I import the system font directly (using #font-face), the type renders correctly.
If you want to ensure consistent rendering use an image, there is simply no consistent font rendering across systems. The font renderer for Windows is is very different from the font rendering in Mac OSX. Here is an elaborate article on the topic: Link
"It's worth noting that if I import the system font directly (using #font-face), the type renders correctly."
Why don't you simply import the system font directly, then?
On the other hand, I'm with Florian. The difference is minor enough I wouldn't really be concerned with it.
I'm trying to use the MusiSync font to embed a sharp and flat symbol in a line of text. In order to keep these symbols from being tiny I have to make their point size twice the size of the rest of the text. Unfortunately, this messes up the line height in Internet Explorer and I cannot find a way to control it. You can download the MusiSync font at:
http://www.icogitate.com/~ergosum/fonts/musicfonts.htm
My attempt to use this font in a web page can be found at:
http://www.williamsportwebdeveloper.com/MusiSync.htm
I opened up Photoshop and used the font you link to. There is a huge amount of white-space above each glyph in the font itself. The font is poorly designed.
If you set your style to this, you'll see the issue:
.style2 {
font-family: MusiSync;
font-size: 24pt;
border:1px solid #000000;
}
The problem appears in FireFiox 3 as well, its just manifesting itself a little differently.
You may be able to hack your way around this somehow, but it's going to be ugly. Unless you're using a lot of different font sizes, you may be better of using images.
Seeing that you are trying to use a very uncommon font, why not implement sIFR?
It will (possibly) solve some of your line height issues as well.
Read up here.
sIFR is an excellent choice for non-standard fonts.
You embed the font in a flash movie (don't worry most of the work is done for you) and add a bit of code to your page and the sIFR javascript will replace classes/id/tags etc with a flash movie containing the text/font that you're aiming for:
From http://www.mikeindustries.com/blog/sifr/
A normal (X)HTML page is loaded into the browser.
A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.
An excellent cross browser platform indepent solution for non-standard fonts.