Font not showing on ipad, but ok on iphone4 and pc

HTML & CSS
1

I am using a specialist font for just one sentence on my website, but like I say above it works fine on pc using firefox, fine using chrome on a iphone4, but it doesnt show up on a ipad mini2 on safari or chrome.

@font-face {
font-family: 'CG Font';
src: url('CgBernhardt-Light.eot');
src: local('☺'), 
url('CgBernhardt-Light.woff') format('woff'), 
url('CgBernhardt-Light.ttf') format('truetype'), 
url('CgBernhardt-Light.svg') format('svg');
}
h2.NT { 
font-family: "CG Font"; font-size:60px;
}

<h2 class="NT">We are Health &amp; Harmony</h2>

And this is where its being developed, its the blue bar towards the bottom of the page, the text appears in there.

Dev site

2

Did you intend to show a URL for the dev site?

3

Sorry ronpat, just added it in

1 Like
4

I do not have any iThings, but someone will be along in a bit who can test for you.

1 Like
5

Are the Woff files missing?

http://www.accend4web.co.uk/fiona2/CgBernhardt-Light.woff

Safari shows a 404 for the woff files.

6

Morning Paul,
No its def there, and I just added the id that I found using a text editor when I opened up the .svg file, so now I got

@font-face {
font-family: 'CG Font';
src: url('CgBernhardt-Light.eot');
src: local('☺'), 
   url('CgBernhardt-Light.woff') format('woff'), 
   url('CgBernhardt-Light.ttf') format('truetype'), 
   url('CgBernhardt-Light.svg#CgBernhardt-Light') format('svg');
}

Strange that there a 404 for that font as the font itself is directly inside the Fiona2 folder, with all the others.

You made me think of the path then, so I put a direct path to it in every url and still noting on the ipad.

@font-face {
 font-family: 'CG Font';
 src: url('http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.eot');
 src: local('☺'), 
   url('http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.woff') format('woff'), 
   url('http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.ttf') format('truetype'), 
   url('http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.svg#CgBernhardt-Light') format('svg');
}

Also took the smiley out, and fine on everything but the ipad2

@font-face {
 font-family: 'CG Font';
 src: url('http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.eot') format('eot'), 
   url('http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.woff') format('woff'), 
   url('http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.ttf') format('truetype'), 
   url('http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.svg#CgBernhardt-Light') format('svg');
   font-weight: normal;
font-style: normal;
}
7

It doesn’t seem to be here:

http://www.accend4web.co.uk/fiona2/CgBernhardt-Light.woff

If you click that link it should download just like this one will:

http://www.accend4web.co.uk/Fiona2/CgBernhardt-Light.ttf

8

This is very strange then -

http://puu.sh/puDL3/e77d8c9bde.png

I have highlighted it above

9

I get this in Chrome for that link.

917×324 16.9 KB

I;m also getting a load of 404s in Chrome.

939×345 45.9 KB

Maybe try repackaging the font files at font-squirrel as something may have got corrupted.

13

Problem resolved Paul, thanks for the support.

Think its the woff2 file that does the trick, but uploaded the whole lot from font squirrel as below, and fixed it.

@font-face {
font-family: 'cgbernhardtmedium';
src: url('cgbernhardt-light-webfont.eot');
src: url('cgbernhardt-light-webfont.eot?#iefix') format('embedded-opentype'),
     url('cgbernhardt-light-webfont.woff2') format('woff2'),
     url('cgbernhardt-light-webfont.woff') format('woff'),
     url('cgbernhardt-light-webfont.ttf') format('truetype'),
     url('cgbernhardt-light-webfont.svg#cgbernhardtmedium') format('svg');
font-weight: normal;
font-style: normal;
}
h2.NT { 
font-family: 'cgbernhardtmedium'; font-size:60px;
}
14

Glad we got there :slight_smile:

Fontface problems are always a pain to track down as there’s so much that can go wrong.

15

Thanks Paul as ever, your great…

I also tracked down those other 404’s and cleared those up.

Onwards and upwards

16

multichild, may I ask which version of Dreamweaver you are using?

17

Hi ronpat, its CS5.5

1 Like
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.