I have a web page which uses a non-web-safe font (#font-face...) for a header.
This is going to look pretty bad if the viewer's browser does not support this, so is there a way to detect this capability and replace the text with an image if it is not supported?
#font-face {
font-family: 'awesomefont';
src: url('fonts/awesomefont-webfont.eot');
src: url('fonts/awesomefont-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/awesomefont-webfont.woff') format('woff'),
url('fonts/awesomefont-webfont.ttf') format('truetype'),
url('fonts/awesomefont-webfont.svg#awesomefont') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'awesomefont'; /* Substitute with image if font not supported */
}
p {
font-family: 'awesomefont', Arial, sans-serif; /* main body text can use alternative font */
}
#font-face {
font-family: 'Nosifer Caps';
font-style: normal;
font-weight: 400;
src: local('Nosifer Caps Regular'), local('NosiferCaps-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifercaps/v1/5Vh3eVJZ2pCbwAqfFmh1F3hCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
p {
font-family: 'Nosifer Caps', cursive; // is this not the point of defining a websafe font after your non-websafe-font????
}
or do you want to ALWAYS have said font for your header.. in which case I wouldn't even go through the hassle of dealing with custom fonts. Just create your image and use that 100% of the time. The overhead of loading an entire font lib for one header image is just silly.
I'm not sure if there is a way to do what you're asking. But I generally use cufon for using custom fonts on my websites. It uses canvas to create an image from the text. If a browser does not support javascript, it simply displays the raw text
http://cufon.shoqolate.com/generate/
One option is to use one of the JS libraries which measure the width of the string to detect if the font is available. Unfortunately, functionality is not available in JS to do what you want directly.
Here are some implementations which use the string measurement technique:
http://derek1906.site50.net/works/jfont.php
http://www.lalit.org/lab/javascript-css-font-detect/
Related
I'm trying to load the external font for my website but it doesn't work as I expected. I want the text to be bold and I loaded the bold version but it doesn't seem to work. I believe JsFiddle work with external font so I copied my code and put it on JsFiddle but still doesn't work.
Here's my jsfiddle
http://jsfiddle.net/noppanit/sr1eL3b0/2/
Here's how I load the font.
#font-face {
font-family:'Andale Mono MT Std Bold', 'Open Sans', 'arial', 'sans-serif';
src: url(http://www.salon87.nyc/wp-content/themes/salon87/vendor/fonts/AndaleMonoMTStd-Bold.ttf);
/* use src to point to the location of your custom font could be from your local server folder (like ./fonts/) or a remote location. */
}
section {
font-family:'Andale Mono MT Std Bold'
}
The html is kinda messy because I just copied it form the site. Not sure if I missed anything obvious.
Because browsers load different files for fonts I try and include all of the different types. Your largest issue is that the font-family needs to be the identifier for the font. You are treating it as though it should have "fall back" names, which can't be done.
#font-face {
font-family:'Andale Mono MT Std Bold';
font-weight:700;
src: url(FILE_LOCATION.eot) format('embedded-opentype');
src: url(FILE_LOCATION.eot?#iefix) format('embedded-opentype'),
url(FILE_LOCATION.woff) format('woff'),
url(FILE_LOCATION.ttf) format('truetype'),
url(FILE_LOCATION.svg#levenim) format('svg');
}
section {
font-family:'Andale Mono MT Std Bold'
}
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Source.
I've researched this a fair bit and the answer I've found is that there is only a limited number of web fonts available which seems a bit old fashioned to me. Would it not be possible to upload a custom font to your web host and use javascript (or something else, forgive my ignorance and noobishness) to read the custom font so when a visitor comes to your site it doesn't matter that they don't have your custom font installed it's just loaded off the site?
In your CSS :
#font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}
p.custom_font{
font-family: cool_font; /* no .ttf */
}
From http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css
You can embed custom fonts using CSS.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyFontFamily', Fallback, sans-serif;
}
source: css-tricks.com
I'm thinking about a script that can change a webpage's font appearance from Arial to some other font face of my choice.
How should I go about doing that?
I understand: * { font-family: "SomeFont"; }
But this won't achieve the objective to only target Arial text.
I can use jQuery or Javascript, whichever is more efficient and fast.
Edit: Seems like people have difficulty understanding the question. So I'll explain some more, I just want the Arial text on the webpage, if it exists, to change in appearance.
I was going to suggest looping through the styleSheets array and, for each style sheet, loop through the rules, find the ones defining Arial as the font, and change that to the other font you want. That way you wouldn't have to visit every element on the page.
The problem with that suggestion, though, is inline styles on elements.
So I hate to say, to do this you'll have to visit every element on the page. For most pages, that won't be a problem, but your mileage may vary.
Here's how you'd do it with jQuery:
$("*").each(function() {
var $this = $(this);
if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) {
$this.css("font-family", "SomeOtherFont");
}
});
Can't say I like it, though. :-) You can avoid building the massive list ($("*") builds a jQuery object containing all of the page elements, which can be quite large) at the outset if you do a recursive walk instead, e.g.:
$(document.body).children().each(updateFont);
function updateFont() {
var $this = $(this);
if ($this.css("font-family").toLowerCase().indexOf("arial") !== -1) {
$this.css("font-family", "SomeOtherFont");
}
$this.children().each(updateFont);
}
That may be preferable, you'd have to profile it.
Doing it without jQuery would involve recursively looping through the childNodes of each element and using either getComputedStyle (most browsers) or currentStyle (IE) to get the font information, then (if necessary) assigning to element.style.fontFamily.
Actually, a "both and" solution would probably be best. First, update the stylesheets, and then walk the tree to catch any inline styles. That way, presumably you'll get most of them by changing the stylesheets, which avoid the ugliness of the piecemeal update. Also, you don't have to use css() (jQuery) or getComputedStyle / currentStyle (without jQuery), you can just check element.style.fontFamily, so it would be more efficient.
Beware that IE's stylesheet object uses an array called rules, others use cssRules, but other than that they are largely the same.
It is possible to change only Arial using #font-face.
First link to a css:
<link rel="stylesheet" href="/css/fonts/luxi-Sans-fontfacekit/stylesheet.css" type="text/css" charset="utf-8" />
Then in your css refine what Arial is:
#font-face {
font-family: 'Arial';
src: url('luxisr-webfont.eot');
src: url('luxisr-webfont.eot?#iefix') format('embedded-opentype'),
url('luxisr-webfont.woff') format('woff'),
url('luxisr-webfont.ttf') format('truetype'),
url('luxisr-webfont.svg#LuxiSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Arial';
src: url('luxisb-webfont.eot');
src: url('luxisb-webfont.eot?#iefix') format('embedded-opentype'),
url('luxisb-webfont.woff') format('woff'),
url('luxisb-webfont.ttf') format('truetype'),
url('luxisb-webfont.svg#LuxiSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
Only Arial is changed (in my example to Luxi Sans). All other fonts remain as usual.
If I set the font-family to Verdana-Bold, it doesn't work in FF (version 18) but Chrome (version 24) is fine.
If I change the font-family to Verdana, it works in both browsers.
Similarly, CourierNewPS-BoldMT, doesn't work, but Courier does.
Does anyone know of a generic solution to solve this? like a JS or a CSS technique that could convert the fonts specific to the browser?
http://jsfiddle.net/skUxK/4/
Here's the description of the use case:
I have a HTML5 app, that also has a equivalent windows desktop version, a mac app and a iOS and android app.
All these apps can make changes to a text, and then store those in a XML file.This file can be then be loaded any app.
If you just want to use the bold version of a font, use the font-weight property.
font-family: verdana;
font-weight: bold;
Use #font-face so that every single browser can display the exact same font.
For more information: http://www.css3.info/preview/web-fonts-with-font-face/
#font-face {
font-family: MyFont;
src: url('mybeautifulfont.otf');
}
body{
font-family: 'MyFont', 'Verdana-Bold', 'Verdana';
}
If you only just want bold text, then:
body{
font-family: 'Verdana-Bold', 'Verdana';
font-weight: bold;
}
As far as I can tell, bolded Verdana displays fine on Firefox.
I read that Adobe has released some free web fonts
The instructions say you need to import a script like this:
<script src="http://use.edgefonts.net/FOO.js"></script>
then you will be able to write CSS like this:
#foo {font-family: FOO, serif;}
What new sourcery is this?!?
What is this trick called, and what is the browser support like?
Let me introduce you to some CSS:
#font-face {
font-family: 'Foo';
font-weight: normal;
font-style: normal;
src: url("foo.eot");
src: url("foo.woff") format("woff"), url("foo.ttf") format("truetype"), url("foo.svg#foo") format("svg");
}
p {
font-family: Foo, sans-serif;
}
#font-face defines a web font and gives it some sources to try depending on what browser you're using. the font-family property tells it what you want to call it later on.
Here's the MDN Documentation for #font-face