Apologies for the lengthy post, but some background information is necessary before I can pose my question as the situation is quite convoluted.
I am faced with the challenge of incorporating two different fonts into a newsletter.
The first font, Cyclone, is in OTF format.
The second font, Albert, comes in both EOT and WOFF formats.
We utilize a system that automates the process of sending out newsletters. All I need to do is upload an HTML file containing the structure, images, and content of the newsletter, along with any images needed for the design.
Once uploaded, I can preview the newsletter by sending it to myself.
- To clarify, I am unable to upload fonts or any other files to the newsletter system aside from images and HTML.
- Furthermore, I have successfully uploaded both fonts along with the CSS to our website's media folder (public folder) where we also store images.
- It is important to note that access to the .htaccess file is restricted, and obtaining permission to modify it is not feasible due to hosting constraints.
In the newsletter, I attempt to load the font using the following method:
@import url(xxx.com/media/fonts/albert.css);
The corresponding CSS code appears as follows:
@font-face {
font-family: Albert;
src: url("fsalbertwebregular.woff") format("woff");
}
I have also experimented with this alternate setup within the CSS:
@font-face {
font-family: 'Albert';
src: url('FSAlbertWeb-Regular.eot'); /* IE9 */
src: url('FSAlbertWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('FSAlbertWeb-Regular.woff') format('woff'); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}
Following this, I apply the font to the body:
body{
font-family: 'Albert', times new roman;
}
However, this approach results in the error/warning message:
CORS-headeren 'Access-Control-Allow-Origin'
Peculiarly, while utilizing the Cyclone.otf font poses no issues, attempting to use albert.eot or albert.woff yields errors. Even after converting the WOFF format to OTF, the same issue persists.
This configuration may seem intricate, so I have attempted to illustrate it for better comprehension.
Can anyone provide guidance on how to resolve this dilemma without altering the .htaccess file? Additionally, why does the Cyclone.otf font function properly while the others do not, even after conversion to OTF?