SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2005
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to change Font in an HTML Email

    I created an HTML email to send out. I used inline span to change font to arial. However when I view the email in Yahoo, it turns to Times new roman.

    What am I doing wrong? Im using
    Code:
    <p><span style="font-family: arial;">This is my text</span></p>

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's probably your yahoo which is over-riding your html styles.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here's a comprehensive guide to CSS support in email clients
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    according to that link, font-family style is supported in yahoo.

    check if your yahoo account has some setting somewhere in options/preferences or whatever to see if it is over-riding your html styles.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2005
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its weird. i added a COLOR attribute and the color changes for the font but the font family does not.

    <p><span style="color: #b20838;font-weight: bold;font-family: Arial, Helvetica, sans-serif;font-size: 14px;">This is my text to change</span></p>
    BTW, other emails i get from other people show up as arial.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I ran into a similar issue, which was more frustrating than it needed to be because the manager kept saying "the letter type is wrong" which I took to mean "font" (turns out he only meant the size). His copy of outlook always showed everything in 9px Times New Roman no matter what. I could not get a single copy of Outlook anywhere else in the company to show this, nor Evolution, Thunderbird or web mail clients.

    I assume he had a setting change on him unexpectedly, and we never found out how because he hadn't done anything with it but open emails.

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Essentially, when designing HTML email, you have to imagine that every combination of fonts not displaying, images not showing, layout being messed up and styling not being applied will be seen by someone, somewhere.

    While browsers have got pretty good at interpreting HTML+CSS in the same way, apart from a few edge cases, email clients are a lot further behind, and in the case of Outlook at least, heading in the wrong direction as well. So not only do you need to make your email template as basic as possible, you need to make it gracefully degrade so that if any components of the display are not adhered to, the email still makes sense and is legible and understandable.

    If some people end up seeing it in TNR rather than Arial, that isn't the end of the world!

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It all depends on your email client. If you're using outlook, you may click FORMAT and then richtext and you will get a wysiwyg that will allow you to select any font on your computer. That doesn't mean your recipient will see that font if they don't have it also, however. If you want to compose the whole page in html you have to go the the source link at the bottom of your message display.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •