Embedding Fonts?

[murali_balreddy2]

How can I embed additional fonts using CSS @font-face rule?

Thanks.

[murali_balreddy2 · Accepted solution]

Found solution to my own problem.

Cause: IE and Design Studio failed loading fonts due to the cross-domain access policy.

Solution: In the web server that serves the font, have a Apache .htaccess file (in case of Apache host) in the same folder as the fonts being served.

Contents of the file needs to be

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

When having the fonts along with the CSS file, the Design Studio localhost was not looking at the same location as the CSS for fonts. When fonts were hosted elsewhere and referenced in the CSS file, it worked perfectly.

Source: http://stackoverflow.com/questions/5065362/ie9-blocks-download-of-cross-origin-web-font

Thanks.

[jeroenvandera · Accepted solution]

wow, good find.

[rama_shankar3 · Accepted solution]

Good - thanks for sharing!

Rama

[jeroenvandera]

Hi muraly,

in the w3schools they provide this information

http://www.w3schools.com/css3/css3_fonts.asp

They first create the fontfamily with this line

@font-face

{

font-family: myFirstFont;

src: url(sansation_light.woff);

}

and then in a css class you can insert this line

font-family:myFirstFont;

You have to try out though if this is supportes in the custom css upload file.

kind regards,

Jeroen

they explain how you can refer to an url for the source font of a font family

[murali_balreddy2]

Yes. That is what I tried. It does not work within the Studio and IE but with Chrome and Safari it works, if the fonts are hosted externally and referenced in the custom CSS. Storing locally along with CSS file did not work.

Generated web pages are different for the browsers and works differently.

[jeroenvandera]

Hm,

have to try that out myself. Did you mean you made an design studio app with the font family and it works in chrome/safari but not IE?