I would like to choose fonts in a web page using logic along the lines of "if you have this system font A, use it, otherwise download and use font B".
I can do this in CSS like so:
#font-face {
font-family: B;
src: url('B.ttf');
}
p {
font-family: A, B;
}
My question is: If the system has font A installed (i.e. font B is never actually required to render the document), is B.ttf downloaded or not - and does it vary between browsers?
The file B.ttf may be requested, even if font A is available on the system and the browser doesn't need to fall back to font B.
Paraphrased from the CSS3 Fonts module spec, §4.7 Font loading guidelines, with a relevant code snippet:
In cases where a font might be downloaded in character fallback cases, user agents may download a font if it's listed in a font list but is not actually used for a given text run.
#font-face {
font-family: GeometricModern;
src: url(font.ttf);
}
h2 {
/* font may be downloaded for pages with h2 elements,
even if Futura is available locally */
font-family: Futura, GeometricModern, sans-serif;
}
Since it's not a requirement (i.e. "may", not "must"), it's the vendor's choice whether their browser downloads a web font for fallback use even if it's not required. As far as I know, Firefox will download B.ttf, and it appears that Safari and Google Chrome won't (I haven't even tested in Opera and IE yet).
So, it looks like this behavior varies between browsers — but there's no right or wrong in such a scenario.
Related
This character doesn't exist in Unicode since I created it myself. Now, it is in an esp file format. After some searches, and my understanding, I can't just put it into Unicode.
My goal is to display it, let my viewers to see if they like it, but not in any picture format since it also serves other purposes for the website, where displaying it as an image is just not considered.
How can we display a self-created character where it could ONLY be displayed as a regular letter?
Yes we can, but we should be really careful doing so.
As Remy Lebau suggested, if you really insist on using custom glyph as "regular letter" inside text flow, you should
create a real font file to be placed on web (WOFF/OTF), or installed on each user device (OTF/TTF),
ensure that custom glyph in your font file is assigned to some code point from the "private-use" area,
use the code point in unicode-range value of #font-face,
and add newly created font-family to the font stack.
Example:
#font-face {
font-family: f;
src: local(Impact), local(Haettenschweiler), local(Helvetica Inserat);
unicode-range: U+65;
}
#font-face {
font-family: f;
src: local(Courier new), local(Menlo), local(Liberation Mono);
unicode-range: U+6f;
}
body { font-family: f, sans-serif; }
<p>Some text where letters "o" and "e" are from a different ("custom") font-faces.</p>
Font-face with only private-use characters should work even as a last (fallback) in the stack, but it does not matter here. In your case those "local()" declarations would be replaced with url() path or dataURI. If your target audience is in controlled environment (intranet) and you can reliably distribute the to all consuming devices, you can use even the local([name of locally installed ustom font])
The unicode-range value would be something like U+F8FF.
But, use this in and only if you are sure your users will
Why you probably should not do that this way
If there is chance (some of) your users have not installed, does not support, can not download or are blocking given font, or is using assistive technology to consume your content and given glyph conveys some meaningful information, you probably should refrain from using the approach described above.
If you don't have such controlled audience and want to support screen readers, and still don't want to use simple <img alt="[glyph meaning in the context]">, you should at least wrap their occurrences as suggested in Léonie Watson's article Accessible emoji:
Some text <span role="img" aria-label="[glyph meaning in the context]"></span>
My brand uses a particular typeface, which I have bought and self host. I want to use the font on my email newsletter (with fall back fonts). Using #font-face I have linked to the self hosted fonts on my server. I've put the html newsletter file on my server and can see that the correct font is displayed. I've also sent myself a test email and again the correct font is displayed.
However, I'm writing the HTML file on my Mac and when I come to view the file (on my computer) in Firefox or Chrome the fall back font is displayed not the #font-face linked font. Why is this and what can I do about it? The link to fonts is absolute, so I presume it should work when testing locally. It is going to make development difficult if I can't test on my computer locally. Update: strangely when I open the html file on my computer in Safari the linked to fonts are displayed.
Update: is this something to do with .htaccess file? See http://ijotted.blogspot.co.uk/2012/05/self-hosting-web-fonts-for-use-on-your.html "IE and Firefox require that fonts be served from the same domain as the website" Browsers are not able to access the files because the files are stored on my server (not on my computer)?
Code here:
#media screen {
#font-face {
font-family: 'ElenaWebBasic';
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot');
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot?#iefix') format('embedded-opentype'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff2') format('woff2'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
}
First and foremost, it's difficult to test custom fonts if you have them installed on your system. When a browser or email client sees a font in the font stack, it can display the locally installed version if the remotely referenced one fails. So even though it's broken, it will seem like it works. For email, using a remote service like Litmus or Email on Acid is a good way to test emails and web font display.
Depending on what where you purchased the font, they might have a way to reference it on a CDN. Referencing a service (like Google fonts) is currently the easiest way to display web fonts in html email.
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://place-you-bought-the-font.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
I'd recommend looking in the font seller's site to see if they have an option like this.
Here are a few more options to try:
<style type="text/css">
#media screen {
#font-face{
font-family:'Open Sans';
font-style:normal;
font-weight:400;
src:local('Open Sans'), local('OpenSans'), url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
}
</style>
Email has trouble with #import, so you might try using <link> instead:
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
I'm attempting to move from font icons (icomoon.io) to SVG sprites. Is it possible to use SVG sprites without needing < svg > markup for each icon instance?
What I really liked about the font icons was that I didn't have to clutter my HTML with any additional elements to get the icon to display. I usually just targeted a simple class on whatever element I wanted the icon to display and then used pseudo selectors to display the icon, e.g.:
<h1 class="news">News</h1>
h1.user:before {
font-family: 'icons';
content: '\news';
}
That made a lot of sense to me, and all of my icons were easily managed almost completely in CSS. I rarely had to touch my HTML as long as my markup contained appropriate classes.
I've since switched my build system to Grunt and thought I'd give SVG sprites a try. Almost every1 article2 I3 can4 find5 on the subject says you need to add an additional SVG element to your markup wherever you want each instance to display, e.g.:
<h1>
<svg class="icon">
<use xlink:href="#icon-news">
</svg>
News
</h1>
That seems like a step backwards to me, at least in the management of markup. To me, an icon is usually presentation that should be separate from document structure. Are we doing it this way simply because of the state of SVG support in browsers?
Ideally, I'd love to be able to do something like this:
<h1 class="news">News</h1>
h1.news:before {
display: inline-block;
width: px;
height: px;
background: url(icons.svg#news) no-repeat;
}
This post seems to be closer to what I'm looking for, but I'm not sure of browser support and how to do it automatically in a build system like Grunt.
SVGs can be loaded as files exactly the same way as other images using <img> tags or CSS background, and can be used as sprites exactly the same way too. The only difference is that you have to specify the size you want it (because it's scalable, so the browser doesn't automatically know how big it is like it does with PNGs).
Depending on how you want to use the image, loading them this way may or may not be suitable as some SVG features aren't available, but it can be done.
I want to build a website that looks exactly the same across all screen width's, which means the whole website will scale according to the screen's, or more accurately, the viewport's width.
This is relatively easy to do for SVG images and I have all images correctly scaling according to the viewport's width. The viewport's width is the point of reference, from which all images scale. However, the point of reference for the text is different between any desktop browser and the iPhone's Safari (and I assume any mobile browser).
According to my research there seem to be two possible reasons for different sized text: a difference in the default CSS's or a difference in the rendering engines. Since I can't find any reference to pixel sized text on Chrome's default CSS or Firefox's default CSS, I assume this setting comes from the rendering engine.
My IP is dynamic so I can't provide a live example, but here are the screens comparing the same site in iPhone's Safari and Chrome on the desktop. Notice the huge difference in the size of the text.
Is there any way I can make the text have the same relative size in both these browsers?
I found the answer in JavaScript:
onresize=onload=function(){
document.body.style.fontSize=window.innerWidth/20+"px"
}
which sets the text size according to the viewport's width on the body element. Since all the text set in em's is sized in relation to their parents, all the text is sized correctly from the body element.
Furthermore, if you want to avoid the cascading hell by using rems and respect the original layout design from a let's say 1024px width you can stick with this:
onresize = onload = function(){
document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
You should try CSS Unit vw, like this:
body { font-size: 1.5vw; }
However, i am not sure it is supported by mobile browsers...
EDIT
Check for browser compatibility here.
How can i print a webpage exactly how it looks like -- I mean with background images and colors?
(In IE)
Best
Zeesahn
In IE this is configurable from the browser. Check this tutorial for the details. Though I suspect you are looking for a css solution. I have not been able to accomplish this in a consistent fashion.
This is probably the best solution I have come across. It involves list-style... rules to attempt to get the job done. good luck.
Edit - pulled from web-graphics.com
#ti\tle { /* 6. */
display: list-item; /* 1. */
list-style-image: url(banner.jpg); /* 2. */
list-style-position: inside; /* 3. */
letter-spacing: -1000em; /* 4. */
font-size: 1pt; /* 5. */
color: #fff; /* 5. */
}
Some annotations:
We give our h1 the characteristics of a list-item.
We pretend our banner image is a list-style-image.
Firefox wants you to put the image inside.
We make the text disappear into a black hole by means of Malarkey's Image Replacement (MIR).
As MIR doesn't work in Opera, we set the font-size to 1pt and make the text white. This works fine with Opera's default print
settings. Other image replacement techniques rely on moving or
hiding mechanisms, all of which would also hide our image. Hence
small, white text.
As list-style-image is not supported in IE5 and IE5.5, we exclude these browsers with a simple escaping hack.
That's all. It works in IE6, Firefox 1.0 and 1.5 and Opera 8.5 - don't know about Safari, but I expect no problems. Konqueror 3.5 shows a black "H" just below the banner - however, the
By default, Internet Explorer (and some other browsers too, like Opera or Maxthon for instance) prints a webpage without any background images or colors.
To print a webpage with all the background images or colors,
open Internet Explorer and go to Tools->Internet Options->Advanced.
In the Settings window, you will need to scroll down until you find the Printing->Print background colors and images option and check it. After you did that press Apply, then Ok and this should solve the printing problem.
In short, try using a print stylesheet.
Check this question for more info:
How can I print background images in FF or IE?
// In your asp file, create a vbscript variable named prnMode and set it
// to true when in print mode. Then surround your entire tag with this
<body>
<% If prnMode Then %>
<div style="visibility: visible;">
<% End If %>
... your web page goes here
<% If prnMode Then %>
</div>
<% End If %>
</body>
// I did not actually print, but print preview now displays colors and imgs.
Put images in HTML not in CSS
HTML
<img src="../some_images.jpg" />
not
background-images:url(../some_images.jpg);