HTML article @font-face format

Should I be using .svg web fonts for my HTML articles when I embed local fonts using @font-face? I see the DPS Help shows .otf in a screen shot, I have talked to others who have said use .ttf format.

I don't think OTF or TTF will matter. They should both work. I've use OTF fonts with no problem.
Of course, you should check the license to make sure it's okay.
Bob

Similar Messages

Cant get @font-face to work on my new web site

Hi everyone,
I Cant get @font-face to work on my new web site.
I tryed it before on other web sites and it worked just fine.
Here is the code i am using:
CSS:
@charset "utf-8";
@font-face {
font-family:"Caviar Dreams",sans-serif !important;
font-style: normal;
src:url ("../fonts/CaviarDreams.ttf") format('truetype');
src:url("../fonts/CaviarDreams.eot") format('eot');
src: url("../fonts/CaviarDreams.svg") format('svg');
src:url("../fonts/CaviarDreams.woff") format('woff');
src:url("../fonts/CaviarDreams.otf") format('otf');
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
body{
background-image:url(../images/background/wraper_bg.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%;
font-family:"Caviar Dreams", sans-serif !important;
.caviar{
font-family:"Caviar Dreams", Arial, Helvetica, sans-serif ;
.index_bg{
width:100% !important;
height:100% !important;
background:url(../images/graphics/index_bg.png) !important;
background-size:cover !important;
.welcome_image{
position:absolute;
top:35%;
width:95% !important;
margin:2% !important;
.nav{
color:#FFFFFF !important;
font-family:"Britannic Bold" !important;
font-size:14px;
font-weight:lighter !important;
.background_white{
background:rgba(255,255,255,0.7);
.background_black{
background:rgba(0,0,0,0.65);
.background_black_2{
background:#000 !important;
.background_noir{
background:rgba(179,1,1,0.7);
.background_purple{
background:rgba(152,131,201,0.7)!important;
color:#FFFFFF !important;
width:100% !important;
height:25px;
text-decoration:none !important;
font-family:"Caviar Dreams" ;
border:0px !important;
margin:0px !important;
padding:0px !important;
.background_purple:hover{
background:#FFFF00!important;
color:#000 !important;
width:100% !important;
text-decoration:none !important;
font-family:"Caviar Dreams" ;
border:0px !important;
.white{
color:#FFFFFF !important;
.black{
color:rgba(0,0,0,1) !important;
.red{
color:#B30101 !important;
.yellow{
color:#FFFF00 !important;
.black_span{
background:#000000 !important;
color:#FFFFFF !important;
margin:1% !important;
margin-left:5px !important;
padding:5px !important;
.black_span_margin1{
margin-left:0px !important;
.black_span_margin2{
margin-left:0px !important;
.border_white{
border:3px solid #FFFFFF !important;
margin:0px !important;
padding:0px !important;
.border_gold{
border:0px solid #000!important;
margin:0px !important;
padding:0px !important;
h1, h2, h3, h4, h5, h6{
font-family:"Britannic Bold" !important;
font-weight:lighter !important;
color:#FFD700 !important;
margin-left:2% !important;
margin-right:2% !important;
margin-top:2% !important;
margin-bottom:2% !important;
p{
font-family:"Caviar Dreams", Arial, Helvetica, sans-serif !important;
font-size:16px !important;
color:#FFFFFF !important;
margin-left:2% !important;
margin-right:2% !important;
margin-top:2% !important;
margin-bottom:2% !important;
.text-small{
font-size:12px !important;
.caviar{
font-family:"Caviar Dreams" !important;
I am trying to use the font Caviar Dreams on my new web site but i cant get it right,
Can anyone tell me what is wrong.
And also i would like some help with IE9, it seems the header is displaying in blue instead of black on IE9 and 10.
My web site adrees is marcoalexwebdesign.site11.com .

I already fixed the issue, it seems trhat in dreamweaver the fonts ttf , otf, etc must be in a folder named webfonts, and then dreamweaver connects the fonts stylesheet to the main stylesheeet with @inport.I had to unisntall the fonts from my windows and download them again and add tehm with dreamweaver add web fonts feature.
Thanks ayway.

I'm using the @font face to embed fonts on my site. Everytime I use a heading tag Firefox adds extra emphasis (making a bold font even bolder). How can I resolve this? The heading tag renders fine in Chrome/Safari.

<pre><nowiki><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="index/fonts/fonts.css"/>
</head>
<body>
<h1>Heading2</h1>
<p> Testing </p>
</body>
</html>
*/CSS/*
*/Fontface rule/*
@font-face {font-family: 'Gibson-Bold';src: url('159693_2.eot');src: url('159693_2.eot?#iefix') format('embedded-opentype'),url('159693_2.woff') format('woff'),url('159693_2.ttf') format('truetype'),url('159693_2.svg#wf') format('svg');
*/Testing use of Fontface/*
h1, h2, h3, h4, h5, h6 {
font-family: Gibson-Bold;
font-style: normal;
font-size: 10pt;</nowiki></pre>

You're welcome.
It is always a good idea to reload and bypass the cache after you have made changes and uploaded new files.
Reload web page(s) and bypass the cache.
* Press and hold Shift and left-click the Reload button.
* Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
* Press "Cmd + Shift + R" (MAC)

FF5 error parsing CSS font-face with url inline base64 data

Firefox 5 refuses to parse CSS @font-face with url inline base64 data.
I use the declaration:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,[base64data]);
</style>
then used this way:
<div style="font-family:'MyFont'; font-size:12.0pt">Test text</div>
But Firefox is not using the font and in the error console, there is always the message:
''Error parsing the "src" value. Skipped to next declaration.''
(more or less, I actually have this message in Czech)
Tried with different mime types (font/ttf,font/otf,font/opentype,application/x-font-ttf etc.), with or without charset specification, with or without quoting the font family name, with different specifications:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,[base64data]) format(truetype);
</style>
(tried also with opentype format, etc.)
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url('myfont-webfont.eot?');
src: local('☺'), url(data:font/truetype;charset=utf-8;base64,[base64data]);
</style>
If I provide the font path:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url('Arial.ttf');
</style>
(the font actually is Arial, for testing), it works (but I need to embed the font in the HTML for specific reason, so having the font externally is not the option).

Finally I got it work! Thanks, cor-el, you pointed me the right way to solve this problem.
There was problem with the encoding too (there was part of the font missing at the end, because of the bug in the program - I forgot to flush the buffered output stream), after then I was able to download the same copy of the TTF. - I didn't know about the possibility to put the entire url data to the location bar and try to download it, thanks cor-el.
But it still didn't solve the problem ... the problem was, that the base64 stream was divided to multiple lines, like
data:font/truetype;charset=utf-8;base64,
AAEAAAAYAQAABACARFNJRwMaCRYAC8m8AAAXfEdERUaJ+Y1JAAr/JAAAAsJHUE9T
e1arnwALAegAAKwaR1NVQt5CYFEAC64EAAAbmEpTVEZtKmkGAAvJnAAAAB5MVFNI
RExjrAAAN8wAAA1dT1MvMhAyXXMAAAIIAAAAYFBDTFT9ez5DAAr+7AAAADZWRE1Y
After I removed the line breaks, it works now! (the line is quite long then, because the base64 string is about 1MB, but it works)
Strange that I do the same for images (jpeg, png) and there is no problem with base64 string divided to multiple lines.
But anyway, I'm fine with that.

Font license for @font-face

Hi forum,
My name is Riaz,a web designer and developer. I have Genuine photoshop CS4 and it has been bundled with several adobe fonts. I would like to use those fonts in my own website (not for others) by using @font-face option in CSS3. I think it is not like embedding and I am not sure about it. I like "Trajan Pro" and it gives "editable embedding" license, so is this allows embedding in a web page.
I use to obey the licensing terms every where , so I am not requesting anybody to provide anything free but I need help to know whether it is legal or illegal.
So ,Kindly somebody help me to go in a right path.
with kind regards
Riaz

Riaz,
You have to review the EULA for type products. This page
http://www.adobe.com/type/browser/legal/index.html
contains links to the embedding rules. It says »All Adobe Type Showroom fonts can be embedded in Adobe Portable Document Format (PDF) files, as well as other types of electronic documents.« but it never tells us what »other types of electronic documents« are. But in the EULA it says very clearly:
2.3 Server Use. […] No other network use is permitted, including, but not limited to use of the Software, either directly or through commands, data or instructions, from or to a Computer not part of your Internal Network, for Internet or web hosting services or by any user not licensed to use this copy of the Software under a valid licence from Adobe […]
Putting the font on your web server would be such a web hosting service.
Check out Adobe Web Fonts which offer Trajan:
http://www.adobe.com/type/webfont/info.html
- Michael

Font licensing for eBooks (epub with @font-face)

Hello,
The ePub format supports - as you may know - the CSS2 @font-face, but Adobe's fonts aren't directly embeddable that rule.
At the moment, there are not FAQs or license terms specifically written for ePub (or other kind of ebook formats) so I'm going to refer to the currently available documents I found on the web.
A Typblography blog post (http://blogs.adobe.com/typblography/2010/10/web-font-licensing.html) clearly describes the difference Adobe sets between "embedding" and "serving" a font.
Epub format - unfortunately - lies in a sort of no man's land, because it is a zipped container of browsable documents (xhtml files, stylesheets, images, fonts), so it can be considered a self-contained and portable document, but at the same time, it doesn't protect the fonts from unauthorized use.
Also the Adobe Font Licensing FAQs (http://www.adobe.com/aboutadobe/antipiracy/ff_faq.html) partially clarify the field of discussion.
The Adobe's proprietary font obfuscation feature, supported by Adobe Digital Editions, can be easily overridden with few lines of python code.
Adobe doesn't allow for @font-face embedding but let authors access to use its fonts via specialized web font services such as Typekit.com which can't be used by ePubs because of its offline nature.
My questions are:
Can I use an Adobe licensed font (i.e. Minion Pro) in an ePub ebook using @font-face?
What kind of license or agreement should be used?
Is there a dedicated contact for licensing-related issues (the [email protected] address just bounces back)?
Indeed, I can already download some ePubs featuring the Minion Pro typeface. I.e: "Il fu Mattia Pascal" edited by Mondadori (the most important italian publishing company) and freely downloadable from the LaFeltrinelli store (http://www.lafeltrinelli.it/products/9788852013089/Il_fu_Mattia_Pascal/Luigi_Pirandello.ht ml).
That makes me confident that an arrangement is possible, isn't it?
I hope to hear soon from you, as I'm writing also on behalf of some others italian ebook designers.
Thank you,
Matteo Balocco

Great question. Did you ever get a reply?
Steve

HTML 5 Font Embed

I have a set of fonts I embeded ready to go up, here is my CSS
@font-face {
    font-family: 'ITCGaramondStdBoldCondensed';
    src: url(fonts/'itcgaramondstd-bdcond-webfont.eot');
    src: url(fonts/'itcgaramondstd-bdcond-webfont.eot?#iefix') format('embedded-opentype'),
         url(fonts/'itcgaramondstd-bdcond-webfont.woff') format('woff'),
         url(fonts/'itcgaramondstd-bdcond-webfont.ttf') format('truetype'),
         url(fonts/'itcgaramondstd-bdcond-webfont.svg#ITCGaramondStdBoldCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
@font-face {
    font-family: 'ITCGaramondStdBdCnIt';
    src: url(fonts/'itcgaramondstd-bdcondita-webfont.eot');
    src: url(fonts/'itcgaramondstd-bdcondita-webfont.eot?#iefix') format('embedded-opentype'),
         url(fonts/'itcgaramondstd-bdcondita-webfont.woff') format('woff'),
         url(fonts/'itcgaramondstd-bdcondita-webfont.ttf') format('truetype'),
         url(fonts/'itcgaramondstd-bdcondita-webfont.svg#ITCGaramondStdBdCnIt') format('svg');
    font-weight: normal;
    font-style: normal;
All good and dandy. the issue I am having is how to attach this embeded font to a div box. I am new to html 5 so be gentle. Can you show me a simple code that would take this font an apply it to this div box only. Here is my div box code
<div class="logo_left_box_text1"></div>

One way is to define some re-usable classes in your CSS:
     .ITCBold {
     {font: 60px/68px 'ITCGaramondStdBoldCondensed', Arial, Helvetica, sans-serif;}
     .ITCItalic {
     font: 18px/27px 'ITCGaramondStdBdCnIt', Arial, Helvetica, sans-serif;}
Then add appropriate class names to your HTML markup:
     <h1 class="ITCBold">
     This is a heading 1 with ITC Garamond, Standard, Bold, Condensed
     </h1>
     <p class="ITCItalic"> This is a paragraph with ITC Garamond, Standard, Bold, Condensed Italic.
     </p>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Why does CSS' "@font-face" not work in FF8.0?

I am using embedded fonts via CSS' @font-face, which works perfectly in IE9, Safari 5.1.1 and Opera 11.52. However it does not work in FF8.0 (or Chrome 15.0.874.121) and falls back to Verdana.
Here is my CSS:
body,td,th {
font-family: DragonwyckFont, Verdana, Geneva, sans-serif;
@font-face {
font-family: "DragonwyckFont";
src: url("../fonts/Dragonwyck_Normal.eot");
src: url("../fonts/Dragonwyck_Normal.eot?#iefix") format('embedded-opentype'),
url("../fonts/Dragonwyck_Normal.ttf") format('truetype');
This is being tested on a W7 box, using localhost: on IIS.
Any help or advice would be much appreciated.
Thankyou in advance.

Hi cor-el,
Thanks for your very quick reply, unfortunately the solutions you offered have been unsuccessful.
I did as you suggested (including deleting the relative path and placing the fonts in the same directory as the CSS) and followed all the advice given in the references you made.
I am not going across domains so Access Control Headers are not required.
Bizarrely, the link from the demo (https://developer.mozilla.org/en/CSS/@font-face) works perfectly but, when I replicate it using the full path to Dragonwyck_Normal.ttf, it doesn't.
My little brain is starting to fry and I must be doing something completely daft but, with just half a dozen lines of code, I fail to see how it could be more simple!
CSS:
body,td,th { font-family: "Dragonwyck", serif; }
@font-face {
font-family: "Dragonwyck";
src: url("Dragonwyck_Normal.ttf");
Any ideas?
Regards,
Chaindrive.

Getting text/html message in proper format

i want to send a message in html format by setting the message content as:
msg.setContent(messageText, "text/html");where
String messageText="hello";
messageText="<html><body><font color=red>"+messageText+"</font></body></html>";
if i do this i get it in proper format in red color.
Now,i want it in the format below:for ex:
" Dear xyz,
How are You?
I am fine.
bye "
but my problem is that if i am getting the content in the messageText variable by using request.getParameter() method from another page,then i get it as:
" Dear xyz,How are You?I am fine.bye "
please tell me the solution to my problem of getting in the proper format.
thanx
geeta

i htink u can go in for pre formatting..
<pre> Message Text </pre> ....This will output the messagein the same way as it was written..
i did not try this..please tell me whether this solves ur problem.
sriram

Problem with font face

Hi
I've observed that Helvetica font looks ugly and I want to replace it in local.conf. I've written appropriate line in /etc/fonts/local.conf. To check it I try this html code:
<html>
<body>
<font name="Helvetica">
Some stupid text.
</font>
</body>
</html>
Ok it works.
But when I change font name to font face font still looks ugly. This is entry in local.conf:
<match target="pattern" name="family">
<test qual="any" name="family">
<string>Helvetica</string>
</test>
<edit name="family" mode="assign">
<string>Verdana</string>
</edit>
</match>
What I must do to fix it ? Some sites like http://www.4front-tech.com/ unfortunatelly use font face and results are bad.

Hmm, it's actually a bug in fontconfig rules I see. We replace Helvetica, Times and Courier with Sans-serif, Serif and Monospace. Within the fontconfig rules these generic font families are replaced by more modern fonts:
<alias>
<family>Bitstream Vera Sans</family>
<family>DejaVu Sans</family>
<family>Helvetica</family>
<family>Arial</family>
<family>Verdana</family>
Helvetica (the bitmap font!) is in front of Arial and Verdana. If you don't have Bitstream Vera Sans or Dejavu Sans installed, it will render Sans-serif as Helvetica instead of Arial/Verdana.

Report Generate to File PDF, HTML,Excel and Others Format

Dear Experts,
I am using Oracle 9i and Developer 6i. How I convert report in PDF, HTML, Excel and others format after generating the report. When i try to generate, then giving the following error message:
REP-0999: Unimplemented Error.
How can I solve it, Please help me.

Do the column headings display ok but the data does not?
If so it may be related to the font size. i.e. the whole report may not fit on the page when scaled for pdf output.

Using @font-face in css skin

Well it has been ask before...
Using Custom Fonts in ADF
Using Custom Font Load in ADF within a style sheet under skin
Include Custom Font in ADF Skin file
But the question has not been answered, yet.
So is the at-rule @font-face supported, to be used inside a skin, and if not what are the known workarounds?
( I am using jdev 11.1.2.0 )

I tested with jdev 12.1.2.0 but it seems not to work here, either.
This is how I declare it:
@font-face { font-family: 'FontAwesome'; src: url('fonts/fontawesome-webfont.eot?v=3.1.0'); src: url('fonts/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg'); font-weight: normal; font-style: normal; }
And here is how I use it:
af|panelBox::disclosed-icon { font-family: FontAwesome; content: "\f054"; }
But it gets not applied.
I did not found the @font-face rule in the generated css file. Neither in IE10, nor in Chrome 29. Additionally I don't see the eot file, when I capture the traffic, which confirms, that the @font-face rule is ignored.

Why does the @font-face work in a Private Tab, but not in a normal Tab?

I consistently find that the @font-face does not work in Firefox unless I use a Private Tab, but I prefer to use a regular Tab so that I can keep track of what pages I have visited. In a Private Tab the Android app displays Hebrew with cantillation marks as nicely as Windows does using the very same font. This is probably an unintended bug, as I cannot imagine why you would want Private Tabs to work better than the regular ones. The css function in question is:
@font-face {
font-family: 'Shlomo LB';
src: url('../ShlomoLightBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Hello,
Thank you for bringing this up. There is an open issue in Bugzilla - [https://bugzilla.mozilla.org/show_bug.cgi?id=769194 src:local() @font-face rules doesn't work on Android]. But in this case you are mentioning a src:url, so I don't know if they are related.
Also, can you please confirm if you are using NoScript or any other plugin on your browser and if there are settings that differ for the normal tabs vs. private tabs (noscript has an option to block @font-face).
Would it be possible for you to create a sample for testing this?
Thank you

@font-face not working in firefox

My @font-face is not working in firefox why would that be?
@font-face {
    font-family:LondonMM;
    src: url('LondonMM-webfont.eot');
    src: url('LondonMM-webfont.eot?#iefix') format('embedded-opentype'),
         url('LondonMM-webfont.woff2') format('woff2'),
         url('LondonMM-webfont.woff') format('woff'),
         url('LondonMM-webfont.ttf') format('truetype'),
         url('LondonMM-webfont.svg#londonmmregular') format('svg');
    font-weight: normal;
    font-style: normal;
I have them all in a fonts folder inside my root folder

There might be a problem with one of the fonts FF recognizes and that problematic file is the one FF is attempting to use.
Try commenting out all of the fonts FF can use, so...
@font-face {
    font-family:LondonMM;
    src: url('LondonMM-webfont.eot');
    src: url('LondonMM-webfont.eot?#iefix') format('embedded-opentype'),
        /*url('LondonMM-webfont.woff2') format('woff2'),*/
        /*url('LondonMM-webfont.woff') format('woff'),*/
        /*url('LondonMM-webfont.ttf') format('truetype'),*/
         url('LondonMM-webfont.svg#londonmmregular') format('svg');
    font-weight: normal;
    font-style: normal;
Then restore one at a time, individually, and see if FF comes back on line.

Camera strangly rotated in HTML article file input

Hi guys,
I encountered strange behaviour of camera invoked from html input[type=file] element in html article.
When iPad is in portrait position, camera works as expected, but when iPad is rotated to horizontal position
camera interface and preview are rotated 90 degree clockwise. Even if i rotate iPad to match its orientation to Interface
preview stays rotated.
Is there a way to fix this issue?
Below screenshots to better ilustrate problem.
iPad handled in horizontal position - Camera interface and preview are rotated 90deg
iPad handled in portrait position - Camera interface is ok, but preview is rotated 90deg
Piotr

I have done a little more research on this...
As it turns out, my camera is a Pentax K100D Super - not a K100D. The K100D Super is not listed as one of the supported camera RAW formats in the aforementioned article. So I guess this means that my camera is as yet unsupported. Sigh...

HTML article @font-face format

Similar Messages

Maybe you are looking for