Hello, I set a custom font type for certain titles... however, it's not appearing. This is the inline setting in the HTML page: <p id="pink-title">Title</p> And this is the CSS setting: p#pink-title{ text-indent: 0px; line-height: 1.2; font-size: 48px !important; color: #EF1B9E !important; font-weight: thinner; font-style: normal; font-family: "Steelfish Rg" !important; src: url('steelfish.ttf') !important; } So the font type is "steelfish", which I have uploaded. Because it wasn't working, I set the "!important" instruction too - but it didn't help (I thought someone needed to be overridden, but not...). The text either appears as a pink Time New Roman... On many other computers it appears white (invisible) Times New Roman... On my office desktop machine it works perfectly. Maybe because I have the "steelfish" font installed on the machine? I can't see the problem here. I'd be very thankful to anyone who can help.
NOT EVEN CLOSE to how it works -- SRC doesn't even go where you have it! Just uploading the file doesn't install it on client machines -- that's not how webfonts work and part of why as a rule, I avoid webfonts. IF you want to do it, you're going to need to convert it into the FOUR different formats browsers expect -- not just TTF. That means you also need WOFF, EOT and SVG. The CSS to include those files going something like this: @font-face { font-family: 'SteelfishRgRegular'; src: url('Steelfish_Rg-webfont.eot'); src: url('Steelfish_Rg-webfont.eot?#iefix') format('embedded-opentype'), url('Steelfish_Rg-webfont.woff') format('woff'), url('Steelfish_Rg-webfont.ttf') format('truetype'), url('Steelfish_Rg-webfont.svg#Steelfish_RgRegular') format('svg'); font-weight: normal; font-style: normal; } Code (markup): THEN you could do "font-family: SteelfishRgRegular,sans-serif;" and it would work. Thankfully there's a website that will let you upload your TTF, and it will auto-generate the other three formats, give you demo CSS and HTML to show it working! http://www.fontsquirrel.com/fontface/generator Hope this helps. Oh, and minor nitpick, if it's a title, why is it a paragraph and not a heading? Waste of class -- again why classes like "pink-title" defeat the entire point of CSS and semantic markup, and in general shouldn't be used in code. Just saying...
Just before you posted I did try this, but didn't yet work everywhere and doesn't work at all in IE: @font-face { font-family: Calibri; src: url(http://www.mysite.com/calibri.ttf); } Basically I can use the simple short code above, but it doesn't work in IE! ************************************************************************* So, I tried this for the Calibri font - no effect in IE (otherwise the upper one line was enough for FF and Chrome, that being in place too I cannot tell if the one below had any effect): @font-face { font-family: 'Calibri'; src: url('calibri.eot'); src: url('calibri.eot?#iefix') format('embedded-opentype'), url('calibri.woff') format('woff'), url('calibri.ttf') format('truetype'), url('calibri.svg#Calibri') format('svg'); font-weight: normal; font-style: normal; } This is how it looks now pasted and adapted to the file names (eot, woof, ttf, svg).... I tried this code and uploaded 4 generated font files, but it didn't work in IE Seems like I'm stuck... Any more ideas? I'd choose the simplest way, but I'm getting all mixed up with the coding...
IE needs an eot file, do you HAVE an ACTUAL eot file? By everywhere does that include Opera and iOS? Does the demo from fontsquirrel work while your test page does not?
I know it needs an eot file... And yes I had the .eot, but somehow the code wouldn't load it. I tried something new now and it partially works, but I still have problems. FontSquirrel didn't let me upload the Calibri font for some reason... long story. So, I used this site to generate the codes: http://fontface.codeandmore.com/index.php So now I tried this code for my main page: @font-face { font-family: 'Calibri'; src: url('http://www.mysite.com/calibri.eot'); src: url('http://www.mysite.com/calibri.eot?#iefix') format('embedded-opentype'), url('http://www.mysite.com/calibri.woff') format('woff'), url('http://www.mysite.com/calibri.ttf') format('truetype'), url('http://www.mysite.com/calibri.svg#Calibri') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Gill Sans MT Condensed'; src: url('http://www.mysite.com/grnch.eot'); src: url('http://www.mysite.com/grnch.eot?#iefix') format('embedded-opentype'), url('http://www.mysite.com/grnch.woff') format('woff'), url('http://www.mysite.com/grnch.ttf') format('truetype'), url('http://www.mysite.com/grnch.svg#Calibri') format('svg'); font-weight: normal; font-style: normal; } My new problems now are: -IE displays the fonts, but Calibri looks "idiotic", not like in Chrome, but far worse... I guess it's the .eot font file that's causing this... -some versions of IE cut off the Gill Sans MT Condensed font (seems like the font starts a bit lower than normal and "goes down" vertically, so that the bottoms of "q", "g" and other long fonts get cut off... ) -some versions of IE add additional words, texts (I don't know from where) - they appear like "ghost text"... for instance, words appear on my main page multiplied, appearing outside DIVs, but I didn't actually write them... (it's a bit hard to explain this issue) -Calibri in IE appears "too italic", but I guess that's not such a major issue I want to fix the Gill Sans defect appearances: the fact that they're not well aligned vertically and that 1-2 "ghost word" appear here and there on the page. You can check my main (index) page to see... IE displays it better, but still with these defects...
...basically: IE 7 shows the distortions, errors with the Gil Font, while IE 8 couldn't display it better... I don't have any older versions of IE in the office. Will check from other computers... I suppose pre-IE 7 versions display it even worse... Chrome does the job best, FF breaks a line, but that's a minor issue that I can fix... Another problem is that IE 7 gives me the yellow logo in the bottom of the browser's frame with the "Error on page" message. Annoying... can't find any "error"... weird.
Welcome to webfonts; and why I generally won't use them for anything more than the occasional heading element. They render inconsistently cross browser, the conversion process isn't flawless... so unless you've REALLY got your heart set on some goofy font like you were designing for print, it's not worth the effort. This is particularly true of content text, especially if you're mixing already illegible color contrasts (like say... white on light blue), or fixed size design elements (like say 4 boxes across of equal size and height) that have no business on websites either. Or the wasted bandwidth -- since the average single TTF file is half the limit I set for the template of a page -- that's HTML+CSS+IMAGES+SCRIPTING... Uhg the code for that page... multiple paragraphs doing the job of one, comment placements that could be tripping rendering bugs in some versions of IE and FF, nothing remotely resembling semantics, illegible color contrasts, fixed width that's too big for my netbook and too small for my desktop, fixed metric (px) fonts on content areas... It's a laundry list of how not to build a website. Though I have the nasty feeling I may have told you all this before (that oddball artwork looks familiar). Now it looks like you're throwing even more bad practices and accessibility failings on top?