How can I integrate web fonts example?
how to import files and font as the address is in CSS?
Hi Paulo.

What you need to do is add your font files as resources, set the Deploy to target directory option, type in a path (and remember it).
Like so:

Then add your @font-face css, pointing to the path and files, to your theme.

@font-face {
font-family: 'myWebFont';
src: url('/fonts/myFont.eot');
src: url('fonts/myFont.eot?iefix') format('eot'),
     url('fonts/myFont.woff') format('woff'),
     url('fonts/myFont.ttf') format('truetype'),
     url('fonts/myFont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;

body, html {
 font-family: "myWebFont", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;
h1 {
 font-family: "myWebFont", Arial, Helvetica, FreeSans, sans-serif, "open-serif", open-serif;

Nice post Chinita,
I think I already saw this before in a past project with you.. :)

just stayed with a doubts in following question look how was that became my CSS the unique way that worked.

@font-face {
  font-family: 'FontAwesome';
  src: url('./fonts/fontawesome-webfont.eot?v=4.0.1');
  src: url('./fonts/fontawesome-webfont.eot?#iefix&v=4.0.1') format('embedded-opentype'), url('./fonts/fontawesome-webfont.woff?v=4.0.1') format('woff'), url('./fonts/fontawesome-webfont.ttf?v=4.0.1') format('truetype'), url('./fonts/fontawesome-webfont.svg?v=4.0.1#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;

Unlike the example that has only one point in the directory
I gave you an example that loads multiple files, because some browsers don't support all of them.
Think of it as a fallback for browsers that might not support .eot, for example, but support .woff or .ttf.


Best regards :)
Hi all,

You'll also have to configure the mime type for woff files on IIS (otherwise the files aren't served):