I have this code in the beginning of my CSS stylesheet (linked to my index.html, of course):
#font-face {
font-family: "Calibri";
src: local("Calibri"), local("Calibri"), url("fonts/Calibri-Bold.otf") format("truetype");
}
And i'm using:
#id {
font-family: Calibri, Verdana, Arial, sans-serif;
}
But it still doesn't work. What's wrong with my code?
You have local("Calibri") repeated twice in your src property.
Also, keep in mind that IE does not support local() so if you are viewing your site in IE, it won't load the font. On top of that, IE, to my knowledge, only supports the EOT format.
For an OTF font, use format("opentype") (you have "truetype").
One more thing: If this is Microsoft's Calibri font, keep in mind that the license may not permit this type of use. I'm not familiar with the license so can't say for sure if this is the case.
In general, the accepted code to use at the moment is this:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
as suggested by Paul Irish: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
The smiley for local is because you can't be sure the user's local file is the one you intend to be (read the page for the details, it's an interesting read.)
RESOLVED: it supports TTF (not OTF) files.
Not an expert on the matter but you could try this tool here.
It might at least help generate an example of what you should have.
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 have a jsfiddle set up with just a basic #font-face css and an h2. The font files that the css is referencing are all on the server, however if you enter the url for the woff file it says its not found. I have triple checked that the file exists exactly where it is pointing but I guess you just can't see woff files by entering them into url bars (edit: same for the svg).
So, why is the font in this jsfiddle not in open sans?
http://jsfiddle.net/rw2sbq8y/1/
html
<h2>Search for inventions</h2>
css
h2 {
font-family:'open sans-test';
font-size:24px;
font-weight:normal;
}
#font-face {
font-family: 'open sans-test';
src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot');
src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.woff') format('woff'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.ttf') format('truetype'),
url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
(I am having an issue with fonts on the website I'm currently working on and I think this bit right here is the first step to fixing it)
Is the server hosting the fonts your server, or a 3rd party server like a CDN?
If it's yours, a common problem that I have encountered in the past is that the server doesn't know how to serve the font to you.
Fixing this is normally a simple matter of adding the MIME type for each font format type inc. EOT, WOF etc. To the server.
You should do a Google search on how to do this for your server type (eg if it's IIS, or Apache or something else).
Eg "how to add mime type to IIS".
You can also find the correct MIME type for each font format by doing a search. The results come up pretty easy to find, but here is a big list of valid MIME types (just find the ones you need from the list): http://www.freeformatter.com/mime-types-list.html
i remember my IT teacher saying something about if i wanted to download my own font and put it on my website i will need to upload the font file as well. Thats straightforward but if i wanted to host my website how would i go about this?
Thanks
The way you control the fonts used in you HTML is through CSS. To use a custom font, you must first define it in the CSS like so:
#font-face {
font-family: myFirstFont;
src: url(somefont.otf);
}
After defining it, you can use it by applying it in other CSS like so:
div {
font-family: myFirstFont;
}
The font files that are generally used are TrueType (.ttf) or OpenType (.otf). There are other types that a proprietary, such as *.eot (Internet Explorer).
You will need to upload these font files along with the other files such as .html, .css, .js etc.
There are few ways to implement font on a website, but first I would strongly recommend reading few articles as using font-face, base64 embedding fonts in css and Getting started with Google fonts. I am sure everything will be clear than.
In order to make add costum font support for all type of browser then you should firstly convert the costum font to other font formats like eot, woff, etc. There are a couple of online converters that do that (they will autogenerate actualy the css rules to add to your site.
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-jvpy8e');
src:url('fonts/icomoon.eot?#iefix-jvpy8e') format('embedded-opentype'),
url('fonts/icomoon.woff?-jvpy8e') format('woff'),
url('fonts/icomoon.ttf?-jvpy8e') format('truetype'),
url('fonts/icomoon.svg?-jvpy8e#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
I found this answer here regarding graphic design:
https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-fonts-are-you-using-that-rend
This is exactly what my fonts are doing, but I'm trying to find out if there's a way to prevent this using html or css or anything web-based.
I'm using "platin" as my font. Do I just need to find a different font?
Any other thoughts on the topic?
If this is caused by using web fonts, I found this SO post (and the accepted answer) helpful: Google webfonts render choppy in Chrome on Windows
My solution was to use the Webfont Generator tool (http://www.fontsquirrel.com/tools/webfont-generator) to convert my font into the variety of web formats and copy their provided CSS into my stylesheet. I was using the Fauna One font from Google, so I had to download it from Google and then upload it into FontSquirrel.
The key is to put the SVG line above TTF, so that Chrome uses it first. Here's what worked for me:
#font-face {
font-family: 'Fauna One';
src: url('fonts/faunaone-regular-webfont.eot');
src: url('fonts/faunaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/faunaone-regular-webfont.svg#fauna_oneregular') format('svg'),
url('fonts/faunaone-regular-webfont.woff') format('woff'),
url('fonts/faunaone-regular-webfont.ttf') format('truetype');
}
(This is 99% the same as the CSS file generated by the Webfont Generator, just rearranged a bit).
To get webfonts to render with good antialias in Chrome on Windows, you need to use this format in the font declaration:
#font-face {
font-family: 'Futura';
src: url('futura.eot');
src: url('futura.eot?#iefix') format('embedded-opentype'),
url('futura.woff') format('woff'),
url('futura.ttf') format('truetype'),
url('futura.svg#futura') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Futura';
src: url('futura.svg#futura') format('svg');
}
}
Basically, you need to force Chrome to use the SVG font format. You can do this by moving the url for the .svg version to the top, however Chrome on Windows has had problems with messing up the layout when doing this (up to and including version 30). By overriding the font declaration using a media query, these issues are solved.
Another thing: This trick will cause the browser to download two versions of the font but that's a small price to pay for good looking text!
Also: Sometimes the baseline position doesn't match between OpenType fonts and SVG fonts but you can adjust this by simply editing the SVG font files. SVG fonts are xml based and if you look at the declaration
<font-face units-per-em="2048" ascent="1900" descent="-510" />
You can change the value for ascent and get it to match the other font format versions.
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.