Custom font no being applyed on CSS - css

Could someone tell me what's wrong here..? I've checked it many times and can not find the problem. Page always loads with Impact instead of Corbert font.
Also, when I check what is happening trough Firebug, 'corbert' name displays grey, and when hovering it, the miniature that Firebug shows as a font demo, is not Corvert, like if it did not find the files:
CSS code (I have also tried setting the first one to .eot)
#font-face {
font-family: ‘corbert’;
src: url('corbert-regular.ttf');
src: url('corbert-regular.eot?#iefix') format('embedded-opentype'),
url('corbert-regular.woff') format('woff'),
url('corbert-regular.ttf') format('truetype'),
url('corbert-regular.svg#adlerRegular') format('svg');
font-weight: normal;
font-style: normal;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
overflow-x: hidden; height:100%; width:100%; margin:0; padding:0; font-family:'corbert',Fallback, impact;
}
Here you have a screen of the folder with linked fonts:

You have typographic apostrophes around the font name, so the name is actually ‘corbert’ rather than corbert.
Use regular apostrophes:
font-family: 'corbert';
Also, is the SVG name of the font really adlerRegular, and not something like corbertRegular?

my fool proof #font-face code (taken from someone else's excruciating troubleshooting, but I can't remember who...):
#font-face {
font-family: 'fontname';
src: url('fonts/fontname.eot'); /* IE9 Compat Modes */
src: url('fonts/fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/fontname.woff') format('woff'), /* Modern Browsers */
url('fonts/fontname.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/fontname.svg#svgFontName') format('svg'); /* Legacy iOS */
}
note that there are two src and there are # on a couple of lines.
and the order seems to matter quite a bit
[edit: it's from here]

I always refer to this blog post when I'm having trouble with custom fonts; Bulletproof #font-face Syntax.
In short, you should be using:
#font-face {
font-family: 'corbert';
src: url('corbert-regular.eot?') format('eot'),
url('corbert-regular.woff') format('woff'),
url('corbert-regular.ttf') format('truetype');
}

Related

css #font-face doesn't work [duplicate]

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

#font-face fonts within bootstrap css not displaying in firefox

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!

Why Firefox ignores custom font from #font-face?

Let’s say we have a font-face section like that
#font-face {
font-family: 'F';
src: url("/fonts/F.eot?") format("embedded-opentype");
src: local('?'),
url("/fonts/F.woff") format("woff"),
url("/fonts/F.ttf") format("truetype"),
url("/fonts/F.svg") format("svg");
font-weight: normal;
font-style: normal;
}
and a body style
body {
font-family: 'F' /*, sans-serif*/;
}
Now, if I uncomment sans-serif it will take priority over custom font despite the fact it is mentioned at the end. Why? How do I specify a back-up variant for those who can’t use downloadable webfonts?
===upd===
If in doubt why local('?') is used, look here http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley
I was wrong in my thinking that it is sans-serif breaking my CSS, here is actual code that shows custom 'F' font. If 'Trebuchet MS' will be uncommented, font-family drops to sans.
body {
font-family: 'F' /*, 'Trebuchet MS'*/ , sans-serif;
}
Your syntax seems to be slightly incorrect. The '?' at the end of the first 'src' property value is aimed towards fixing IE versions 6 through 8, but could actually be affecting Firefox. The correct syntax to use is:
#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 */
}
Source: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

Css3 #fontface is not working with Chrome 17 and Firefox 10

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.

#font-face src: local - How to use the local font if the user already has it?

What is the right way to use #font-face so that the browser will not download the font if the user already have it?
I am using #font-face to define DejaVu, which is already installed on my system (linux).
Firefox is not downloading the font, but Chromium is downloading it every time!
My CSS code, based on font squirrel and that question look like this:
#font-face {
font-family: 'DejaVu Serif';
src: url('DejaVuSerif-webfont.eot');
src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
font-weight: normal;
font-style: normal;
}
/* ... #font-face definitions for italic and bold omitted ... */
#font-face {
font-family: 'DejaVu Serif';
src: url('DejaVuSerif-BoldItalic-webfont.eot');
src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
font-weight: bold;
font-style: italic;
}
If you want to check for local files first do:
#font-face {
font-family: 'Green Sans Web';
src:
local('Green Web'),
local('GreenWeb-Regular'),
url('GreenWeb.ttf');
}
There is a more elaborate description of what to do here.
In case someone still need it:
Download the font you need from fonts.google.com, then set your CSS file:
#font-face { font-family: roboto-regular; src: url('./fonts/Roboto-Regular.ttf'); }
body {
font-family: roboto-regular;
}
Note: make sure the path to the TTF file is correct.
Rather an old discussion, but is someone comes to this place, here some more infos.
goto https://google-webfonts-helper.herokuapp.com/fonts
select there the font(s) you need/want
downlaod the selected fonts
copy the displayed css
The copied css code may not be 100% correct, so below what I have been using (and works perfectly):
/* open-sans-regular - vietnamese_latin_hebrew_greek_cyrillic */
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.eot'); /* IE9 Compat Modes */
src: local('😡');
src: url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.svg#OpenSans') format('svg'), /* Legacy iOS */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/open-sans-v34-vietnamese_latin_hebrew_greek_cyrillic-regular.woff2') format('woff2'); /* Super Modern Browsers */
}
Inside the edited code you can delete the comments (after each url(..) line.
And finally - as tipp: pack the source, in general the packed file is ~ 30% smaller (and your website will have the benefit).
Edit: updated code snippet to be actual.
The font ordering is based on the fact, that browsers read from bottom to top (see https://stackoverflow.com/a/22835957/3450837).
It includes also the "bulletproof" solution where a smiley (which one you want to use is up to you) is used (to prevent wasting bandwidth) - see https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Resources