0

I´m trying to send an email in php using my web fonts on the body of the email text.

I have this link for my web fonts.

  <link rel="stylesheet" type="text/css" href="http://localhost/projet/tpl/fonts/fonts.css" />

Then I have a message that I want to send using my fonts in the text:

$msg = '<h3 style="font-family: \'bariol_boldbold\'; color:#099;">Hello '.$assoc['name'].', </h3>
<p style="font:bold 12px Arial, Helvetica, sans-serif; color:#666;">How are ayou?</p>';

My bariol_boldbold is a webfont that I have and its not working,but with Arial, Helvetica, sans-serif its working.

To send emails with web fonts can not be this way \'bariol_boldbold\'?

I

John23
  • 219
  • 2
  • 9
  • 31
  • Your link to `../tpl/...` is a relative URL that will only work on your domain. For example, if I receive that at my Gmail account, it will refer to a directory under gmail.com. Try specifying the full domain name. – Jeff Apr 01 '14 at 00:57
  • You can't link to external style sheets in html email. – John Apr 01 '14 at 13:20

2 Answers2

2
<link rel="stylesheet" type="text/css" href="http://localhost/projet/tpl/fonts/fonts.css" />

What you have here attempts to access a file from your local computer (localhost), it isn't working because how can gmail access a file on your computer? they can't!

You would need something like this:

<link rel="stylesheet" type="text/css" href="http://my-website.com/projet/tpl/fonts/fonts.css" />
Zack
  • 1,615
  • 18
  • 26
  • Thank you for your answer, I didnt know that but even with that its not working with :/ – John23 Apr 01 '14 at 02:14
  • Note that the URL I posted was just an example, you must use the correct URL on your hosting server. If you load the URL to the fonts.css file that you are referencing in your ``, does it load correctly? – Zack Apr 01 '14 at 02:21
  • Thanks for your answer, yes Im having like this: – John23 Apr 01 '14 at 02:30
  • And if I acess this url I see the CSS fonts code...but in the emails is the fonts still dont work! – John23 Apr 01 '14 at 02:30
  • Your href property has a relative URL in it still. That is the problem. Refer to my answer again, notice the HTTP:// prefix. That is what makes it absolute. If you go to your browser and enter "../tpl/fonts/fonts.css" it will go nowhere, because it is not a valid URL! – Zack Apr 01 '14 at 02:43
  • – John23 Apr 01 '14 at 02:51
  • But im having like you, i dont know why in the comment my http:// is erasing. I will updat my post with the href that I´m using! – John23 Apr 01 '14 at 02:52
  • 1
    Your URL syntax is valid yes, but only on your local machine! go to your web browser, enter "http://localhost/projet/tpl/fonts/fonts.css" come back and tell me what you see. That will directly answer your question. You must upload that file to a remote server to use it on a remote address, such as gmail – Zack Apr 01 '14 at 02:56
  • I see this: @font-face { font-family: 'bariol_boldbold'; ... } – John23 Apr 01 '14 at 02:58
  • And the other types of this font-family regular, italic, etc! – John23 Apr 01 '14 at 02:59
  • I never did that before, it is possible to test that in localhost? – John23 Apr 01 '14 at 03:00
  • sorry, I forgot to add: turn off your localhost server. I'm assuming WAMP or MAMP (if on mac). Then go to that address. localhost is a local server on your computer only. – Zack Apr 01 '14 at 03:00
  • Notice there is no ".com" or ".net", etc. on localhost? That means it is not a remote address. localhost can only be accessed from your computer! – Zack Apr 01 '14 at 03:01
  • Yes, sure that not works without my Xampp. But Im sending emails on localhost so I thought it was also possible to send emails with webfonts on localhost too! – John23 Apr 01 '14 at 03:06
  • I see, I did not know that. Yes you should be able to if I am not mistaken, the issue must be elsewhere! Maybe try using a stylesheet instead of escaped inline styles. – Zack Apr 01 '14 at 03:08
  • Yes, I will try to find that elsewhere :P! Thanks for your help, I really didnt know that URL thing :) – John23 Apr 01 '14 at 03:09
  • @deraad External style sheets do not work in html email (at least consistently across major email clients). `@import` is the best technique to use. – John Apr 01 '14 at 13:21
1

Webfonts in html email are not very straight forward I'm afraid. They are unsupported in several clients, and Outlook '07, '10 and '13 will actually revert to times new roman if you try to use them there. You need to use conditional statements to avoid this.

See this thread for the most well supported technique I could find. It works in all email clients that accept web-fonts and falls back gracefully to sans-serif on other clients.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60