WebSite X5Help Center

 
Nigel P.
Nigel P.
User

@face-font usage in X5V10  en

Author: Nigel P.
Visited 2567, Followers 1, Shared 0  

Usage of @Font-face to use non-standard web fonts. I have a requirement to try using a font that is non-standard and also it does not exist in the Google Webfonts.

The font is 'Hand of Sean', which I will need to pay for.

I have looked through various web pages and this website forum, where an answer was given for its use in v8. seehttp://www.granitadicaffe.net/64_(TUTORIAL)-Utilizzo-di-un-font-non-di-sistema-in-un-sito-creato-con-WebSiteX5EVO8.html

I will be saving the @font-face details into a Custom custom css file, the details being:-

@font-face {  

font-family: 'SeanRegular';  

src: url('../fonts/handsean-webfont.eot');  

src: url('../fonts/handsean-webfont.eot?#iefix') format('embedded-opentype'),  

url('../fonts/handsean-webfont.woff') format('woff'),  

url('../fonts/handsean-webfont.ttf') format('truetype'),  

url('../fonts/handsean-webfont.svg#SeanRegular') format('svg');  

font-weight: normal;  

font-style: normal;

}

I am trying to get the font into a text object using the Cell style Text Tab

Does anyone know how it use can be simply incorporated into V10 other than by using the HTML object 'Expert' Option?

Nigel

Posted on the
3 ANSWERS - 1 USEFUL - 1 CORRECT
Incomedia
Claudio D.
Incomedia

Hello Nigel,

Unfortunately webfonts has to be incorporated in an HTML Object or you can add it directly in Step 1 in the Expert Tab so that the code is used for all pages.

Please feel free to write back if you need more information.

Read more
Posted on the from Claudio D.
Nigel P.
Nigel P.
User
Author

Hi Claudio, thanks for your reply. I take it that I will need to upload the individual font file(s) into the website root directory or into a new 'fonts' folder (to fall in line with the @font-face script earlier).

The 'custom.css' file will need to be uploaded into the root directory or new css folder with a statement of its location ie something like the Google webfonts link

<link href='/css?family=Knewave|Trade+Winds|Rock+Salt'rel='stylesheet'type='text/css'>

I am guessing a little on this

regards Nigel

Read more
Posted on the from Nigel P.
Incomedia
Claudio D.
Incomedia

Hello Nigel,

You can use a custom folder for the css file and then you need to adapt the link that points to the file according to the name used for the folder. As Example ion your case:

<linkrel="stylesheet" href="css/custom.css" />

Hope this helps.

Read more
Posted on the from Claudio D.