Skip to Content (Press Enter)
2019-05-23 07-23-11
Chunyanuch Kimpiam
359Views
6Comments
[ Outlook Email ] Image Size & Font Problem!
Question
Email
CSS

OUTSYSTEMS WEB

I try to create an email template for outlook window application and outlook on the web browser but I have some problem about

  • I can’t setting image size css include width 100% and max-width xxx px.The result in outlook app is the original width of import image file. You will see it below. The image is too large! : (

  • And this is on the outlook web browser.It looks OK.
  • I set the font in css theme like this

@font-face {

    font-family: 'Myfont';

    src: url('https://My_Environtment/module/myfont.ttf') format('truetype'),

         url('https://My_Environtment/module/myfont.eot') format('eot');

    -fs-pdf-font-embed: embed;

    -fs-pdf-font-encoding: Identity-H;

    font-weight: 300;

    font-style: normal;

}

And use it on properties but nothing happened.

0
0
23 Jan 2020
Copy Link
UserImage.jpg
G Andrew Duthie
 
MVP

Can you share a small OML that reproduces the issue?

I'm assuming you're creating an Email screen in your app with the styles you mention?

One thing to keep in mind is that CSS compatibility in email clients, including Outlook, isn't all that great. 

I just ran across https://caniuse.email/ I can't vouch for how accurate it is currently, but it should give you an idea of things that may cause issues. Specifically, many versions of Outlook desktop do not support @font-face.

So you may need to scale back your desired look and feel of your emails to ensure you're only using CSS features that any target email clients can support.

0
0
23 Jan 2020
Copy Link
2019-05-23 07-23-11
Chunyanuch Kimpiam

G. Andrew Duthie wrote:

Can you share a small OML that reproduces the issue?

I'm assuming you're creating an Email screen in your app with the styles you mention?

One thing to keep in mind is that CSS compatibility in email clients, including Outlook, isn't all that great. 

I just ran across https://caniuse.email/ I can't vouch for how accurate it is currently, but it should give you an idea of things that may cause issues. Specifically, many versions of Outlook desktop do not support @font-face.

So you may need to scale back your desired look and feel of your emails to ensure you're only using CSS features that any target email clients can support.


I'm sorry. I can't share this OML file because it's the customer's work.
But if it really needed to solve a problem, I'll create a new similar one.

Fortunately, the advice from you gave me the idea! Now I use another method to solve
untidy layout by use only tables instead of the container(div).


For the image size problem, I import image files with appropriate width and height since outlook does not read width and max-width. (Maybe it does not support image width by code on outlook)



To import my font. How can I declare them by don't use @font-face? could you please guide me more?


0
0
27 Jan 2020
Copy Link
2026-02-05 15-36-36
Lenon Manhães Villeth
Champion

Chunyanuch Kimpiam wrote:

G. Andrew Duthie wrote:

Can you share a small OML that reproduces the issue?

I'm assuming you're creating an Email screen in your app with the styles you mention?

One thing to keep in mind is that CSS compatibility in email clients, including Outlook, isn't all that great. 

I just ran across https://caniuse.email/ I can't vouch for how accurate it is currently, but it should give you an idea of things that may cause issues. Specifically, many versions of Outlook desktop do not support @font-face.

So you may need to scale back your desired look and feel of your emails to ensure you're only using CSS features that any target email clients can support.


I'm sorry. I can't share this OML file because it's the customer's work.
But if it really needed to solve a problem, I'll create a new similar one.

Fortunately, the advice from you gave me the idea! Now I use another method to solve
untidy layout by use only tables instead of the container(div).


For the image size problem, I import image files with appropriate width and height since outlook does not read width and max-width. (Maybe it does not support image width by code on outlook)



To import my font. How can I declare them by don't use @font-face? could you please guide me more?



Hi again!

I had several problems with HTML generation when setting images width and/or height 100%. Be careful with that.

Best regards! 

1
0
27 Jan 2020
Copy Link
UserImage.jpg
G Andrew Duthie
 
MVP

Chunyanuch Kimpiam wrote:

To import my font. How can I declare them by don't use @font-face? could you please guide me more?

Not sure, since I don't spend a lot of time with CSS for specific email providers. But for this, you might be better served checking Stack Overflow, since this is really more of a CSS and Outlook (or other email providers) question than an OutSystems-specific question:

https://stackoverflow.com/search?q=CSS+email+%40font-face


1
0
27 Jan 2020
Copy Link
2026-02-05 15-36-36
Lenon Manhães Villeth
Champion

Hi, Chun. 


The behavior of images and e-mail screen can be different dependeding of the destination.


Have you tried this same screen on gmail or other on?

0
0
24 Jan 2020
Copy Link
2019-05-23 07-23-11
Chunyanuch Kimpiam

Lenon Manhães wrote:

Hi, Chun. 


The behavior of images and e-mail screen can be different dependeding of the destination.


Have you tried this same screen on gmail or other on?


Yes, It looks different when it on different email services.Gmail looks beautiful and tidy than Outlook.

0
0
27 Jan 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.