My site's text is 'Cooper Black' as dictated by in my CSS. When viewed in Android Chrome browser i see that the text is default and not Cooper Black.
I'm assuming my font is not preloaded, anything i can do?
.sitetext-white {
font-family: 'Cooper Black';
color: white;
}
Cooper Black is not what we call a Web Safe Font, because it is not found on a high percentage of OS's. Even then, font's like Arial are only found on Windows machines so they need to have a fallback.
The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available:
If you want to use a non-standard font, we have what we call Font Face.
With the #font-face rule, web designers do no longer have to use one of the "web-safe" fonts.
In the new #font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file(s).
If you want to find a nice font to use with #font-face, I would suggest you head over to Font Squirrel and use the Webfont Generator.
How to best set up your #font-face syntax can be found on this article by Paul Irish from Google:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
This is the Fontspring #font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf.
If your application is on the web, you can also use Google Fonts which has a very nice library, and means that all you need to do is link to it in your website.
Related
I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
And they support a nice amount of browsers.
How does one do that? While also preventing people from having free access to download the font, if possible.
Generically, you can use a custom font using #font-face in your CSS. Here's a very basic example:
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
Then, trivially, to use the font on a specific element:
.classname {
font-family: 'YourFontName';
}
(.classname is your selector).
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
while also preventing people from having free access to download the font, if possible
Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
Taken from here.
You have to download the font file and load it in your CSS.
F.e. I'm using the Yanone Kaffeesatz font in my Web Application.
I load and use it via
#font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
EOT is IE only,
TTF has partial IE support,
WOFF enjoys the widest support but is not available in some older browsers
WOFF 2.0 support is a work in progress for many browsers.
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
#font-face {
font-family: 'besom'; !important
src: url('fonts/besom/besom.eot');
src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
url('fonts/besom/besom.woff2') format('woff2'),
url('fonts/besom/besom.woff') format('woff'),
url('fonts/besom/besom.ttf') format('truetype'),
url('fonts/besom/besom.svg#besom_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
here's a nice tutorial: Make your own font face web font kit
Although im not sure about preventing someone from downloading your font.
Hope this helps,
there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog
It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.
I am working on Win 8, use this code. It works for IE and FF, Opera, etc.
What I understood are : woff font is light et common on Google fonts.
Go here to convert your ttf font to woff before.
#font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months.
And it makes no sense to prevent people from using fonts.
A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
But if you want to implement a font into your website read this:
There is a pretty simple and free way to implement fonts into your website.
I would recommend Google fonts because it is free and easy to use.
For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)
This is how it would look like:
HTML
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}
I am trying to use "HelveticaNeueLTStd25UltraLight" on my website. On OSX, it looks perfect in every browser. On Windows, it's horrible:
Chrome:
IE:
I am using the following CSS (if it matters):
#font-face {
font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.ttf');
}
body{font-family:'HelveticaNeueLTStd25UltraLight'; font-weight:normal;}
/*** IE FONT ***/
#font-face {font-family: 'HelveticaNeueLTStd25UltraLight';
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot');
src: url('../fonts/HelveticaNeueLTStd25UltraLight.eot') format('embedded-opentype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.woff') format('woff'),
url('../fonts/HelveticaNeueLTStd25UltraLight.ttf') format('truetype'),
url('../fonts/HelveticaNeueLTStd25UltraLight.svg#HelveticaNeueLTStd25UltraLight') format('svg');
font-weight: normal;
font-style: normal;}
Can someone explain why this is? What can I do about it? If I must use another font, which fonts are safe to use?
Windows just has crappier font rendering in browsers than OSX or iOS does. Sometimes you can fix it by picking specific font sizes at which the browser antialiasing doesn't look too awful. There is also the text-rendering: optimizeLegibility CSS property but in my experience it often does more harm than good.
Pick a different font that is more optimized for web display. Google Web Fonts is a good place to start. They have lots of great modern fonts that are all optimized to be used as webfonts, and on top of that they provide the CSS etc - you just need to <link> to their external CDN CSS file in your <head> and bam you're good to go. "Lato" and "Raleway" are fonts I use in place of Helvetica Neue sometimes.
Also, it's almost certainly illegal to embed that font anyway since Helvetica Neue LT Std is a commercial font, so...
Every browser renders fonts differently using different methods that is why you are including so many different versions of the font, as each is used by a different browsers. OSX has one of the best font rendering engines, things look great, but look at in IE or FF or Chrome and things tend to be different. There isn't much you can do apart from trying a font that is a bit thicker.
You can see maybe if maybe font-weight: 500 helps.
I am trying to use custom fonts on my website and in the css I have the following code:
#font-face {
font-family: 'Sketch';
src: url('../fonts/Sketch.eot');
src: url('../fonts/Sketch.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
ul#holder {font-family:'Sketch'}
The fonts do appear as they have to in Firefox. In chrome, the font do not seem to be rendering smoothly and do not appear as good as in firefox (Should I drop the idea of using fonts in my sidebar and use images which would show the smooth text instead? ;-/)
In IE, the fonts are not appearing at all. What should be done to get proper smoothening of these fonts in Chrome and get these working in IE?
Different browsers supports different font formats:
So you need to create your font in all formats. You can use Font Squirrel (thank you, effectica).
And then, you can import them like that:
#font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
}
That's not the only possible way. You can find more complete information on this question at Paul Irish's blog.
And, anyway, their appearance may differ a little in different browsers.
All the main browsers have slightly different font rendering engines / techniques and they have different quality of rendering output. So your fonts are unlikely to be 'pixel perfect' between the various browsers and some quality differences will appear. Which one ends up looking the best depends on the font. I have a glyph font that looks great on Chrome and IE but looks a little washed out in Firefox...
Anyway, there is a little hack that you helps you to get fonts to work on IE, see the second src line. This is needed because whilst adding extra font formats ensures support for every browser, unfortunately it causes problems in versions of IE before IE9. Those older browsers see everything between the first url(' and the last ') as a single URL request, so will fail to load the font. This hack tricks the browser into thinking that the rest of the src property are arguments of that query string, so it goes looking for the correct URL and loads the font:
#font-face {
font-family: 'Sketch';
src: url('../fonts/SketchRockwell.eot');
src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'),
url('../fonts/SketchRockwell.woff') format('woff'),
url('../fonts/SketchRockwell.ttf') format('truetype'),
url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
The above came from Font Squirrel’s #font-face Kit Generator which can be accessed at http://www.fontsquirrel.com/fontface/generator. There you can upload your font and convert it to whichever formats you wish. You can also control the CSS syntax it outputs, subset the characters to reduce file size, and use more options to fine-tune the fonts
Also if you are going to use Bold or Italic on you text then you need to include version of the rule that change the font-weight and font-style accordingly for each combination, so the browser knows what font to use when it encounters a CSS rule with bold in it.
Each font typically has a design purpose and was created for a specific job. Most commercial fonts were not designed to be viewed at small sizes on a screen, so in many cases it makes the most sense to reserve these #font-face for headings and continue to use web-safe fonts like Georgia and Lucida for body copy.
Another aspect of fonts that can affect legibility is how they are anti-aliased and hinted. Right now, web fonts are generally more jagged around the edges than traditional fonts, even when anti-aliased, usually because most were not designed to be viewed on screen. Higher quality fonts, as well as fonts that were designed for the web, have better hinting,
Here is a great URL for creating embeddable font packs:
http://fontface.codeandmore.com/
Upload your TTF or OTF font and it creates the entire font kit for you, complete with
implementation HTML and CSS examples.
Cheers!
Edward said it all. Chrome used to drive me insane for the way it displayed certain fonts.
If you have the font file you can use font squirrel to generate the code as well as all font files that you need for all browsers.
Present I see lot of web sites use true type fonts. I want to to know how to use true type fonts in our applications and does it affect the load time of the pages ?
HTML5 allows to use TTF fonts in your CSS:
#font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
To use it:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
Check more information in html5rocks.
I want to update the accepted answer due to a significant passage of time. The following is what Font Squirrel outputs under their recommended 'Optimal' setting. Supporting .ttf at this point is no longer important and should be ignored.
font-family: 'Tagesschrift';
src: url('tagesschrift.woff2') format('woff2'),
url('tagesschrift.woff') format('woff');
font-weight: normal;
font-style: normal;
You use Font Embedding.
It will affect the overall load time of the page as the font data has to be downloaded as well as the other content, styles etc. However, it will be cached so only impacts on the first view of the page.
Font embedding can be a bit complicated due to browser compatibility issues. For example, Safari only supports SVG fonts. IE only supports .eot, which must first be converted from .ttf
I have found the easiest way to use custom fonts is with Google Fonts
Besides having the free google font directory to choose from, there are a few providers that provide a much wider selection of fonts for free and to purchase.
if i want to have some text show up in a calligraphy font, how do i know how it will render of the users computer. How do i know what fonts that person has on the computer or does it matter? any good examples of doing this in css?
would i be better off putting something together in photoshop and saving as an image?
If you are using the font for headings and fancy page elements that are not going to change often I would use an image from photoshop.
If you want to use the font for the main body of text I would suggest defining a font family in css. I would find the font you want to use on your current os if its a font you found and downloaded chances are the end user wont have it. If its a system font or a font that comes with a major software application like ms word there is a good chance it will be available on the end users machine. Once you have found the font you want to use I would then do a little research and see if you can find something similar in a mac flavour and even a Unix flavour.
body
{
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman"
}
Its always good to use a backup font that you know will work on anyone's machine the browser will select the most applicable in the list starting with the first font stated working its way until it finds a match.
You can embed TTF font files into CSS.
A good example of it is here:
/* DejaVu Sans 2.24
http://dejavu.sourceforge.net/wiki/index.php/Main_Page */
#font-face {
font-family: "DejaVu Sans";
src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]")
}
Edit:
Note: This will only work in Firefox, and possibly Chrome.
Microsoft has published a document about how to embed fonts into a web page using the Embedded OpenType format. It involves converting the font to a an EOT file and then referencing it in the stylesheet using the following syntax:
#font-face {
font-family: Piefont;
font-style: normal;
font-weight: normal;
src: url(PIE0.eot);
}
(This was pulled from an official online demo here).
Based on Boldewyn's answer below, I would bet that you could also use a TTF file in the src: parameter.
I tend to use #font-face on my personal websites.. but it depends on what you are doing it for.
First.. the questions.
Is this static text or are we talking about post headlines etc.
If static text, like the main headline, go with an image.
<h1><strong>Same text as the image(seo)</strong></h1>
and in the css
h1 {background:url(/images/use-the-text-as-image-name-for-seo.png) no-repeat top left; width:100px; height:30px;} /* width and height being image width / height /
h1 strong {position:absolute;left:-8000px;}/ makes sure the text doesn't show up over the image, yet doesn't hide it for seo/screen reader purposes */
If you are talking about something that needs to be dynamic, and you need more than graceful degredation, go with sIFR. If graceful degredation is acceptable, go with #font-face
To add to the #font-face supporters: Paul Irish published a version of this CSS declaration, that works in all newer browsers plus all IEs down to IE5.5. However, you need the font as both TTF and EOT formats for this technique to work.
If the license of your font allows this, there are lots of tools to convert back and forth between the formats. Just google for it.