@face-font usage in X5V10
Autor: Nigel P.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
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.
Autor
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
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.