I am trying to embed my custom font in my website, got a link folder from http://www.fontsquirrel.com/fontface/generator this site after uploading a font on this site, it gives me this CSS:
#font-face {
font-family: 'VoltaEFTU-Regular';
src: url('voltaeftu-regular-webfont.eot');
src: local('☺'),
url('voltaeftu-regular-webfont.woff') format('woff'),
url('voltaeftu-regular-webfont.ttf') format('truetype'),
url('voltaeftu-regular-webfont.svg#webfonttKmU3jX8') format('svg');
font-weight: normal;
font-style: normal;
}
But it's not working on my machines. How can I embed a font in my website?
Thanks
Mayur Mate
If I were doing it, I would take a look at how the Google Font API works…
#font-face code looks correct, but if you want use this font example in <p> you must use font-family: 'VoltaEFTU-Regular'; in this element. Look into generated demo.html file.
Related
How can I test a webpage on my own machine as if I didn't have a certain font?
E.g. My web page uses the font Roboto. My computer has the Roboto font installed locally. How can I see what this webpage will look like on a computer without that font installed?
Assume that the font isn't included in the web page through some CDN or other method.
Deactivate or uninstall the font temporarily or alter the stylesheet to not include the declaration when requested from localhost.
Rename the font family in your CSS, so instead of defining the font family like this -
#font-face {
font-family: 'Roboto';
src: url('../fonts/roboto.eot');
src: url('../fonts/roboto.woff') format('woff'),
url('../fonts/roboto.ttf') format('truetype'),
url('../fonts/roboto.svg') format('svg');
font-weight: normal;
}
Which will use system font if Roboto is installed, Change it to something like this -
#font-face {
font-family: 'Roboto_web'; //notice the name here
src: url('../fonts/roboto.eot');
src: url('../fonts/roboto.woff') format('woff'),
url('../fonts/roboto.ttf') format('truetype'),
url('../fonts/roboto.svg') format('svg');
font-weight: normal;
}
So the font Roboto_web is something which is not installed in your system so it will always use web font. This way you will not have to uninstall or disable it from system.
And in the CSS you can use it like this-
.sample_class{font-family:"Roboto_web"}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Add this into your head.
I have a huge problem with the rendering of the font 'Roboto' on the embedded google maps on my site:
Last year we decided to use on our site the font Roboto to render our head titles and vignette.
The site it's in greek language and so i loaded the fonts with greek extended:
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:900|Tinos:700&subset=greek-ext,latin-ext);
My problem now is: when my page load it does load the fonts right, but when it comes the embedded Google map, my fonts got lost...
I guess google maps load the 'roboto' font without the support to greek language and does an overwrite to my command... am I right?
Can somebody help?
I had the same problem with exactly the same font. When Google Maps has loaded their fonts all my previous styles changed. I decided to use simple solution. When You have Your web font link, for example:
<link href='http://fonts.googleapis.com/css?family=Roboto:300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
It produces:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
As You see it has font-family property. I've decided to change it to, for example, to 'RobotoL':
#font-face {
font-family: 'RobotoL';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'),
url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Pru33qjShpZSmG3z6VYwnT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
And then use it in your document, for example:
body {
font-family: 'RobotoL';
font-weight......
}
Then there is no need to use Google generated import or link, but write Your own. There is no Google Maps Roboto Font problem after version 3.14 any more )
There is only one tricky part to extract this long .woff url after Google inserts it, but You can do it easily using every modern browser developer tools (Firebug etc). I think it works for Condensed and other Roboto versions as well.
Ok, thanx for the workaround a lot!
So, I downloaded the fonts I use from fontsquirrel.com; Roboto, thank Christian Robertson, is a free web font ;)
I left the css code suggested from fontsquirrel (here an example from a specific type):
#font-face {
font-family: 'robotobold';
src: url('/fonts/Roboto-Bold-webfont.eot');
src: url('/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Roboto-Bold-webfont.woff') format('woff'),
url('/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
url('/fonts/Roboto-Bold-webfont.svg#robotobold') format('svg');
font-weight: 700;
font-style: normal;
}
and changed, as you told, all the calls to the font:
.class{font-family: 'robotobold', sans-serif;}
It's working with the Google maps, thanx!
I'm using #font-face on my site and it does not work, 404 error on the .woff file. I have the fonts located at the root but could not find fonts
this is my font css file what is problem?
#font-face {
font-family: '---_2regular';
src: url('----regular-webfont.eot');
src: url('----regular-webfont.eot?#iefix') format('embedded-opentype'),
url('----regular-webfont.woff') format('woff'),
url('----regular-webfont.ttf') format('truetype'),
url('---regular-webfont.svg#---_2regular') format('svg');
font-weight: normal;
font-style: normal;
}
You must contact your Hosting company. Then They must add .woff extension to mime types.
Possible, your problem can been solved.
All you can read about woff and having them on your site:
http://www.google.com/fonts
Ensure your fonts located in the same directory as the css file, unless you have specified a path otherwise.
Give http://www.fontsquirrel.com/tools/webfont-generator a try, it gives an example HTML page with the font embedded, hopefully it should point you in the right direction!
Hello,
I am working on adding Font Awesome to my website.
On the Font Awesome github page it says simply:
"Install FontAwesome.otf and visit the copy & paste page. Happy designing"
Please can someone advise me - do I need to install all those other files that come in the folder downloaded from github? Those other files being:
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
Thank you
Yes :) I would install all of them. They are font files for different browser support.
Upload the files to your website and use #font-face in CSS
http://www.font-face.com/
This ensures the most amount of users will be able to see your font.
Here's an example:
#font-face {
font-family: 'myFont';
src: url('includes/fonts/DejaVuSans-webfont.eot');
src: url('includes/fonts/DejaVuSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/LDejaVuSans-webfont.woff') format('woff'),
url('includes/fonts/DejaVuSans-webfont.ttf') format('truetype'),
url('includes/fonts/DejaVuSans-webfont.svg#DejaVuSansBook') format('svg');
font-weight: normal;
font-style: normal;
}
body{ font-family: myFont, arial; }
So firefox doesn't want to load my fonts, the path is right I also so the request in Firebug, but it won't render it. On other browser it works perfect, here is my code:
#font-face {
font-family: 'Gill Sans';
src: url('/fonts/gillsansstd-webfont.eot');
src: local('☺'), url('/fonts/gillsansstd-webfont.woff') format('woff'), url('/fonts/gillsansstd-webfont.ttf') format('truetype'), url('/fonts/gillsansstd-webfont.svg#webfontCBlAmwSC') format('svg');
font-weight: normal;
font-style: normal;
}
I'm using wordpress and site address is set to www.site.com si i've read that on www. sites firefox won't render the fonts or something like that.Do you know a solution or something?
Solved when you link the css file just do /path/to_the_file
For some people, probably not your case because you solved it already, if the font extension is correct the problem could be on the MIME type extension, if you are using IIS be sure to tell him the MIME type or you are gonna face a nice 404