|
CSS - @font-face Ipad Issue???
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.
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. 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. 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 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! 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. 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 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 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 Hi there, I have a font size problem. Basically, some of the text on the page appears as size 14 verdana, where as the other text appears how i want it. I want the text to be displayed as 11px tahoma. This is what i am using: PHP Code: BODY { margin:0px; padding:0px; font-family: tahoma, verdana, arial; font-size: 11px; } Also, some text is in a <p> tag. How do i define that? Many thanks ListInventory.com It looks all "squished" on the iPad. Been tasked with finding out why. Worked fine until adding the featured product block on the right yesterday. What did I screw up? It doesn't do this in Safari for Windows. The IPad is underlining my phone links automatically making them invisible. I am aware of the fix using the meta tag. The problem is that these numbers are substituted by javascript in our AdWords tracking. I am afraid the <meta name="format-detection" content="telephone=no" /> will cause the phone tracking not to work on IPad. This is the simple css for the phone number: #phone { position:absolute; left:285px; width:250px; top:237px; height:25px; font-size:18px; color:#0F2532; } and the site is assistedfertility.org. Is there a css rule I can add to #phone that will remove the automatic underline? What other ways that wont effect javascript number tracking? Thanks Hi, I don't have access to Dreamweaver's tools and was wondering if there was a way to test my designs on iPhones and iPads, without actually having an iPhone or iPad. Thanks! - M I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page). Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page. What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process? Hi, Is it possible to make 3 different sites depending on the client browser medium? I have a flash site, that needs to be presented non-flash for the iphone, and another non-Flash site for the ipad. Is there a way CSS can detect these 3 different browser mediums? If so, then how? thanks - I have a 'DIV' tag, its css height property is set to 15px. Why is it, that it's not really 15px until I insert "font: 10px Verdana " *** one of the rules? So fi I have: #topSeperate { height: 15px; width: 100%; background-color: #00FF00; font-weight: bold; font: 10pt Verdana; } The div is perfect, but as soon as I remove the font: tag, it grows in height about 4px even though there is no text typed in the 'DIV'. If this doesnt make sense and you need further explaination, Let me know. Hi there, Does anyone know what font this is that is used for text such as "Everything you need to get a professional website online" at the top and below: "Takeaway Website Standard" When I highlight it, it has a black bacground which is unusual. Any ideas? Thanks! I would like to set my site so that any text not given a specific class id for CSS will appear as a certain font. can I do this, and if so, how? thanks. Hello, My font shorthand have this different outputs on IE and FF Quote: h1 { /*font-size: 16px; font-weight: bold; font-style: normal;*/ font: normal medium bold 16px Verdana, Arial, Helvetica, sans-serif; margin: 0 10px; padding: 15px 0 5px 0; color: #FFF; } If I replace the font-variant at shorthand it works well on IE but still the font size is not rendered Quote: font: normal larger bold 16px Verdana, Arial, Helvetica, sans-serif; the commented long hand is what I'm trying to get i copied some of this code from a page i liked. all it is is a background image and i want to type text over it that is in a table. the problem is i cannot center my text ("<?=$information[nickName]?>"). the text always is on the left, never in the center. i have tried different things such as <td align=center> as opposed to the <td valign=center> the other author has in the 2nd block, the align:center does not work with font. and i have tried appending a ;text-align:center within that SPAN tag, but that does not work either. does anyone have any advice??? thanks! <table border=0 cellspacing=0 cellpadding=0 width="750" style="border: solid black 2px;"> <tr><td style="background-image:url(images/name_test.jpg); background-attachment: 100% 0%"> <table border="0" cellspacing=0 cellpadding=1><TR><TD valign="center"><SPAN style="font-size: 14pt; font-family: arial black, helvetica; padding: 3px; align: center;"><?=$information[nickName]?></SPAN></TD></TR> </table> Hello, I would like to know if a font can be imported into a CSS. I am asking that because it would be very nice if I had the opprtunity to design my webpage with the fonts that I want, in order to achieve the desirable layout. Thank you. |
|||||||