I'm working with jQuery Mobile and I'm building my theme using ThemeRoller. I see that the default is set to be Helvetica, Arial, sans-serif but instead of giving other options it allows me to write in my own. Is there a way to implement any font that I like or am I only restricted to web safe fonts? I assume that it would allow anything being CSS3 based but once again, I am stumped on how to implement.
Thanks!
You can specify your own font names, but if they're not web-safe fonts you'll have to include #font-face rules separately.
Related
I am creating a email signature with HTML markup, and to match the design, I have to shrink the font-size property to under 11px, which is the lowest limit put by iOS mail rendering.
An article from Campaign Monitor suggested the use of the vendor specific property -webkit-text-size-adjust: none; to get around that:
https://www.campaignmonitor.com/blog/post/3339/save-your-layout-by-overriding-the-minimum-font-size-on-the-iphone-and/
However, the demo is using the <style> inside the <head> tag. But when it's done in inline style it does not seem to work on iOS anymore:
Example
I have seen some signature using <font size="1">Small Text</font>, but it seems that the <font> tag is deprecated now.
So is there still any work around?
You should keep the webkit CSS in your <style> tag. iOS mail and Android's default client respect style tags, and it won't affect any other client.
The font tag is deprecated, but i find it's still the most reliable across clients like Outlook '07-'13 and Windows Phone.
I am using some Google web fonts for my website, Arabic fonts, from here http://www.google.com/fonts/earlyaccess
I import these fonts in my css
#import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
#import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
The fonts work just fine everywhere but not on ipad. I tried to google the issue and I came up with this Stack question that suggests SVG. Any clues on how to get SVG for Google web fonts? Thanks
I solved it, Google fonts don't have SVG format in their defaults of these fonts, I had to download them and get the SVG format, re-include my fonts and it worked well so far on iPad Peek, with test them and get a final feedback
I haven't read all of the terms of use, but they give you access to download the font. I believe you can then take that font to Font Squirrel and it will generate you the font types you need (and CSS #font-face styles) so you can self-host the font yourself.
When I use Google Webfonts, they load fine on every browser I care about, EXCEPT Chrome/iOS. This seems odd, as it works fine on Chrome for Mac and Safari for iOS, so I don't think it's an iOS problem or a Google Chrome problem. It seems to be specific to Chrome/iOS.
Any ideas, or ideas on HOW to troubleshoot this, would be great!
Thanks!
EDIT
I am using Google Web Fonts hosted on Google, with the following:
<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" />
In my font (SASS), I am using the following:
h1
font-family: "Leckerli One", cursive
I'm seeing the same issue. Hosting the font files on my own server and rewriting the #font-face rules to match solved the issue for me, both with my local dev server and in prod.
I don't know the cause; my best guess would be some same-origin issue that's enforced differently in UIWebViews (iOS Chrome being a UIWebView due to App Store rules).
You can use the Google Fonts API Loader which will detect the user's browser and send back appropriately formatted CSS.
Sample code is available in the first response on this Stack Overflow question.
This will allow both Safari and Chrome (and other UIWebView-based browsers) to display the font correctly.
Note: if you want to store the fonts locally, as #Dave suggested, this CSS should work.
IOS devices use TTF formats only (or OTF if they follow the developer guidelines below). That font is being served as WOFF, EOT and OTF (assumably not following the guidelines) . There are some services that will give you other versions. Try specifying the font using #font-face and see if that fixes the issue! Fontsquirrel has an #font-face generator to do the heavy lifting.
In regards to the follow up question. There are some developer documentation from Apple on their implementation of TrueType Fonts. It can be found here. Essentially, TTF formats store the font as sfnt resources. The only other font format that can do this is OpenType's offset table sfnt wrapper. Because IOS reads fonts using sfnt wrappers, you will run into issues with fonts that are not stored in this way. (Sorry for all the jargonny talk).
In the CSS you may use
!important
Example:
#font-face {
font-family: 'Monda' !important;
font-style: normal !important;
font-weight: 400 !important;
src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important;
}
In case anyone else still sees this issue - a font not loading in Chrome on iOS 9 or older - double check that the font is imported as a css file, and not as a js file. Fonts.com will give you the option to import fonts as js, which won't get picked up on Chrome / iOS 9 or below. Changing my import to css fixed this for me.
For me works add in php page:
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Trocchi');
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
</style>
I've got similar problem with UIWebView lately. I made additional changes to both iOS app and web source, nothing helped.
Finally fixed it by simply changing Google Font's link to https.
Can anyone shed some clarity on how to use CSS3 #font-face styling in a Grails web application. How do I get the application to include the font in the war, and how do I reference it.
I'm fairly new to Grails, and I'm not sure where exactly to put the fonts so that they can be referenced in the CSS.
Thanks!
UPDATE
Seems that putting it in the web-app directory does not work. Example, let's say the font filename is myfont.ttf. I place it in the web-app directory and then in my css do:
#font-face {
font-family: myfont;
src: url('myfont.ttf');
}
As far as I know that is correct, but it does not seem to work when I launch it from STS.
You can put it into web-app dir, it's a place for all your static resources.
You can create directory like web-app/fonts and reference it as /fonts/<you font> (works only if you run your app in root context) or as ${resource(dir: 'fonts', file: '<your font>'}
If you're using a font embedding service like Google's free web fonts api (http://www.google.com/webfonts) then you don't need to put fonts in your app. You just grab the generated JS includes and the generated CSS, plonk it in and use it. Easy.
Simple questions.
Can you change the color of sIFR after the flash has been applied?
I have a bit of a Google, but can't seem to find anything. Only people not being able to set the color initially.
Thanks
I don't know about sIFR, but on a side note, I'd heavily recommend CSS 3 embedded fonts over the aesthetically displeasing sIFR, which is inaccessible, slow and can't be copied along with selected text.
As Delan mentioned, I would suggest not using sIFR anymore. With the browsers currently in use, you have pretty decent CSS support. Convert your TTF to EOT for older versions of Internet Explorer, using this tool for example: http://www.kirsle.net/wizards/ttf2eot.cgi
Then use this CSS. In this case my font is called Techno:
#font-face
{
font-family: Techno;
src: url("/Techno.eot") /* EOT file for IE */
}
#font-face
{
font-family: Techno;
src: url("/Techno.ttf") /* TTF file for CSS3 browsers */
}
This covers recent Safari (3.1+ afaik), Firefox (3.5+) and Opera versions. Mobile Safari doesn't do this, but wait, it doesn't do Flash either :)
Well, after contacting the font companies, it seems I can use cufon (with the purchase if another license, which is the same as sIFR anway). S0. I have decided to go with cufon...