I am able to display fonts in chrome, but not in firefox. I'm wondering if this is an issue because I'm using the bootstrap framework. Here's my code:
#font-face
{
font-family:"bodyFont";
src: url("http://caseymmiller.com/galapagos/fonts/museosans_300.otf");
}
body
{
margin: 0;
font-family: "bodyFont";
font-size: 15px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
Also, upon uploading it to my server, only one font is now appearing in chrome... and local sourcing wasn't working so I removed it. I am quite confused. http://caseymmiller.com/galapagos/bootstrapInvasive/Invasive.html
This is what I have in the css now. I tried what you listed before, but when sourcing both urls for each font, none of them would appear. That's why some are commented out right now. These are the sources that I want to use from now on.
#font-face
{
font-family:"headerFont";
src: url("http://livinggalapagos.org/static/Fonts/qhyts__.ttf");
/*src: url("http://livinggalapagos.org/static/Fonts/qhyts__.woff");*/
}
#font-face{
font-family:"subHeadFont";
src: url("http://livinggalapagos.org/static/Fonts/museosans_500.ttf");
src: url("http://livinggalapagos.org/static/Fonts/museosans_500.woff");
}
#font-face{
font-family:"bodyFont";
src: url("http://livinggalapagos.org/static/Fonts/museosans_300.ttf");
/*src: url("http://livinggalapagos.org/static/Fonts/museosans_300.woff");*/
}
#font-face is a complicated property. Here are some resources that might help you to code a "cross-browser" #font-face.
https://developer.mozilla.org/pt-BR/docs/CSS/#font-face
http://www.fontsquirrel.com/tools/webfont-generator
I'm wondering if you don't have a typo in 2 of your properties?
src: url('fonts/museosans_300-.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/museosans_300-.ttf') format('truetype'), /* Safari, Android, iOS */
Shouldn't these two be
src: url('fonts/museosans_300-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/museosans_300-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
Note the added webfont at the end of the file paths.
Be sure to clear your browser cache after making these changes as well.
Good luck!
Related
This question already has answers here:
#font-face fonts not working
(2 answers)
Closed 8 years ago.
I need to set a font family in my web page with thte #font-face, but I can't make it work propertly: This is the content of my css file
#font-face {
font-family: knockout;
src: url('../fonts/knockoutHTF27.ttf');
}
body {
font-width: normal;
font-size: 20px;
font-family: knockout !important;
color: #223041;
text-align: center;
}
I've tried the same code in two diferent computers and it works pefercty in one of them but doesn't work in the other. What could be wrong?
You should try with full embedding, with all the quotation marks. It clears possible malfunctions on different browsers/OS.
#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 */
}
Then, use it like this:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
As mentioned in a previous answer, if needed, you can use http://www.fontsquirrel.com/ or one of other font-face generator services on the web, to get all needed font formats.
Try after removing ''
src: url(../fonts/knockoutHTF27.ttf);
You must use other font file format for different browesers not only .ttf, .woff, .eot. And check your path
I'm trying to get a font working from local storage.
#font-face {
font-family: const;
src: url(const.ttf);
}
.fp_title1 {
font-family: 'const', trebuchet ms;
font-size: 350%;
font-weight: 100;
-webkit-text-stroke: 1px;
}
This won't work. I've tried renaming the file, using the 'font-family' with and without quotes...
I've also tried to link the font with HTML
<link href='CSS/const.ttf' rel='stylesheet' type='text/css'>
It's in the same folder, the name is right. I don't get it.
EDIT: My CSS file is already linked, the font is .ttf
You might have 2 mistakes in code: path and extention. And use the following formats as well as ttf:
#font-face {
font-family: 'const';
src: url('const.eot'); /* IE9 Compat Modes */
src: url('const.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('const.woff') format('woff'), /* Modern Browsers */
url('const.ttf') format('truetype'), /* Safari, Android, iOS */
url('const.svg#svgFontName') format('svg'); /* Legacy iOS */
}
urls that helps to create web fonts:
http://www.fontsquirrel.com/tools/webfont-generator
http://www.font-face-generator.com/
CSS has a .css filename extension, you gave it .ttf
I am trying to use a custom font in CakePHP but it doesn't seem to be working.
I am getting the font from http://www.dafont.com/ssf4-abuket.font (A Street Fighter font!!). And I store the ttf font file to webroot/css.
This is my CSS:
#font-face {
font-family: 'SF';
src: url('StreetFighter.ttf') format('truetype');
}
p {
height: 50%;
margin: 30px 0;
text-align: center;
font-size: 2.2rem;
font-family: 'SF';
color: #000;
}
However, when I use a different font such as the Arkitech from http://www.1001freefonts.com/ with the same code but different filename it works.
As you are only having a .ttf file for your font-face, not all browsers can use .ttf font files. You have to declare alternative font formats in the #font-face css.
You can generate these other font formats with an online converter. (for example: http://freedockstar.com/fontface/).
Then you need to have the following font-face declaration:
#font-face {
font-family: 'SF';
src: url('StreetFighter.eot'); /* IE9 Compat Modes */
src: url('StreetFighter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('StreetFighter.woff') format('woff'), /* Modern Browsers */
url('StreetFighter.ttf') format('truetype'), /* Safari, Android, iOS */
url('StreetFighter.svg') format('svg'); /* Legacy iOS */
}
I've tried your font with this tool and it generates a working preview of your webfont.
I'm trying to import a font to website I'm making using #font-face. But it won't work on Chrome what so ever, and sometimes it works on Firefox and sometimes not.
So I have no idea what is going on.
This is what I've tried so far:
#font-face {
font-family: "Proxima Nova";
src: url('fonts/Proxima Nova.otf') format('opentype');
}
That almost worked in Firefox but Chrome didn't even want to display it, instead it showed some weird font with completely random size that had nothing to do with the css entered.
Then I tried this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'proxnova';
src: url('fonts/ProximaNovaSemibold.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
}
This fixed sizing issues but now it doesn't show proper font anywhere. Please help.
You have to use different font formats for different browsers. Sorry about that... :(
Source: http://css-tricks.com/snippets/css/using-font-face/
#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 */
}
You can use a website like http://www.fontsquirrel.com/ to automatically generate everything you need.
I'm trying this code For the #fontface for an arabic font :
#font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot'); /* IE9 Compat Modes */
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/mothnna.woff') format('woff'), /* Modern Browsers */
url('fonts/mothnna.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/mothnna.svg#svgMothnnaFont') format('svg'); /* Legacy iOS */
}
I'm using the font in a class named demo :
.demo
{
font-family:'MothnnaFont',Sans-Serif;
width:800px;
margin:10px auto;
text-align:center;
border:1px solid #666;
padding:10px;
direction: rtl;
}
This code is working on ie but it's not working on firefox 10 or chrome 17
Here is a demo http://tmr.hyperphp.com/font/demo.html
Here is how the font should look like
So anybody can help me to make this font appear a cross all browsers ?
Solved: just downloaded the font and converted it again and it's all working now
thank you all for helping
This syntax of embedding web-fonts is not bulletproof anymore.
Try using the Fontspring syntax instead:
#font-face {
font-family: 'MothnnaFont';
src: url('fonts/mothnna.eot?#iefix') format('embedded-opentype'),
url('fonts/mothnna.woff') format('woff'),
url('fonts/mothnna.ttf') format('truetype'),
url('fonts/mothnna.svg#svgMothnnaFont') format('svg');
}
It's just the first double appearance of the "src"-attribute you have to fix.
This will solve your problem.
For more information about the syntax, take a look at this source. And by the way, fontsquirrel is also using this syntax as its default.