Assign a standard (web safe font) using #font-face for printing - css

Currently, in my standard stylesheet I have:
#font-face {
font-family: myFancyFont;
src: url('myFancyFont.otf');
}
And I use that in other css declarations like:
.someClass {
font-size: 18px;
font-family: myFancyFont;
}
That all works well and good until someone goes to print the page at which point anything using myFancyFont prints out in a rather ugly font.
On screen version
Printed version
Notice the font looks double lined and blurry. My print.css file does change the background color from blue to grey.
Is it possible for me to redefine myFancyFont in my print.css file to a standard web safe font (like Verdana) so printing looks more normal?
I'm assuming that there could still be a problem if I simply do:
#font-face {
font-family: myFancyFont;
src: url('verdana.otf'); /*or a real version of the verdana font file*/
}

Is it possible for me to redefine myFancyFont in my print.css file to a standard web safe font (like Verdana) so printing looks more normal?
Yes, in your print stylesheet you can redefine your custom font family to use the preinstalled Verdana like so:
#font-face {
font-family: myFancyFont;
src: local('Verdana');
}
All references to myFancyFont in your standard stylesheet, provided they haven't been restricted to #media screen, will automatically use Verdana in print.
You do need to make sure that your print stylesheet is linked after your standard stylesheet in your HTML so that this #font-face rule will override your standard one.
Note that "web safe" doesn't necessarily mean "legible in paged media", although generally most web safe fonts do print pretty legibly.

I would simply use an #media print media query with Verdana as the standard font, like this:
#media print {
* {
font-familiy: Verdana, sans-serif;
}
}
Plus, if you have other, more specific CSS rules where you define your FancyFont, you'd have to include these too in this media query (changed to Verdana), or use !important in the above rule.

Related

How to use local system fonts with wkhtml2pdf and pre tags

I'm using wkhtml2pdf and it looks like the renderer won't apply CSS font overrides from local fonts anywhere. It seems no matter what, wkhtml2pdf is using the default font, unless the font is explicitly #import()ed.
For the most part I'm OK with just a single font for the document, but it's annoying for code snippets when it doesn't render in a proportional font. I have font overrides for <pre> (and <pre><code>) like this:
pre, pre > code {
font-family: monospace;
}
I've also tried explicit fonts like Consolas, Menlo etc. which also doesn't work.
Here's what this looks like in the PDF:
As you can see the code block does not reflect the font change and renders in the document font, not monospace (or whatever other built-in font I might specify). Rendering the same in modern Chromium browsers renders the alternate font correctly.
I can get this to work however by use #import() and explicitly importing a Web font:
#import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght#0,400;0,700;1,400;1,700&display=swap');
And then referencing that font in the CSS:
pre, pre > code {
font-family: "Source Code Pro", monospace;
}
While that works using Web fonts isn't an ideal scenario as it requires Web access.
Two questions:
Is there a way to get wkhtml2pdf to work with built-in fonts in CSS styles? If so how do these need to be imported
Why is monospace which should be totally generic not working in this case?

Scaling one font face in CSS

I'm writing a tiny website for a book that's currently being printed, and want to match the slightly eccentric font called Cronos Pro which it uses for its headings. I'm currently doing this with the following CSS:
header, h1, h2, h3 {
font-family: cronos-pro, sans-serif;
}
Cronos Pro is supplied using our Adobe Creative Cloud subscription, and under the terms of their licence this must be loaded as follows:
<link rel="stylesheet" href="https://use.typekit.net/xxxxxxx.css"/>
This just produces a set of #font-face rules defining the font, and it all works fine. Nevertheless, I feel I ought to keep the fall-back of sans-serif in case the font is temporarily unavailable, or for an old browser that doesn't support it.
However, Cronos Pro is a very compact font. If I know the browser is using it, I want it rendering bigger, as if I'd added font-size: 125% to the CSS. But if the browser falls back to its default sans serif font, I want it at 100% size.
I thought I could do this as follows, but Firefox tells me it's an invalid property value:
font: cronos-pro 125%, sans-serif;
Is there a good way of achieving this, bearing in mind the #font-face rule is outside of my control?
You could use JavaScript to add a stylesheet with your font-size: 125% tag if and when Chronos Pro loads successfully:
<script>
{
let font = "cronos-pro";
let styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);
document.fonts.ready.then(function () {
if( document.fonts.check(`1em ${font}`) ){
styleSheet.sheet.insertRule('header, h1, h2, h3 { font-size: 125%; }')
}
});
}
</script>
Not sure if this is a "good way" to do it, but it should work in a pinch.  I'm still a bit new at web development.

