Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
Related
Very entry-level here.
I have a .ttf font file I'd like to use for my blog, but I am unsure of how/where I can get its coding (?). Is this about right?
* {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
feel free to skewer this, as I said I've little idea of what I'm doing.
EDIT: Here is a link to the font I'm trying to use. (If it helps) https://ufonts.com/download/providence-bold.html
#font-face {
font-family: 'providence-bold';
src: url('/font/providence-bold.regular.ttf');
}
This is the format I use. Just make sure you're path is correct.
Side note: I don't like using underscores (_) and dashes (-) in variables.
It's recommended to get in the habit of writing variables as camelCase or PascalCase.
I would advice and is a better way to include fonts is by converting it into these formats.
You can get the code from here after you converting your fonts into the formats you wanted -> link
After you convert your fonts it will produce a rar file extract it you will find the font.css where you can find these codes.
#font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/providence-bold.woff') format('woff'),
url('../fonts/providence-bold.ttf') format('truetype'),
url('../fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
Be sure to check your url to the fonts' location.
You need to add the link to the font from the url provided here:
https://ufonts.com/download/providence-bold.html
if you add them like this ../providence-bold.html they are relative to your html document. So would need to be installed on your server http://yourname.tumblr.com or whatever.
If you change the urls to point to the resource at ufonts, then it should work.
So
#font-face {
font-family: 'providence-bold';
src: url('https://ufonts.com/fonts/providence-bold.eot');
src: url('https://ufonts.com/fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
url('https://ufonts.com/fonts/providence-bold.woff') format('woff'),
url('https://ufonts.com/fonts/providence-bold.ttf') format('truetype'),
url('https://ufonts.com/fonts/providence-bold.svg#providence-bold') format('svg');
font-weight: normal;
font-style: normal;
}
However these resources must exist at the ufonts url. If it is just a place to download the ttf file, this will not work. They have to be served from somewhere, and tumblr will not allow you to upload font files to their servers.
First of all, you need to get fonts in a proper format. Youca n download them in the required .ttf format at such websites as https://fontsly.com/gothic/celtic or youc an use some converters.
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
I have generated a #font-face with FontSquirrel, and resulted these (tweaked later) rules:
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot');
}
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Style is applied in the css file like this:
h1,h2,h3,h4,h5,h6 {font-weight:normal;font-family:'CabinSketchRoBold',Arial,sans-serif !important; }
Everithing works fine in Chrome, even in InternetExplorer, but in newer versions of Firefox, the font doesn't load. It loads in FF 3.6... o_O
I have another font, Ubuntu, loaded from Google via the JavaScript option, and that one loads ok, even on the headings, after changing
font-family:'CabinSketchRoBold','Ubuntu',Arial,sans-serif !important;
What's wrong with the declarations that makes FF ignore my local font?
EDIT: this is not only on localhost, it happens on the live site too. I have looked at other answers and tried them out, but no luck. WOFF was even base64 encoded, same result.
SOLVED: Seems that the .eot being in a separate declaration (again, FontSquirrel generated) was doing the damage. Moving it with the others solved it. Thanks Boris Zbarsky!
#font-face {
font-family: 'CabinSketchRoBold';
src: url('cabinsketchro-boldwebfont.eot?#') format('eot'),
url('cabinsketchro-boldwebfont.woff') format('woff'),
local('?'), url('cabinsketchro-boldwebfont.ttf') format('truetype'),
url('cabinsketchro-boldwebfont.svg#CabinSketchRoBold') format('svg');
font-weight: normal;
font-style: normal;
}
Your problem is that you are actually defining two separate faces of the "CabinSketchRoBold" font.
The first face is normal weight and uses .eot file for the font data.
The second face is bold weight and uses one of woff, truetype, svg, whichever is available.
Then you're styling text that's normal weight. So the first face is picked. See http://dev.w3.org/csswg/css3-fonts/#font-style-matching for the spec on this.
In particular, following the steps in that spec, in step 4 we end up a single face: the .eot one. But since the browser can't do anything with that font format, this face has no glyphs so in step 5 the browser moves on to the next family name. The other (bold) face in the "CabinSketchRoBold" family is not considered, per spec.
So the upshot is that you should either list font-weight: bold in both your rules or in neither one. Then the .eot and the other options would all be considered as sources for a single font face, not for different faces in the same family.
It looks like Chrome doesn't actually follow the spec here, unfortunately...
The latest versions of Firefox are able to show the font related errors in the tools->web developer->errors console. for example this is the error I give with a custom font:
Error: downloadable font: table 'GSUB': OpenType layout data discarded
You must have this font type for working in IE,Firefox,Chrome
#font-face
{
font-family: 'BHoma';
src: url('/public/font/BHoma.eot?#')format('eot'),
url('/public/font/BHoma.ttf')format('truetype'),
url('/public/font/BHoma.woff')format('woff'),
url('/public/font/BHoma.svg#BHoma')format('svg');
}
but you first must generate your font from this link
http://www.codeandmore.com/2011/06/font-face-kit-generator/
#font-face is kind of confusing as all the browsers cannot decide on a single file format to use. Below is what I am currently using to add 1 new font to a site, you can see there is 4 separate font files, I know that each one is because some browsers support different formats but does the browser download all the files or just the 1 that it needs?
#font-face {
font-family: 'Oswald';
src: url('oswald-webfont.eot');
src: url('oswald-webfont.eot?#iefix') format('embedded-opentype'),
url('oswald-webfont.woff') format('woff'),
url('oswald-webfont.ttf') format('truetype'),
url('oswald-webfont.svg#OswaldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I would expect for a browser to download all fonts that it supports and than apply the latest only, just like with other css properties.
My expectation seems to be wrong though. On a site that embedded fonts with markup identical to what you've provided above, FF only downloaded the .woff file even though it supports .ttf/.otf as well.
FYI, the support matrix; individual formats are linked to at the bottom.
Has anyone come across something like this exclusively in Chrome 10/Win?
All the non-breaking spaces in these two webfonts aren't rendered properly. Working in IE7/8/9, Firefox, Safari, and Chrome/OSX.
Contents of my fonts.css file:
#font-face {
font-family: 'Hellenic';
src: url('../fonts/eot/hellenic.eot?') format('eot'),
url('../fonts/ttf/hellenic.ttf') format('truetype'),
url('../fonts/woff/hellenic.woff') format('woff'),
url('../fonts/svg/hellenic.svg#MCMHellenicWide') format('svg');
}
#font-face {
font-family: 'Lasalle';
src: url('../fonts/eot/lasalle.eot?') format('eot'),
url('../fonts/ttf/lasalle.ttf') format('truetype'),
url('../fonts/woff/lasalle.woff') format('woff'),
url('../fonts/svg/lasalle.svg#FilmotypeLaSalle') format('svg');
}
#font-face {
font-family: 'LeagueGothic';
src: url('../fonts/eot/leaguegothic.eot?') format('eot'),
url('../fonts/ttf/leaguegothic.ttf') format('truetype'),
url('../fonts/woff/leaguegothic.woff') format('woff'),
url('../fonts/svg/leaguegothic.svg#svgFontName') format('svg');
}
It is highly likely that the webfont is not assembled properly.
I have downloaded CaviarDreams font which is used on Sebastian's site and got the same bug.
Then I downloaded it from here: http://www.dafont.com/caviar-dreams.font, used fontsquirrel.com's typekit generator, and the result was perfectly fine.
Try encoding them using fontsquirrel.com Typekit generator I am not sure what the problem is, but it might help.
Try this from a previous StackFlow question. Refer to the htaccess part, not the beginning:
font-face with wrong MIME type in Chrome
Also refer to this ticket with Google:
http://code.google.com/p/chromium/issues/detail?id=72727&q=%40font-face&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
Last resort: re-generate your font with Font Squirrel.
I commented on this question before and just found some extra information for people having trouble with the boxes and spaces with 'X' for line breaks, end of line and space characters in Chrome, Internet Explorer and Firefox. Yes, sometimes regenerating the font files improves things but then I noticed my problems largely went away when I added unicode characters for spaces and new lines. Paste the following into the Unicode Ranges field on FontSquirrel when generating your fonts:
0085, 000A, 000B, 000C, 000D, 2028, 2029
For good measure I also type a spacebar into the Single Characters field.