Webfont Does Not Apear Without Www

webfont does not apear without www

If redirecting all the non-WWW requests to WWW is an option you could do this:

RewriteCond %{HTTP_HOST} ^hugeone\.co\.uk$ [NC]
RewriteRule ^ http://www.hugeone.co.uk%{REQUEST_URI} [R=301,L]

Add that right below:

RewriteEngine On
# optional you might not have the below in your file.
RewriteBase /

In your .htaccess file.

An alternative to the above would be to enable CORS using your .htaccess for webfonts it would be like this:

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

As a side note its better if your don't use both WWW and non-WWW as Google for instance doesn't like seeing both.

Webfont not appearing without www

It seems that you have a problem with your Cross-Origin Resource Sharing Policy.

Try to add this to your .htaccess file:

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

You can find more information in this answer on question How to add an Access-Control-Allow-Origin header.

WebFont won't show

As i was using 2 fonts i forgot to use two seperate @font-face { once i separated them, worked like a charm

Webfont not showing in iOS

Please take a look at this link:

Iconfont / webfont not showing in iPhone safari browser

The problem is that iOS provides partial support for font-feature-settings CSS property but you can use ligatures in iOS
Safari adding text-rendering: optimizeLegibility. The following link
(http://clagnut.com/sandbox/opentype/ligatures) shows a text using the
font Magenta with Common & Discretionary Ligatures ON and other text
with Common & Discretionary Ligatures OFF. If you access this link
from an iOS device you will see that both texts are equal. This means
that iOS does not support ligatures only with font-feature-settings
and that is why the gyphs in your typography do not work on iOS. To
make it work in iOS, you'll have to add text-rendering:
optimizeLegibility to your CSS. A good reference may be "Tomorrow’s
web type today: The fine flourish of the ligature". But, you should
read "Is it safe to use the CSS rule “text-rendering:
optimizelegibility;” on all text?".

 text-rendering: optimizeLegibility;

@font-face not working

Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

Firefox: locally hosted webfont not shown - even with Access-Control-Allow-Origin *

The problem is solved, it was caused by the scoped parameter that I had on my stylesheet tag. Apparently browsers have different implementations of scoped stylesheets which in Firefox caused the font face to not load the files at all

---

Related Topics