|
CSS - Font-face Fonts Are 404ing\hanging
Hi everyone. Here is the url
http://v3p2.stealthwd.ca/ its the dev version of my companies soon-to-be-new website. The font-face code is... Code: @font-face {
font-family: 'SlingLight';
src: url('/fonts/sling/slinglight-webfont.eot');
src: url('/fonts/sling/slinglight-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sling/slinglight-webfont.woff') format('woff'),
url('/fonts/sling/slinglight-webfont.ttf') format('truetype'),
url('/fonts/sling/slinglight-webfont.svg#SlingLight') format('svg');
font-weight: normal;
font-style: normal;
}
Any idea why its timing out? Thanks Similar TutorialsHey everyone. I've been reading up on @font-face, and to me it seems like not many people are using this. Its more or less supported in all browsers (well, not ie 6) so was wondering if there is a reason no one is using this that I'm over looking? If not it seems awesome, and I think it will make the designers here giddy with joy. I am trying to install some fonts onto my website. I am having a problem with @font-face. I have followed the proper steps as told to me by multiple sites and I place the font I want to install into my website in the main directory and type up the code but it still doesn't work. Code:
@font-face{
font-family:'LithosPro-Regular';
src: url('LithosPro-Regular.otf') format('opentype');
}
h2 {
color:#30F;
font-family:'LithosPro-Regular', georgia, serif;
}
Is there something else I need to add or do? I appreciate any help as I've been stuck on this for days! Hi guys, I have a stylesheet with the following styles pointing to font files in the same directory and then a h3 that should be using this font. I can't for the life of me get it working though, any idea why this could be? Code:
@font-face {
font-family: "Chunkfive";
src: url("Chunkfive-webfont.eot");
src: local("?"),
url("Chunkfive-webfont.woff") format("woff"), url("Chunkfive.otf") format("opentype"),
url("Chunkfive-webfont.svg#filename") format("svg");
}
h1, h2, h3, h4, h5, h6 {
font-family: "Chunkfive", Verdana,
sans-serif;
color: #4088B8;
clear: both;
}
h3 {
display:block;
/*position:absolute;
right:-5px; top:15px;*/
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
text-shadow: rgba(136, 164, 174, 0.496094) 3px 5px 3px; font-family: "Chunkfive", Verdana, sans-serif;
margin-top: -10px;
}
<h3>Websites / Examples</h3>
ANy help would be greatly appreciated Thanks GP On my Local Server and Development these work perfect. Code:
/*#########Font-Face: Arial-########*/
@font-face {font-family: Arial Rounded MT Bold;src: url(/templates/shushme_deals/fonts/Arial Rounded MT Bold.eot);}
@font-face {font-family: "Arial Rounded MT Bold";src:local(Arial Rounded MT Bold), url(/templates/shushme_deals/fontsArial Rounded MT Bold.ttf) format("truetype");}
@font-face {font-family: Arial Rounded MT;src: url(/templates/shushme_deals/fonts/Arial Rounded MT.eot);}
@font-face {font-family: "Arial Rounded MT";src:local(Arial Rounded MT), url(/templates/shushme_deals/fonts/Arial Rounded MT.ttf) format("truetype");}
For some reason on live production site, it does not load the fonts at all. What I'm I missing here. When I embed a font using @font-face it does not seem to be anti-aliased. If I use Cufon YUI (Javascript) to embed the same font then it looks much smoother (images attached). Is it not possible to have smooth fonts using @font-face? Maybe it depends on the font? But then why does the JS version look so much smoother? EDIT If I just use the font normally it still looks bad, so I guess the Cufon conversion process somehow improves the font, which is displayed using HTML5 and Canvas. Has anyone else dealt with a problem with using custom fonts w/ @font-face and Ipads? I have a site http://osake.garychus.com and throughout the site the font Lato is messed up, but on all other platforms it looks great. Hey everyone, the development site I'm working on is here.... http://firstchoiceflooring.stealthwd.ca/ The font in the top navigation is Media Gothic.... well, it's SUPPOSED to be. It's rendering really strange. I'm using @font-face. My font looks fine in photo shop, but it doesn't render correctly in FF or website (no IE yet). My CSS is like this.... Code: @font-face {
font-family: mediaGothic;
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.eot" ); /* IE */
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.ttf" ) format("truetype"); /* non-IE */
}
Code: #topNavContainer p{
height:100%;
width:100%;
text-align:center;
font-family: mediaGothic;
}
Any help would be appreciated. This is my first time using @font-face Hi guys, I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout. I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following: Code: html, body {
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
background-color: #000000;
}
Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know! I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed. Thanks everyone! Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks Hey, I'm building a rather elaborate javascript popup menu, and I'm trying to get some distinction between some of the long-text menu items. I have no padding after the <p> tags because then I get an extra space at the bottom of my menu. So I'm trying get a hanging indent to work: my CSS styles: .question_indent { text-indent:-10px; padding-left: 10px; } .popupmenu p{ color: white; font-size: 0.80em; display: block; padding-left: 6px; padding-right: 6px; margin-top:0px; margin-bottom:0px; } Here's my problem: with my javascript highlight-on-hover function, the hightlight starts in the middle of the first letter of the menu item with a hanging indent. I can't figure out a way to get around it (e.g. can't find anything on google). function subhighlight(obj) { if (subhighlighted!=null) { //unhighlight last link subhighlighted.style.background = ""; subhighlighted.style.color = "#f7f7f7"; } subhighlighted=obj; if (subhighlighted!=null) { //highlight current link subhighlighted.style.background = "#f7f7f7"; subhighlighted.style.color = "#376092"; } } Here's some of my menu item code: sublinkset[0]= '<p class="question_indent">llooong text repeat llooong text repeat llooong text repeat llooong text repeat.</p>' sublinkset[0]+='<p class="question_indent"><a href="about_us.html" id="11">But that\'s just a summary. Click to read more.</a></p>' Hello all- I have news headlines set up to display in a list. Each headline starts and ends with a quote. When a given head wraps, the next line begins directly under the quote mark: "This is Headline 1" "This is Headline 2 and When It Wraps, the First Line Falls under the Quote Mark" Ideally, I'd like to have the initial quote mark in each head hang out from the text, so that wrapped lines in that list item align underneath the first letter, rather than the quote mark. Is it possible to use a character, i.e., the quote mark, as a list marker? Thanks in advance... - Tom Tedeschi Is it possiable for me to add an external font family on a certain text? I mean.. Is it possible for me to use ttf fonts on css to modify my html page? P.S: I hope It makes sense.. because I'm tired style { #test{ margin-left: 5px; margin-top: 9px; font-family: arial; color: black; font-size: 9px; } } <!-- html --> <div id="test"> <span> X Y Z </span> </div> Here is my problem. I am trying to make "Y" bold. but it appears in regular font. I tried following code which doesn't work for me. <span> X <span style="font-weight: bold;">Y</span> Z</span> Thanks Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great. hello, what's the best way to create a border around txt (i mean the letters themselves not around a block of txt)? i've seen some people do this with glow but in most cases it looks awful and even worse, it doesn't seem to work in other browsers other than IE. is there some trick that i can use to achieve this effect? thanks for any help! I'm pretty certain you can do this - but for the life of me I can't remember where I read this. Code:
<style>
@import font("fonturl")
</style>
or Code:
<style>
@font url("fonturl")
</style>
I'm still searching online. Anyone else have any ideas? thanks I was wondering how I can set a font that others may not have on there computer. I know I can set a font folder for my site but how do I link to that so that if the viewer doesn't have the font so it will still display correctly for them too? What type of font extension should I put in there? Should it be just the .ttf? Are there any special css rules that I must include? Thanks for the help! if i upload a load of different fonts to my web server, i presume i need to link them to CSS, before i can use them. how do i do this? if not, what do i need to do instead? Each browser keeps displaying my website with a different font. It makes no difference to the layout of the page, but I'd like it to be the same font in all of them just for the sake of consistancy. Are there any fonts out there that work for all of them? Can I upload a font type to my server to send to browsers? I want a kind of 'courrier new' , 'arial' or 'tahoma' font really. Any help is greatly appreciated can I load a special font to my server and then call to it through css? If I want to use the font Made_In_China.tff can I actualy load it to my server and then call to it through css? Nick |
|||||||