with this code i can get the cross browser compatibility, but the problem is, here i need to add lots of file type of the same font, how to avoid that and still able to get the cross browser compatibility?
#font-face {
font-family: 'Name';
src: url('location.eot');
src: url('location.eot#iefix') format('embedded-opentype'),
url('location.woff') format('woff'),
url('location.ttf') format('truetype'),
url('location.svg#Name') format('svg');
font-weight: normal;
font-style: normal;
}
Google font is a easiest and I think best way to use different fonts on a webpage.
So I'll recommend Google Font unless you need something more extra like iconic font or any other unique fonts.
You cant really avoid it as the browsers has different support. If the issue is that you don't want to host them yourself Google Fonts has a wide range of good fonts that you can use for free. But if you have a font that is more unique then as stated you can't do it in any other way.
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;
}
#font-face {
font-family: 'Somefont;
src: url('fonts/somefont.eot');
src: url('fonts/somefont.eot?#iefix') format('embedded-opentype'),
url('fonts/somefont.woff') format('woff'),
url('fonts/somefont.ttf') format('truetype'),
url('fonts/somefont.svg#Somefont') format('svg');
font-weight: normal;
font-style: normal;
}
This is the css we usually use for embedding a font on a webpage.
I am a font designer and therefore I know (and have seen) that the curves of ttf are distorted always a bit when the design was converted from an otf font. (I use fontsquirrel Web font generator).
Is there a way to replace the whole ttf file with the otf and is this reliable on all browsers specially webkit?
I made some experiments and found it quite confusing to say which data is actually used by specific browsers.
What I want to achieve is to abolish as much as possible the ttf files in the favor of otf.
Thanks a lot for answers.
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 see in the top of font awesome css this:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
I just wonder why there are eot, woffm, ttf (svg is for IE), fonts loaded here?
Is for browser compatibility? Or just there are different fonts on each file?
Can I leave safely just one?
You are right, this is for browser compatibility.
You shouldn't care about extra HTTP connections because almost all browsers that support #font-face will only download the first file that matches its supported format (I'm looking at you, oldIE!).
Here's an great post by Paul Irish that extensively explains how #font-face works.
It's my understanding that different browsers/platforms require different font formats, so this is just covering your bases.
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.