Use custom font only if current one has not certain characters

I am working on a script that puts some text on a page. The text contains some unicode characters. I have custom font that has those characters, but I'd like to use my font only if the font used on a webpage does not have them. I can't controll main font of the page. I thought of something like this, but it does not work:
.someclass {
font-family: inherit, 'myFont';
}
What's the proper way of doing this?
I think this can help:
#font-face {
font-family: fontname;
src: url(address.ttf);
}

#font-face not recognized

Ok I have my site up so far but the two fonts I used are not showing up. I transferred the fonts and put them in the same folder as my webpages. I also used #font-face in css (styless.css). I'm not sure where I went wrong.
Website: http://envycosmetics.zxq.net/TestSite/webpages/index.html
I'm looking at styless.css, and I can't see where you used #font-face. Make sure you do it like this:
#font-face { font-family: FontName; src: url('path/to/font.otf'); }
Then call it like this:
#navBar { font-family: FontName, sans-serif; }
Also, don't forget to call another font for browsers that don't support #font-face, as shown in #navBar values.
I also used #font-face in css (styless.css)
No... no, you didn't.

#font-face and font-size

The idea in the following is the first #font-face is for Firefox, the second for IE, and Arial for anything else that can't make sense of the first two. Its all working except for I want to give a different size in the case of Arial, and haven't figured out the syntax to do that.
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf"); format("truetype");
}
#font-face {
font-family: TribecaIE;
src: url("Tribec0.eot");
}
BODY
{
FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}
I don't believe this is possible with css alone; we will probably need to use javascript.
All we want to do is specify a different font-size if Arial is the active font. Detecting the active font is not exactly straightforward, but here is one method that will work for our particular purpose. We can create a temporary element containing some Arial characters and measure its width, and then create a second element containing characters without specifying a font (so that it defaults to the "active" font) and compare widths. This won't tell us which font is currently active, but can indicate whether or not one of the embedded fonts was loaded with #font-face as they certainly won't have the same width as Arial. If the two elements' widths aren't equal we know that Arial could not have loaded, and so we will only adjust the font-size if the widths are equal.
Even if the browser is unable to load the Arial font, our test is still functional, because when we specify Arial during the test, the browser will default to the same font as it would for the second element. Both elements will still have equal width if the browser is unable to load the embedded fonts with #font-face.
If anyone would like me to further illustrate with code, I'll be happy to write the javascript.
This is not supported by normal CSS rules..
I believe your options are
the font-size-adjust property of css 3
javascript (jQuery), and check for current font to see which one of the three is effective and adjust the font-size accordingly.. http://www.w3.org/TR/css3-fonts/#font-size-adjust ( you should also have a look at the http://www.modernizr.com/ )
I believe it is this (close to what you have):
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf");
}
#font-face {
font-family: Tribeca;
src: url("Tribeca.eot");
}
body {
font-family: Tribeca, Arial;
}
IE won't know how to open the ttf, so it won't bother. Then it will open the eot. Then, you just specify the font by the given name in the body declaration.
Target your browsers by knowing which one reads which type of declaration.
Conditional Comment load different CSS calls.
Then you can specifically tell each one to do something different per rule.
Also there is typekit
#font-face {
font-family: 'Tribeca';
src: url(Tribeca.eot);
src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
}
MSIE will ignore the last line cos it doesn't understand format rule. and yes as pointed by porneL above, format() should go in the src property.
local() will make supporting browsers use local font file if user has it instead of downloading from your server (and probably make IE ignore the line too).
as for the font-size adjustment, as pointed by Gaby: CSS 3 font-size-adjust. but it looks like it's not widely supported, yet.
To void code duplication with #font-face, you can do this via server side. If you use for example some urlrewrite, detect UA, if it's IE - return file with .eot extension, if it's normal browser - ttf.
As for me, it works great.
And for this case, you shouldn't change your css files, just should have 2 files: .ttf & .oet.
Although it's against normal good-practices when using CSS, you could use the !important declaration in your conditional CSS.
As an example, we create two stylesheets: the 'default' one, which will have a section for Firefox-specific styles and an Internet Explorer stylesheet.
Then, using the standard <link rel="" /> method of importing stylesheets:
<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">
<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
Within the 'default' stylesheet, our Firefox styles are wrapped in the following:
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This works because the #-moz-document url-prefix() section is how Firefox addons style webpages. So, other browsers don't understand it and therefore just skip it.
BODY
{
FONT: 140% Arial;
FONT: 195% Tribeca,TribecaIE;
}

Resources