Skip to Content (Press Enter)
UserImage.jpg
João Silva
247Views
5Comments
Font-Web
Question
OutSystems Widgets
How can I integrate web fonts https://fortawesome.github.io/Font-Awesome example?
how to import files and font as the address is in CSS?
0
0
29 Oct 2013
Copy Link
2020-12-07 17-35-54
António Chinita
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: https://screencast.com/t/OPwcTZdlV

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

Eg.
@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;
}

Usage:
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;
}

3
0
29 Oct 2013
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Nice post Chinita,
I think I already saw this before in a past project with you.. :)

Cheers,
GM
0
0
29 Oct 2013
Copy Link
UserImage.jpg
João Silva
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
 url('/fonts/fontawesome-webfont.eot?v=4.0.1');
Capturar.JPG
0
0
29 Oct 2013
Copy Link
2020-12-07 17-35-54
António Chinita
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 :)
1
0
29 Oct 2013
Copy Link
UserImage.jpg
Davide Marquês
Hi all,

You'll also have to configure the mime type for woff files on IIS (otherwise the files aren't served):
https://www.dirigodev.com/blog/404-errors-in-IIS7-for-embedded-woff-font-files/
 
Cheers,
Davide
0
0
30 Oct 2013
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.