I have an issue with fonts on my iPad (4) / iOs 7.0b4.
I have this CSS:
p span {
font-family: 'Arial Black', sans-serif;
font-size: 22px;
}
Renders fine in all browsers but not on iPhone or iPad. It displays a serif font and not Arial Black. Even if I write "Sans-Serif" it displays a serif font.
Changing to ArialMT, Arial or Helvetiva doesn't work either.
I use the Foundation 4 framework with an own stylesheet.
Do I miss something?
iOS does not support Arial Black.
Source: http://iosfonts.com/
EDIT: Seems that the problem was that the CSS rule wasn't overwriting the foundation CSS. Adding !important fixed the issue so if you will write a more specific CSS rule it will work.
Related
Before I begin, I'm a designer, not a coder.
I've successfully created an HTML signature with custom hosted fonts using #font-face, however, once I send the email and receive a reply, the font formatting is lost. It defaults back to Arial or whatever.
here's my code, am I doing something wrong?
I've listed the font family name as `sfd'. I can't remember if this is the actual name, or if it's just an alias I created.
<body>
<style type="text/css">
#media screen {
#font-face {
font-family: 'sfd';
src: url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff2') format('woff2'),
url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
You are not doing anything wrong. The font you are using (studiofrontdesk-regular-webfont) is a web fonts, there are only a handful of devices that read/render web fonts. Below is a list for you.
Apple Mail
Outlook for Mac
iOS
Source: List updated 20th September 2021
Only these email clients will show the web fonts and the rest will read the fall back font. Add the fallback fonts (Arial etc) to your font family.
One method I use for my emails is to have the web font and the below code specifically for Outlook.
<!--[if gte mso 9]>
<style>
table, table td{font-family:Arial, Helvetica, 'sans-serif' !important;}
</style>
<![endif]-->
When emails are replied, the fonts that are on the users system or default to Outlook are used.
Your font is not a downloaded font. So once you send it, it is indeed gone. What you could try is downloading the font, place the file inside the directory you are in now. And put the name of the downloaded font inside your source.
Like this:
#font-face {
font-family: fontname;
src: url('fontname.otf');
}
Hope this helped!
I have created some web content using a HTML editor and am loading it into a UIWebView. Everything seems to be working fine apart from one small bit. The CSS is being loaded, but the UIWebView ignores the line-height CSS attribute. Font sizes are being picked up correctly
My body CSS is as follows:
body {
color: #333;
text-align: centre;
padding: 0;
font: 0.75em/0.8em "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 0 0 0;
}
I have also tried adding a specific line-height: 80%; line, but it makes no difference. UIWebView renders the text in exactly the same way if I set the lien-height to 0.8em or 1.5em!
The HTML displays correctly when I load it in Safari on my Mac, so I presume the HTNML is ok, and other the text is not inheriting from other CSS statements. I'm lost as to what could be wrong.
Any ideas?
Thanks Craig
I have tried this on a real device and it renders correctly. This is a simulator issue :(
I was using Xcode 4.3.2 and the simulator running iOS5.1.
I will raise this as a bug with Apple, but hopefully this answer will help somebody else in the future!
So I have a SVG file, that contains text elements. Example:
<text transform="matrix(1 0 0 1 195.248 207.165)" fill="#999999" font-family="'LeagueGothic'" font-size="24">Europe</text>
When I specify the font-family to something included in iOS (like Helvetica or Futura), everything works fine. However, once I specify a font included through #font-face, it simply doesn't work on iOS, while it does on desktop Safari, Chrome, Firefox as well as Opera.
Otherwise #font-face fonts work ok throughout the page, except the SVG parts.
Tried including the SVG file as <embed>, <object> and <img>, didn't help. Interestingly, when I try inline SVG (i.e. SVG code directly within HTML), then the fonts are ok, but it doesn't draw anything else form the SVG file.
I am on iOS 4.2. Tried SVG 1.1, 1.1 Tiny, 1.2, etc. all the same.
Is this a bug or am I missing something, please? Thanks.
Sample SVG file here: http://pastie.org/1637291
Your svg sample has no #font-face rule, nor references to any external stylesheets. Maybe a solution could be to include a stylesheet with that definition in the svg file itself.
For example:
<style>
#font-face { font-family: foo; src: url(somefont.svg#theFontElementId) format("svg"); }
</style>
If you are referencing the svg parts with e.g <object>, <embed>, <iframe> or <img> and see the webfont elsewhere on the page then that missing stylesheet thing could be the cause.
I'm embedding fonts on a mobile website using #font-face (css from FontSquirrel). When I preview in desktop Safari or Chrome, the fonts embed fine, but they don't appear in mobile Safari on the iPhone/iPad. I'm not getting any errors and I can't figure out what's going wrong. Here's my CSS. Any ideas?
#font-face {
font-family: 'JottingRegular';
src: url('../fonts/jotting_regular-webfont.eot');
src: local('☺'),
url('../fonts/jotting_regular-webfont.woff') format('woff'),
url('../fonts/jotting_regular-webfont.ttf') format('truetype'),
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'JottingBold';
src: url('../fonts/jotting_bold-webfont.eot');
src: local('☺'),
url('../fonts/jotting_bold-webfont.woff') format('woff'),
url('../fonts/jotting_bold-webfont.ttf') format('truetype'),
url('../fonts/jotting_bold-webfont.svg#webfontJpUFTHYS') format('svg');
font-weight: normal;
font-style: normal;
}
OK, I figured it out and will document for anyone who has this problem in the future. I had copied the CSS from Font Squirrel and then I had needed to redownload the actual font files later on. I didn't think that would change anything in the CSS, but it turns out that SVG fonts (which are used by mobile safari) all have an ID that is referenced in the font file and the CSS.
So, in:
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg')
webfonttEfFltbI is the font id. I opened the SVG font file in a text editor and found the new ID in the following line near the top of the file:
<font id="webfontC6xdxB57" horiz-adv-x="972" >
Replacing the id after the hash tag in the CSS fixed the problem.
I was having this same situation. I resolved it by updating the paths to the font. Even though Chrome & Safari were loading them fine, iOS wasn't recognizing my path which was
url ('font/chunkfive/font.eot')
I changed that line to include a / to the beginning of the font path and that fixed everything.
url ('/font/chunkfive/font.eot')
You could also try using an absolute path.
Font face isn't supported on MobileSafari until iOS 4.2.
I had been working with this for a hour before realizing my stupid mistake.
Mobile Safari is CASE SENSITIVE for the fonts, while Desktop Safari is not.
If your font is titled: font.svg, you must add it exactly like it is. If you add it with a Capital F, Desktop Safari won't care, but mobile will.
This has already been solved, but I had a similar problem here:
#font-face not working in mobile Webkit
For me, all the IDs on the SVG fonts were correct; it was the FontSquirrel syntax that was wonky. Using the updated FontSpring bulletproof syntax fixed the issue for me, and seems to work entirely cross-browser.
Font face does work on mobile safari, i am using on iphone 3. I also copied the code from font squirl but it didn't work. Here is the updated code. Use this and it will work everywhere.
#font-face {
font-family: 'MyriadProBoldCondensed';
src: url('/fonts/myriadpro-boldcond-webfont.eot#') format('eot'),
url('/fonts/myriadpro-boldcond-webfont.woff') format('woff'),
url('/fonts/myriadpro-boldcond-webfont.ttf') format('truetype'),
url('/fonts/myriadpro-boldcond-webfont.svg#MyriadProBoldCondensed') format('svg');
font-weight: normal;
font-style: normal;
}
Im currently working on a mobile version of a website, everything is great, works fine on an iPhone, Blackberry and Android.
I have one slight problem, not a big deal but still a little annoying. I have:
<h1> tags set to 18px and bold
<h2> tags set to 12px and bold
<p> tags set to 12px and normal
Now everything looks great on the iPhone when viewing in portrait, but when the device is rotated to landscape the <h1> titles go smaller (hard to tell but possibly smaller than the <h2> tags?!
Here is my css:
h1 {
color:#FFFFFF;
font-size:18px;
line-height:22px;
font-weight:bold;
margin-top:0px;
}
h2 {
font-size:12px;
color:#333333;
font-weight:bold;
margin-bottom:-5px;
}
p {
color:#333333;
font-size:12px;
line-height:18px;
font-weight:normal;
}
I believe you are looking for this in your CSS:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
A better solution can be using 100% instead of none, as stated by user612626 in an older thread:
Font size rendering inconsistencies on an iPhone
body {
-webkit-text-size-adjust: 100%;
}
this way desktop webkit browsers can adjust size and zoom proportionally too.
I think this is a better approach than filtering by screen size.
Hope it helps.
As stated in Neurofluxation's answer you can use the css rule -webkit-text-size-adjust but beware that this can prevent users from adjusting the font size on desktop Webkit as well (see this article for more details).
In light of this it's likely worth checking via CSS3 media queries (or user agent) to be safe.
E.g.,
#media only screen and (max-device-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}