Embedden van font lukt niet in IE11

[ByteMe_]

Ik heb een font welke ik graag in een navigatie menu wil gebruiken. Hij bestaat helaas niet in het GoogleFonts overzicht, anders had ik voor het gemak die import url wel gebruikt.

Ik gebruik deze CSS code:

Cascading Stylesheet:

@font-face {
  font-family: 'name';
  src:  url('../segoesc.woff') format('woff'),
  src:  url('../segoesc.ttf') format('truetype');
;
}

.bla{
  font-family: 'name';
}

In Firefox werkt het font prima als ik enkel de regel van TTF erin zet. Zet ik de woff regel erboven (zoals voorrbeeld), werkt het niet meer. In IE11 werkt het sowieso niet. Bij de enkele regel van de TTF kreeg ik een beveiligingsfoutmelding, maar als de .woff toevoeg of als enkele regel instel, werkt dat niet en ik krijg ook geen foutmelding. De fonts staan in dezelfde map.

Ik heb ook al de .htaccess aangepast met

Header set Access-Control-Allow-Origin "*"

Ik heb de eot/woff2 files niet van het font anders kon ik dat ook proberen. Wat kan ik nog meer doen?

[ Voor 1% gewijzigd door RobIII op 09-10-2015 09:56 . Reden: Code tags toegevoegd ]

[RobIII]

Worden de fonts met de juiste Content-Type geserveerd?
(Als je code post, gebruik dan code tags a.u.b.)

[ Voor 47% gewijzigd door RobIII op 09-10-2015 09:56 ]

[ByteMe_]

offtopic:
Ik kan mijn post in dit topic helemaal niet aanpassen, constant "waiting for got", reboot FF helpt niet, alle andere topics werken wel?

ik heb nu charset iso-8859-1, volgens mij is deze redelijk ruim qua characters toch?

Die ; in mijn TS op regel 5 is dus hier toegevoegd, niet in de CSS, de SRC op regel4 klopt ook niet.

[ Voor 18% gewijzigd door ByteMe_ op 09-10-2015 10:30 ]

[ByteMe_]

Ik heb gelijkwaardige opensource fonts gedownload in 4 formats die wel allemaal werken in diverse browsers, probleem opgelost

[RobIII]

RonaldDesigns schreef op vrijdag 09 oktober 2015 @ 10:02:
ik heb nu charset iso-8859-1, volgens mij is deze redelijk ruim qua characters toch?

Charset != Content-type (Hoewel de charset wel bij de content-type wordt gespecificeerd vaak; Content-Type: text/html; charset=utf-8 bijvoorbeeld; in dit geval ging/gaat het me om de content type(s) van de fonts die iets als application/font-woff en application/x-font-ttf zouden moeten zijn of iets in die richting).

[ Voor 41% gewijzigd door RobIII op 09-10-2015 11:18 ]

[ByteMe_]

Ah, die had ik ook toegevoegd in .htaccess:

AddType application/x-font-ttf .ttf
AddType application/font-woff .woff

Maar een complete set woff/ttf/eot/svg is duidelijk de beste oplossing

[NNF]

Wellicht was er iets mis met je WOFF-bestand, want op zich heb je aan WOFF tegenwoordig ruim voldoende. Werkt in alle moderne browsers. Alleen IE < 9 en Android < 4.4 kunnen er niet mee overweg.

[ByteMe_]

Ik heb nu verschrikkelijk last van FOUT in IE11. Ik heb nu font-face bovenaan mijn css staan, en dat css file wordt nu tijdelijk als enige script geladen onder de html tag, rest heb ik uitgezet. Maar het helpt niets, het blijft standaardfont->embedded font switch bij de pageload.

De woff is 80kb dus ook niet bepaald groot. Het is een handwritten font dus er is ook niets wat ik als fallback kan gebruiken Ik las wel iets van heavy caching, maar hoe werkt dat bij fonts?

[R4gnax]

RonaldDesigns schreef op dinsdag 13 oktober 2015 @ 21:44:
Ik heb nu verschrikkelijk last van FOUT in IE11. Ik heb nu font-face bovenaan mijn css staan, en dat css file wordt nu tijdelijk als enige script geladen onder de html tag, rest heb ik uitgezet. Maar het helpt niets, het blijft standaardfont->embedded font switch bij de pageload.

De woff is 80kb dus ook niet bepaald groot. Het is een handwritten font dus er is ook niets wat ik als fallback kan gebruiken Ik las wel iets van heavy caching, maar hoe werkt dat bij fonts?

Flash Of Unstyled Text (FOUT) is nog altijd beter dan Flash Of Invisible Text (FOIT).
Ennuh; 80KB voor slechts één face van een font family is aanzienlijk groot.

[ByteMe_]

Ik vind het wisselen irriterend en onacceptabel, terwijl het in andere browsers perfect werkt. Dan mag het de webkit zijn die de website anders laadt, maar toch moet het op een of andere manier op te lossen zijn.

Ik dacht aan:

- Sifr (maar .swf dus niet ideaal en kan geblokkeerd zijn)
- Photoshop slices (erg achterhaald en kost veel kb's door de plaatjes en wil je dus wat pagina's extra toe voegen via het cms of benaming aanpassen dan moet je elke keer gaan slicen, nee bedankt)
- Extra vergelijkbaar font van Google inladen als fallback, maar dat geeft een double FOUT, nog vervelender dus.

Het .WOFF bestand is 39kb trouwens, de TTF 80kb, de .EOT 36kb en de .SVG 305kb. Die woff lijkt mij dan niet te groot met enkel 40 kb. Ik had ook al geknipper met plaatjes in IE11 welke ik heb opgelost door het laten cachen dmv onzichtbare images in een div. Niet ideaal, maar liever een rustig ogende website dan constant geflikker. Helaas werkt die truc niet met mijn font.

[bonzen]

Ik heb goede ervaringen met de generator op http://www.fontsquirrel.com/tools/webfont-generator
Die maakt ook direct compatibel code voor de meeste browsers, ook de oudere.

Wanneer dat niet voor jouw werkt dan zou je kunnen overwegen om sprites in te zetten. Dit kan met een javascriptje die iedere letter voor je je vervangt. Maar je kunt dit ook in puur CSS laten gaan natuurlijk.

Heel lang geleden ban ik ooit eens van SIFR naar Cufon overgestapt (in de tijd dat embedding helemaal not doen was). Theoretisch zou je daar ook een eind mee kunnen komen lijkt mij.

[ByteMe_]

^ Ik had die generator al gevonden, maar bedankt voor het idee.

Ik maak nu gebruik van Adobe Typekit, welke perfect werkt in IE, alleen Chrome heeft een hele korte FOUT, maar te kort om wat te zien.