Before I begin, I'm a designer, not a coder.
I've successfully created an HTML signature with custom hosted fonts using #font-face, however, once I send the email and receive a reply, the font formatting is lost. It defaults back to Arial or whatever.
here's my code, am I doing something wrong?
I've listed the font family name as `sfd'. I can't remember if this is the actual name, or if it's just an alias I created.
<body>
<style type="text/css">
#media screen {
#font-face {
font-family: 'sfd';
src: url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff2') format('woff2'),
url('http://archive.friendthemagazine.com/email_signature/studiofrontdesk-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
You are not doing anything wrong. The font you are using (studiofrontdesk-regular-webfont) is a web fonts, there are only a handful of devices that read/render web fonts. Below is a list for you.
Apple Mail
Outlook for Mac
iOS
Source: List updated 20th September 2021
Only these email clients will show the web fonts and the rest will read the fall back font. Add the fallback fonts (Arial etc) to your font family.
One method I use for my emails is to have the web font and the below code specifically for Outlook.
<!--[if gte mso 9]>
<style>
table, table td{font-family:Arial, Helvetica, 'sans-serif' !important;}
</style>
<![endif]-->
When emails are replied, the fonts that are on the users system or default to Outlook are used.
Your font is not a downloaded font. So once you send it, it is indeed gone. What you could try is downloading the font, place the file inside the directory you are in now. And put the name of the downloaded font inside your source.
Like this:
#font-face {
font-family: fontname;
src: url('fontname.otf');
}
Hope this helped!
Related
I want to add font-family to another language which I'm using in my ionic 4 app. I tried
#font-face {
font-family: 'SINHA Sithumina 2012';
font-style: normal;
font-weight: normal;
src: url('./assets/font/SINHA Sithumina 2012.ttf');
}
and use it in html css class. Can someone help me with this?
#kavindhi
First thing first you should do to convert you .ttf font family into .otf.
https://convertio.co/ttf-otf/
Then add your font's into assets folder.
Then you should add into into global.scss or add custom file like fonts.scss
Then add this into your font file
#font-face {
font-family: "SolitaireMVBPro-Regular";
src: url("assets/fonts/SolitaireMVBPro-Regular.otf");
}
So it'll be available for you into your ionic 4 pages
font-family: SolitaireMVBPro-Regular;
Finally, I have solved the issue by referring https://www.w3.org/International/questions/qa-css-lang.en which mention by #marblewraith.
So basically I have to mention my words in utf and it will convert my fonts.
Is it possible to import fonts in sendgrid? I've been trying to use #font-face but it doesn't seem to work, but maybe I'm doing something wrong.
Example of the code I used:
#font-face {
font-family: Avenir;
src: url('http://cdn.linktofont.com/font.ttf');
}
We use SendGrid to send some of our emails at StackOverflow, and I can vouch that web fonts work if they are embedded correctly. I use this code:
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
<style>
* {font-family: Roboto, sans-serif;}
</style>
I'm not sure how to best embed a premium font like Avenir, and don't know how well the .ttf format is supported in email clients. But referencing a Google font in a manner like this, custom web fonts will work in mail clients that support them using SendGrid.
I had the same issue, and the only way that I have found to make it work using my custom .ttf file was by defining a and using a class. In the Header options add your styles:
#media screen {
#font-face {
font-family: 'MyFont';
src: url('https://some-server/fonts/MyFont.ttf');
format('truetype');
}
}
.title {
font-family: 'MyFont';
}
Then just use that class in your element:
<h1 class="title"> Some fancy title </h1>
And as was said in a comment before, note that it only takes effect in preview mode and not in the design editor.
I want a text use specific font style, I assign its CSS class as ".title" and the related code all are declared in a CSS file within a Confluence plugin as following:
#font-face {
font-family: 'Myriad Pro';
font-style: normal;
src: url(MyriadPro-Regular.otf) format("opentype"), local("Consolas");
}
.title {
font-family: Myriad Pro;
}
But the plugin cannot find the font file. The font file is in the same folder with the CSS file.
What should be the url for the font file?
For Confluence Server, a basic plugin could be defined like so:
With some files in the following structure:
/your-plugin-name/
/your-plugin-name/main
/your-plugin-name/main/java
/your-plugin-name/main/resources
/your-plugin-name/main/resources/atlassian-plugin.xml
/your-plugin-name/main/resources/css/custom.css
/your-plugin-name/main/resources/fonts/MyriadPro-Regular.otf
And an atlassian-plugin.xml like this:
<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}</description>
<version>${project.version}</version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
</plugin-info>
<web-resource key="your-web-resources" name="Web Resources">
<resource name="style.css" type="download" location="css/custom.css" />
<resource name="myriad.otf" type="download" location="fonts/MyriadPro-Regular.otf" />
<!-- Adding main & global contexts means that these web resources will always be loaded. -->
<context>main</context>
<context>global</context>
</web-resource>
</atlassian-plugin>
Your CSS and font files will be available globally throughout Confluence.
Your CSS file will automatically be loaded and be named something like /downloads/gfdsgfdsgf/fdsgfd/me.davidsimpson.confluence.plugins.example:your-web-resources/style.css where gfdsgfdsgf/fdsgfd is some random characters.
You should be able to reference your font files as though they are in the same directory as the css file like so:
#font-face {
font-family: 'Myriad Pro';
font-style: normal;
src: url(myriad.otf) format("opentype"), local("Consolas");
}
.title {
font-family: Myriad Pro;
}
..but note that they have new names - style.css & myriad.otf.
For Confluence Server
If you want something like Consolas to work in Confluence, you'd either need to ensure that the font is installed on all browsers, or use a similar web font such as Inconsolata.
If you're happy that everyone has the correct font installed, add the following to
Confluence Admin | Custom HTML | At the END of the HEAD:
<style> body { font-family: Consolas, monaco, monospace; } </style>
If you decide to use the web font, add the following to
Confluence Admin | Custom HTML | At the END of the HEAD:
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style> body { font-family: Inconsolata, Consolas, monaco, monospace; } </style>
These assume that you want to use the Consolas font stack - where a similar font will be used if the Consolas/Inconsolata font fails to load.
For Confluence Cloud
You cannot edit CSS or add markup to the page, so this is not possible.
I'm attempting to apply custom CSS to a blank email template in Dynamics' Email Marketing template editor. I inserted a code block into the template that has the following:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<style>
body {
font-family: "Open Sans", Arial, sans-serif;
background: #ececec;
}
p.MsoNormal {
line-height: 25px !important;
text-decoration: underline;
}
</style>
(The attributes shown above are just for testing purposes.)
The problem I'm encountering is when I do a test send, some of the CSS is not being applied. The source of the email contains inline styling that overrides my CSS:
<p class=MsoNormal style='margin:0in;margin-bottom:.0001pt;line-height: normal'><span style='font-family:"Open Sans",sans-serif;mso-fareast-font-family: "Times New Roman";text-decoration:none;text-underline:none'>
In the head of the email source, I can see that SOME of my CSS is being recognized and integrated into the document's style definitions (specifically, text-decoration):
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-unhide:no;
mso-style-qformat:yes;
mso-style-parent:"";
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
line-height:18.75pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman",serif;
mso-fareast-font-family:Calibri;
mso-fareast-theme-font:minor-latin;
text-decoration:underline;
text-underline:single;}
And I can also confirm that the webfont is being applied.
Am I applying custom CSS incorrectly? If not, other than building out emails entirely in the HTML editor, is there a way to reliably apply custom CSS without it being overridden with inline styles?
I'm embedding fonts on a mobile website using #font-face (css from FontSquirrel). When I preview in desktop Safari or Chrome, the fonts embed fine, but they don't appear in mobile Safari on the iPhone/iPad. I'm not getting any errors and I can't figure out what's going wrong. Here's my CSS. Any ideas?
#font-face {
font-family: 'JottingRegular';
src: url('../fonts/jotting_regular-webfont.eot');
src: local('☺'),
url('../fonts/jotting_regular-webfont.woff') format('woff'),
url('../fonts/jotting_regular-webfont.ttf') format('truetype'),
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'JottingBold';
src: url('../fonts/jotting_bold-webfont.eot');
src: local('☺'),
url('../fonts/jotting_bold-webfont.woff') format('woff'),
url('../fonts/jotting_bold-webfont.ttf') format('truetype'),
url('../fonts/jotting_bold-webfont.svg#webfontJpUFTHYS') format('svg');
font-weight: normal;
font-style: normal;
}
OK, I figured it out and will document for anyone who has this problem in the future. I had copied the CSS from Font Squirrel and then I had needed to redownload the actual font files later on. I didn't think that would change anything in the CSS, but it turns out that SVG fonts (which are used by mobile safari) all have an ID that is referenced in the font file and the CSS.
So, in:
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg')
webfonttEfFltbI is the font id. I opened the SVG font file in a text editor and found the new ID in the following line near the top of the file:
<font id="webfontC6xdxB57" horiz-adv-x="972" >
Replacing the id after the hash tag in the CSS fixed the problem.
I was having this same situation. I resolved it by updating the paths to the font. Even though Chrome & Safari were loading them fine, iOS wasn't recognizing my path which was
url ('font/chunkfive/font.eot')
I changed that line to include a / to the beginning of the font path and that fixed everything.
url ('/font/chunkfive/font.eot')
You could also try using an absolute path.
Font face isn't supported on MobileSafari until iOS 4.2.
I had been working with this for a hour before realizing my stupid mistake.
Mobile Safari is CASE SENSITIVE for the fonts, while Desktop Safari is not.
If your font is titled: font.svg, you must add it exactly like it is. If you add it with a Capital F, Desktop Safari won't care, but mobile will.
This has already been solved, but I had a similar problem here:
#font-face not working in mobile Webkit
For me, all the IDs on the SVG fonts were correct; it was the FontSquirrel syntax that was wonky. Using the updated FontSpring bulletproof syntax fixed the issue for me, and seems to work entirely cross-browser.
Font face does work on mobile safari, i am using on iphone 3. I also copied the code from font squirl but it didn't work. Here is the updated code. Use this and it will work everywhere.
#font-face {
font-family: 'MyriadProBoldCondensed';
src: url('/fonts/myriadpro-boldcond-webfont.eot#') format('eot'),
url('/fonts/myriadpro-boldcond-webfont.woff') format('woff'),
url('/fonts/myriadpro-boldcond-webfont.ttf') format('truetype'),
url('/fonts/myriadpro-boldcond-webfont.svg#MyriadProBoldCondensed') format('svg');
font-weight: normal;
font-style: normal;
}