Correct usage of @font-face in Website X5 Evolution V8 
Auteur : Jason P.Hello
I am looking at using a custom font in X5 V8, and would like to know how to use it correctly.
Looking at various examples, the following link
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
talked about this as a bulletproof usage
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.otf') format('opentype');
}
(note "graublau Web' is the custom font used here, not necessarily the font name I will use)
If I understand this correctly, the url director tells the browser to look in a local folder (a web link of the form http:// can also be used).
In the Page Properties > Expert tab you an add the above code, however there is no facility to add the font files.
Does this mean that the files should be put in <site export>/res or in a subdirectory in site res (with the url updated to /fonts/myfont.otf etc), or is it better to define a totally new directory alongside /res, /images etc called /fonts and update the URL accordingly (and by that I mean
/fonts)
Manually adding these font files appears to be the only way to addd them to the site in V8 as the CSS is generated by the tool.
The above example also gives a further code example, which discusses avoiding a problem of a missing file:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url('GraublauWeb.otf') format('opentype');
}
Is this a better code example for the way X5 works?
To construct the usage, in the <HEAD> code field, you need in total (assuming the above is correct)
<HEAD>
<STYLE>
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url('GraublauWeb.otf') format('opentype');
}
div
{
font-family: GraublauWeb;
}
</STYLE>
</HEAD>
Then in the <BODY> field, using a
<BODY>
p.MyFont { font-family: GraublauWeb , arial, sans-serif, verdana; }
</BODY>
and finally in the HTML entry on the page
This is the text I want to add in <p class="MyFont"> this font </p>
Is this all the correct usage for font-face?
I see in some of the code there is explicit handling for IE, or which the above CSS code example handles by using the .eot file. I am assuming the explicit use of the .eot file is required on top of what X5 does for IE6 for its own autogenerated code.
Thanks in advance.
Auteur
Hello
using the method above, the font (and using absolute links on the C:\ drive directory in place of the exported directory) is not displayed when I test the site in the test browser.
The fonts files listed are in the directory but I am not sure if they are being loaded.
I tried using a class to select th font but this messed up the rest of the text, so I inserted a <span> tag. This fixes the formatting positional problem but again no font is displayed. Inherited properties from the text editor, such as bold and underline are inherited by the text, within the span tag, although this may be better done by defining specific bold and italic font files.
See attached zip
The code in the zip file is in the page properties > expert tab (this is from the font supplier, not the link given previously). If not optimum, the code below should work, assuming the links are correct and the files are in the directory.
Note I added the class in <style> and not in <BODY> as described in the above.
Text I wish to be targeted, is in added, seperated with a <span class="MyCustomFont"> text </span> tag.
Is there anything I have missed? This should be relatively strightforward.
Thanks in advance.
Hello Jason,
Do not use the local URL for the font file instead add in one page an html&Widget Object where you have the possibility to attach files and there add the font files so these will be then also uploaded automatically with the export instead of doing in manually. It is enough to attach them one time and this will then work for the whole project.
In the css code add as URL for the file src:url(" files/Newfont Procv2.eot")
And in this way it should load them correctly.
To see wht is not working correctly it would be useful to see the website online.
Many thanks!
Auteur
Hi Claudio
thanks for the reply.
The reason I think it is not working is because the files are not being loaded correctly, so either the link is not recognised, or the code is wrong, and with your provided example this should be fixed.
When you say "instead add in one page an html&Widget Object", is this done in the text editor part of the page construction using the "add link > select local file" after highlighting the relevant text? Or do you have to use a HTML code object in on the page in 'page creation' and use the "linked file to HTML code" button?
I see nothing in the Page Properties > Expert tab or Step 4 Advanced Settings.
Remember I am using Evolution V8.
I need this font on multiple pages, so is this a one time file load under the HTML&Widget Object or does it have to be done on all pages?
I can see it not working correctly in the test browser: this is one of the last steps I have to do before I pubish it online for the first time. My aim was to get it all working in the test browser, and test it also in FireFox and Internet Explorer before I go live, to make sure it formats and all links are correct, then export.
Many thanks!
Auteur
Hello Claudio
Update: ignore the question "I need this font on multiple pages, so is this a one time file load under the HTML&Widget; Object or does it have to be done on all pages?" as I saw the answer in your post. Apologies.
Other questions still stand.
Thanks
Auteur
Hello Claudio
in advance of a reply, I did the following: Used a HTML object from the page creation dialogue and imported the files to the home page only, as it was stated this is a one time load.
I then tried the following steps:
in Page Properties > Expert, I modified the CSS as discussed above, so the URL is as stated:
url("files/Newfont.otf")...... etc
I exported the file and tested in IE, and nothing.
I repeated using
local("files/Newfont.otf")...... etc
I exported the file and tested in IE, and nothing.
I altered the ('files/Newfont.otf') using a single quotation mark using both url and local.
I exported the file and tested in IE, and nothing.
I even tried a space between the leading (" and files/ as I was not sure this was reuired as in your answer), but the result is the same
I then, in the HTML object, removed the CSS from the <HEAD> and inserted it in the
CSS tab under the HTML object, so the CSS is in the same location as the file import.
I repeated all steps above, using the code variation, exporting the site to local disk every time to test in IE, and nothing.
I even tried adding <STYLE>....</STYLE> around the code in the HTML object > CSS tab, and repeated the above steps. After exporting the font is not being picked up.
I know the font files are in the /files directory as I can see them in Windows Explorer, so I can only conclude the CSS syntax is incorrect somehow. Maybe the CSS class is not being referenced.
I also tried putting the target code as text in the HTML object in the HTML tab, but this did not nork and caused page formatting problems with the template.
Any suggestions would be appreciated. I can email/post you all of the full versions of the code I have used if this is of any use.
Many thanks.
Hello Jason,
Can you please write me the link to the website where you included the fonts so I can see why the code is not working?
Many thanks!
Auteur
Hello Claudio
thanks for the response.
No I cannnot send a link as the site is not published. I am still in a finalisation process before I put it live.
I have read various internet webpages on this and nothing appears to solve it.
There are two possibilities:
- something in my code is wrong
- for some reason the tool is not interpreting the CSS I insert (or maybe I am putting it in the wrong place?).
Neither using url or local appears to fix it either. Using " or ' in CSS is not an issue as CSS does not generally require them for links. I tried this out.
Let me send in a zip file later with the code and some further details.
I know all the font files are there in /files but for some reason they are not being accessed. I suspect a subtle code problem?
FYI: I tested the site on a machine without the font loaded, so it should have loaded the font files, and it does not do it.
Thanks.
Auteur
Hello Claudio
please refer to attached file for code examples or all attempts tried to solve the font problem.
Thanks very much
Hello Jason,
To make a real test it would be better to have it online so the code can be analyzed better but as first I notice in the code you declare to load the code in p.MyCustomFont but then in the text object you use in the span tag.
Try to use in the text object this code
Welcome to the <strong><p class="MyCustomFont"> Templetronics </p></strong> website.
As second thing I would suggest you to upload the font files directly online by creating the a folder as example "font". and then on your code use the complete url
As example src:url(http://www.mywebsitex.com/font/Procv2.eot?) format("eot"),
So this will be loaded for sure also in the preview and the fonts needs not be be attached to the project.
Many thanks!
Auteur
Hi Claudio
thanks for the message.
Following the steps you suggested, the files should be loaded locally, and then referenced. I should be able to do this using 'url' with either a relative address such as ../files, or absolute address such a a http://
As long as the files are present in the dircectory structure (and they are) they should be referenced be either 'url' or 'local'.
Regarding the use of <span>: yes I did this to try and isolate <p>. I was getting formatting issues as the declaration of <p> in the text object with HTML enabled was clashing with the global <p> declaration and also the alignment (after putting in <p></p> I the text that followed was centre justified. This is not what I wanted.
I have seen some posts on this on the answers forum, and pretty everyone is doing what I am doing.
I looked at this
http://answers.websitex5.com/post/58466
In your reply to the post you mention using
<link rel="stylesheet" href="css/custom.css" />
Which talks about (V8)
http://www.granitadicaffe.net/64_(TUTORIAL)-Utilizzo-di-un-font-non-di-sistema-in-un-sito-creato-con-WebSiteX5EVO8.html
(Unfortunately my Italian does not stretch as fluently as this page!),
but this looks like it solves the problem and is in line with your reply above in using url('http://.........')
I looked in the generated website source code, and thre are plenty of declarations as follows
<link rel="stylesheet" type="text/css" href="res/styles.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="res/template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="res/print.css" media="print" />
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="res/iebehavior.css" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" href="res/home.css" media="screen, print" />
So do I need to add the link for custom.css and add it to the /res directory?
I thought adding it into the <HEAD> tag or in HTML object under css would add my font CSS to the page (or applicable stylesheet).
Given you have advised others on this in different posts, and they have got it working, and I am not doing anything different, I am at a loss as to why this isn't working.
Even if I use a directory called /fonts, and use the http:// URL, I have to wait until the site is posted online to see if it is working.
According to the following link, a relative path should work.
http://960development.com/how-to-write-cross-browser-font-face-syntax/
Any ideas? So why does this work in V10 by using relative path links, and not V8 (where it seems you need links to the website?). Does the version of CSS differ between V8 and V10 (i.e. V8 uses CSS2, whereas V10 uses CSS3, which @font-face is supported better?)
Is there a difference in the way V10 interprets @font-face compared to V10?
(the above is attached in full as a .zip in case the answers forum removes any HTML)
In the meantime, I will amend the code as suggested, and add the <link rel="stylesheet" in Page Properties > Advanced to test, but I have no webserver available to export to externally.
Many thanks
Auteur
Hello Claudio
An update from me:
before you look into the above,
I just tried the suggested change above, using
Welcome to the <strong><p class="MyCustomFont"> .......... </p></strong> website.
Putting this in a seperate text box object on the page with HTML enabled.
The font is being loaded locally (I made no changes to the CSS in the Page Properties > Expert tab), and the font is inheriting the class "MyCustomFont".
Unfortunately, it is messing up the formatting. After the <p class=, the text is put centre justified, on a new line and the text that follows is put on a new line, also centre justified.
So the output looks like:
"Welcome to the
TEXT IN THE NEW FONT
website"
This should all be on one line. I may have to put in some alignment directives to see if this helps but I would assume that the <p> is clashing with the other style sheet and so needs to be somehow kept locally.
I would also suspect that the global <p> settings in the global CSS are somehow overiding the class, but they should not be as the <p class= > should tell the browser to just apply the local settings.
I looked in the HTML output, and it looks to me as if V8 inserts its own spans to seperate any p classes. I would expect this as SPAN is used to seperate code which is why I used it.
My knowledge of CSS and how the tool generates layout is not enough to overcome this.
Unfortunately the same font is required to be used mid paragraph across the website so I cannot use the same text object trick. However this proves the font in /files is being addressed and the syntax is correct.
Over to you.
Many thanks.
are you using text object or html object?
use html object, <strong><p> .......... </p></strong>
then click on expert tab and create css ruless for it. for example
.p {
color:#fff;
font-size:36px;
background:transparent;
padding:10px;
float:left;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
}
thats how you can keep full control of every single paragraph inside your website.
if this post is the correct answer, please mark this answer as correct answer.
------------------------------------------------------------
Good Luck
http://www.wdesigners.us
http://www.usx5.com (coming soon)(Sign up to be notified when we launch!)
I forgot to tell you that you can attach your font to css as well
for example
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
remember the best type of fonts to be crossbrowser support are .woff and "@font-face" is a crossbrowser parameter to.
if this post is the correct answer, please mark this answer as correct answer.
------------------------------------------------------------
Good Luck
http://www.wdesigners.us
http://www.usx5.com (coming soon)(Sign up to be notified when we launch!)
Auteur
Hello Anthony
thanks for the input.
In your first answer, I'll use your class declaration. Hopefully this looks like it will overide the global <p> settings as I need to do. Thanks.
In your second post, I have this declared under <STYLE> in Page Properties > Expert, but and I have a .woff file for the font.
I'll give your suggestions a go and update the post accordingly.
Many thanks
Auteur
Hello
unfortunately using the code prescribed above is not working.
I am using in the Page Properties > Expert tab (under <STYLE> ...</STYLE>.
.p {
color:#fff;
font-size:36px;
background:transparent;
padding:10px;
float:left;
font-family: 'Newfont';
font-style: normal;
font-weight: 400;
}
I am using the following in a text box object.
Welcome to the <strong><p> .......... </p></strong> website
Effect is, the desired font disappears: the text is not displayed.
I tries using a HTML object and it does not work (even with the CSS @font-face {....} in the CSS tab (result no text displayed, box formatting wrong)
I have also tried
p.MyCustomFont {....}
.MyCustomFont {....}
Result: no text displayed in new font.
Is it possible to have a CSS class called .p? Originally I used
p.MyCustomFont { .....} to define a class.
It is clear from my attempts before Anthonys reponse the font is being loaded, but the formatting inside the text box is being corrupted, presumably as a default CSS style is being inherited. I notice that the code is seperated using spans as follows:
<p class="imAlign_left"><span class="ff2 fc2 fs10 ">Welcome to the <strong><p class="MyCustomFont"> TEXT IN REQUIRED FONT </p></strong> website. </span><span class="ff1 fc0 fs12 ">
<br /></span></p>
(this is taken from the previous attempt where the font I want is displayed but the formatting is wrong)
Regarding the link mentioned in
http://answers.websitex5.com/post/58466
this talks about replacing a menu font. Mine is in a paragraph of text so the previously comments on @font-face should work.
Any suggestions?
Thanks very much
do not use the text object, you need to use html object. in html object you would be able to put your css code inside expert tab.
html code are not working properly with text object. even for using simple <h1> tag, you need to use html object !!.
after you put everything in your html object, put your desire path as url for your font (for example font/yourfont.woff), then attach the font to the html object and give the path you put for the url (font) and it will upload your font automaticly to folder name "font".
if this post is the correct answer, please mark this answer as correct answer.
------------------------------------------------------------
Good Luck
http://www.wdesigners.us
http://www.usx5.com (coming soon)(Sign up to be notified when we launch!)
Auteur
Hello Anthony
thanks for the response.
I switched to a HTML object and put the HTML code in the HTML tab, the CSS in the CSS tab and removed the CSS from the Page Properties > Expert tab, then going back to the HTML tab, associated the font files.
Result: I now get the following (after altering the font-size):
Welcome to the website.
TEXT IN NEW FONT
(Required: Welcome to the TEXT IN NEW FONT website.)
with a huge space underneath that seems to stretch the make the divider box bigger, and alter the page layout below it, and to the side, namely everything below the HTML object code has a huge whitespace below it of 400px or more.
In my earlier post I mentioned this, and I think it is to do with the inserted spans or a clash between spans and dividers and the effects of the new class.
I this is why the .p{..} style selector puts the new font text on a new line, effectively ignoring the span between the "the" and "website.
In the meantime here is the page HTML illustrating the above positional problem.
<div id="imCel7_01">
<div id="imCel7_01_Cont">
<div id="imObj7_01">
Welcome to the <strong><p class="MyCustomFont"> TEXT IN NEW FONT </p></strong> website.
</div>
</div>
</div>
(As an experiment I tried .p and .MyCustomFont for the classes and the result is the same, so there is no confusion between using p as a class name)
I have not inserted any div: it is all from the tool.
I will try the exported code on a different machine as well as a check.
One further question: you mention the text object with HTML does not work. Is this a V8 problem as I have HTML embedded in text box objects for local links on the page and it works fine.
Thanks in advance.
copy and paste all the code you put in html object and the code you put for css inside a microsoft notepad (divide them)
and your fonts and make all in one zip file and attached here or send it to support AT wdesigners.us and let me see what exactly you are putting there.
as far as space, when you use html object, on the right side bottom, there are options for height, check mark the automatic height and remove the scroll, that should take care of the space.
text object can handle simple html code, but when it goes to specific targets, it can't handle it.
if this post is the correct answer, please mark this answer as correct answer.
------------------------------------------------------------
Good Luck
http://www.wdesigners.us
http://www.usx5.com (coming soon)(Sign up to be notified when we launch!)
Auteur
Hello Anthony
thanks for the response.
As requested, code is in the zipped text file attached. I followed the posts and previous examples I believe but there is always a possibility for syntax error, especially as I am not an pro website designer.
For the object height issues, thanks, I had assumed this operated in the same way as a text box divider, so I will amend the properties as suggested.
For text box vs HTML objects, looks like I have a global replacement to do where pages are required to use the new font.
Thanks in advance
Hello Jason,
If you enter the <p> tag the text is moved to a new line. To have the phrase on one line you need then to use the span tag and on your css code you need to change the p to span. Remove also the
padding:10px;
float:left;
since then the text is moved in another position.
In the css code for the fonts files do not add the ../ in url(../files/Procv2.eot) since it is not necessary to go to tue upper folder.
Try then to export it locally on the hard disk and test it in this way to see if the fonts appears.
Use a browser which is able to show webfonts since the internal browser of Version 8 is the installed Version of IE and if you have IE 8 they could probably not appear.
Many thanks!
Auteur
Hello Claudio
thanks for the response.
This may be down to not being a pro CSS developer, but I thought (and all the example books I have for CSS close a class of form <p="Class ID">....... with a </p> to close the text class you wish to apply. If you do not close the <p>, the text that follows is applied with the class properties.
I also tried span before, and had the justification issue with the required new font text in the centre of the page.
However I will try your suggestions.
I will remove the 'float' and 'padding' directives as suggested.
For the link in url(../) fine: I was going by example here and it seemed to work.
For browser issues (eg internal IE8 for X5 V8) I have IE9 and FF installed and am testing against these also and on a raw machine without the target font installed to ensure the OS is not inserting its own files.
Many thanks!
Jason, you forgot to attach your fonts.
either attach them here or send them to support AT wdesigners.us so I can test it and do the changes.
------------------------------------------------------------
Good Luck
http://www.wdesigners.us (new)
http://www.usx5.com (coming soon)(Sign up to be notified when we launch!)
Auteur
Hi Anthony/Claudio
My apologies. I have been out of circulation for a while, and have only just returned. I am coming back to this issue now.
Following the answer by Claudio above, some good news: on my main test machine, the code works now work as required using the methods above.
However, if I export the site to a machine without the font installed, the code is not intepreted and defaults to native font: not even <strong> is correctly interpreted. This by the way, is using IE9
This suggests for some reason the class is being ignored yet in each page CSS file, the code is correctly displayed, and all files are in the /files directory.
The only differences are: my main machine has the font and also X5 installed.
I have tried the following test platforms/OS/browsers and here are the results:
Mac OS X Lion/Opera: site works and font is displayed (font is preloaded in the OS)
Windows 7/Internet Explorer 9: site works and font is displayed (font is preloaded in the OS)
Windows 8/Internet Explorer 9: site works and font is NOT didplayed (font not loaded into OS)
Pear (Linux distro)/Firefox: site works and font is NOT didplayed (font not loaded into OS)
The site should not be inheriting the font from the OS: there is no mechanism for it (as far as I can see) to the site. The whole purpose of @font-face is to load files from a website if the font is not installed locally. I can see no way, when the site is exported of the @font-face being interpreted by OS to load the font: the code directs browser to the font files. However this may be the issue.
All written HTML code is present on the site pages and all asscoiated CSS page files have the same code in: both are inherited from the HTML objects.
In answer to Anthonys question: you can try it with any non standard/custom font files to try in the code. The font is irrelavant. The freeware files I am testing with can be found at:
http://www.fonts2u.com and search for "procyon"
Thanks in advance.
Look here
http://testseiten.unofficialwsx5.de/procyon
you can download the projekt in zip file.... you can use text object! I uses Version 8!
Step 1 > Metatag for Webmaster Tools!!!!!!!!!
<style>/* @font-face kit by Fonts2u (http://www.fonts2u.com) */ @font-face {font-family:"Procyon";src:url("files/procv2.eot?") format("eot"),url("files/procv2.woff") format("woff"),url("files/procv2.ttf") format("truetype"),url("files/procv2.svg#Procyon") format("svg");font-weight:normal;font-style:normal;}
</style>
Then html Object and attach files or upload extern in files
Install ttf Font in System and Use the Text Object.
Auteur
Hi
thanks for the input.
When you say "Install ttf Font in System and Use the Text Object." I previously originally had the font installed in Windows an used the text editor to format it, but it did not work. But I did not have a @font-face defined as the CSS or the files loaded originally.
Are you saying that your example works by inheriting a ttf from the OS when building the site and targetting text, then on export by using @font-face and loading the files with CSS, then the text editor created text inherits the target font using CSS? So effectively the @font-face replaces the native machine loaded font on export, and X5 V8 then is forced to point to the files locally using CSS.
The website you gave as an example uses the font on a global scale: what I am trying to achieve is to use standard fonts for paragraph text, with the target font applied to specific words like this:
"I want the following word in <span><p class=procyon> procyon </span>. The rest of the text is normal."
I tried your approach first by using the exact code you provided in the Page Properties > Advanced tab. The only difference was I not have the extensions after SVG as files/procv2.svg#Procyon" and in a previous answer from Claudio it was suggested to load the files in using a HTML object. This also did not work. Hence the use of individual page HTML objects with CSS whcih was more successful. By this time I had no text editor text formatted in Procyon: it was only pointed to using HTML/CSS. Your approach seems to be a hybrid. My understanding was @font-face was a stand-alone directive independent of the OS.
I can retry this and replicate your site. If your suggestion works then this simplifies the construction a lot, although I have to redo a lot of the site formatting.
Any further suggestions gratefully received.
Many thanks.
Auteur
I overlooked the use of "Step 1 > Metatag for Webmaster Tools!!!!!!!!!": so the above post may be a misinterpretation of your method. Apologies.
Why does your site work using this as a Metatag as above, and not in a global declaration for </STYLE> under <HEAD>? As a non expert web designer, I do not understand the difference.
Many thanks
I try to explain why the times the above information town.The not out from the others for successful problem in version 8 is the indication that you still writes in the head area in front of the style information appears in the source responsible for the text output .
In short :
1
you say @ font-face .....
2
X5 then adds @ font-face in the head area
3
then the other style are encoded the X5 in the text / tables objects are present
4
X5 adds style then the other disclosures in the head , and then overwrites it were, the @ font-face
If you use the text object you have the font installed to be able to select it on your system.
I had it that it is in Webmaster Tools installed area because I was still of the opinion inserted just before the end of the </ head> . But that's not true . It was long ago when I had used the version 8 . You can write it in the top field .
However, one must always make sure that the file name in the source code and the file itself is lowercased. I think it will be your fault.
I have again changed on the test page the text object and also put the code in the field above . You should now see different fonts.
So it goes you only need
then the Text Object
and the files in the attachement
Auteur
Hi
thanks for the response.
To recap:
method 1: using @font-face in the Page Properties > Expert tab using the "code to be added in HEADER" did not work.
method 2: Adding it in HTML objects with dedicated CSS did not work.
Both should have worked accoring to the examples I read.
Methods 3: Adding the code in the "Metatag Code for Google Webmaster Tools Verification" does work.
"Der Zwoemti" may be right when he says the filename case may have caused the problems. I have to retry with all lowercase fonts. I have the result I need.
I am closing this thread off as the problem (for me) is solved. I will reopen it if there is anything more to add.
Many thanks to Claudio, Anthony and "Der Zwoemti" for all their input into this post.