In sendgrid I can see the preview of the fonts in the correct way but when I send a test email, Google Fonts not working as the way it should be.
I tried several ways but non of them worked.
<link
href="https://fonts.googleapis.com/css2?family=Inter&s;display=swap"
rel="stylesheet"
/>
#import URL(https://fonts.googleapis.com/css2?family=Inter&s;display=swap)
/* inter-regular - latin */
#font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}
Only some email clients support web fonts. Gmail, for example, does not (aside from Roboto and Open Sans).
This is a good resource on things you need to know for embedding web fonts in emails, and covers some quirks in clients like Outlook. But ultimately, you need to know that not all clients will support it, and you will need a backup font to fallback to.
Related
As a developer, is it possible to disable AMP Email on mobile devices so that the text/html, MIME content-type would display instead?
No. You can, however, hide AMP elements and replace them by something non-AMP using media-queries and good old display:none (and probably some additional cross-email-client-compatible nonsense), but I am not sure if that is what one actually needs, unless you target mso obv. as then everything is allowed to me.
Thinking from a mobile first perspective with phablets in play and Microsoft Surface, should I stick to the standard breakpoints or go with more of:
#media only screen
and(max-width: 414px)
and (max-width: 736px)
and (-webkit-min-device-pixel-ratio: 2) {
}
This is what I am thinking. If I do it like that for hand held devices and just develop fluid, would it be better? Or should I use what was mentioned here:
stackoverflow iPhone media queriews
I think targeting specific devices has is its place, though I don't think it's a good starting point.
As a more general approach to mobile design, have you considered begining with a responsive design, there are a host of frameworks available to get you started quickly.
Then test your site at different viewports and add your own media queries that are specific to your design. For example maybe the layout of your header works best if it changes at 800px instead of your framework preset of say 768px.
As a final step, test your site on as many devices as you can and only then write device specific media queries, and only if they are really necessary.
Ideally you want your mobile site design to work well for current and future mobile devices, and so the more general your approach is at the start, the more you'll future-proof your design.
Good luck!
This question is similar to "Standard way to detect mobile browsers in a web application based on the http request" except for mail clients. For instance, if an email message is opened on the built-in iPhone mail client it will display a version of the message specially formatted for the iPhone. If opened on an tablet or desktop it will display as the complete, full-size version of the email. This is similar in principle to web sites that have mobile-friendly versions of the site that load automatically by detecting the user-agent - but for email clients.
So - is it possible to detect the mail client being used to open an email and format the message accordingly? Perhaps a way to detect the screen resolution?
You can try to apply #media css queries that target specific browsers like mobile devices. There is a good introduction on the campaignmonitor help website but be aware, it probably is only supported in a hand full of browsers and devices, iOS being on of them luckily :)
Basically you are defining css styles that target specific screen widths so that you can optimize your email for limited screen space.
#media only screen and (max-device-width: 480px) { ... }
When talking really detection and displaying a totally different email, that's really impossible since you are talking about javascript there and that's not done in emails and probably won't even work in 99% of all email clients. But you can go a loooong way with #media queries.
I think the best solution is using responsive web design techniques. So my suggestion would be a fluid email layout that would adjust based on the size of the cellphone screen.
Here is an example: http://stylecampaign.com/blog/?p=85
Note: Writing markup for email is a whole different beast than the browser. Here are a few guides worth looking at:
http://articles.sitepoint.com/article/code-html-email-newsletters/
http://www.mailchimp.com/resources/guides/email-marketing-field-guide/
If you want CSS that specifically targets mobile browsers you can try the following code.
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />
HEAD tags are often stripped out by email clients, so inline styles are preferred. But if you link to CSS inside the BODY tags it should work.
When you say "mail client", do you mean the real email client that uses ActiveSync, IMAP or POP access? Then you'd need to know if there is any information on each protocol that could simulate the User-Agent from HTTP, which unfortunately there is none on IMAP or POP3 AFAIK. Over Active-Sync, being HTTP, you have the User-Agent and can tweak the responses as you which - for example, first the device asks for a text version (e.g. the preview lines on the list view), and then asks for the whole mime version (possibly html). At this point the server can tweak the email mime and return an optimized version (e.g. tweak the markup, convert or resize attachments, etc.)
Is there a way to force to iPhone’s Safari to use media="handheld" in place of media="screen"?
You can't. Safari intentionally disregards media=handheld, as such stylesheets were typically tailored to pre-iPhone handhelds with much lower capabilities, and would therefore result in a poor low-quality version of the page.
However, you can direct Safari to use specific stylesheets using conditional css.
Is there a way for Mobile Safari to recognize a site meant for mobile phones and automatically zoom in? How does that work on other phones and browsers?
I'd like to avoid looking at user_agent and sending a different page for each mobile browser.
See the configuring the viewport part of the Apple web-app developer guide.
I just noticed that if you have your body or main wrapper div height set to 100%, this can mess with how far out it zooms/renders on a mobile browser. Confirmed this in mobile safari and android's chrome browser. Once I set the #siteWrapper height from 100% to auto, it then rendered at a much better scale.
(height 100% on a main wrapper is often used with sticky footers.)
Sites can recognize a mobile browser and produce output accordingly, that's usually the desired way.
Safari will detect the width and zoom-to-fit, but beyond that...
You can avoid having different pages based on User Agent by using conditional CSS. Apple actually has some very good documentation on creating web pages that can support Safari on the iPhone along with desktop browsers.
I would recommend starting with reading iPhone Human Interface Guidelines for Web Applications. This will give you a good start in using conditional CSS to customize pages on the basis of device characteristics (such as screen size) rather than User Agent.