@Font-Face

[nancy]

hei,
jeg har brukt denne tutorialen Using @Font-Face » Dearagony.org ,men ser at ik dt funker i firefox?? stemmer dette??

 

[TorsteinO]

Enten står det noe feil, eller det er noe som mangler i tutorialen, eller du gjør noe feil, for @font-face funker flott i firefox, jeg bruker det hele tiden

 

[nancy]

funker fint når jg ser siden i google chrome...

 

[agrimsrud]

Hvor henter du fontfilene fra da? Relativ sti eller absolutt url?
Kanskje dette kan svare på noe: https://www.webforumet.no/forum/webutvikling/11592-font-face-fungerer-ikke-i-firefox.html#post105722

 

[TorsteinO]

husker ikke om det er forskjellige varianter for chrome og firefox nå i farta, men det er en del forskjellige filtyper som kreves for de forskjellige nettleserne, så om du laster ned kit'et fra f.ex. fontsquirrel, så må du passe på å sette korrekt sti på hver enkelt fil.

 

[agrimsrud]

husker ikke om det er forskjellige varianter for chrome og firefox nå i farta, men det er en del forskjellige filtyper som kreves for de forskjellige nettleserne

Stemmer vel det. Tar jeg ikke feil bruker Chrome "vanlig" TTF eller OTF, Firefox bruker vel .woff når dette er tilgjengelig.

 

[nancy]

har hentet noen fra dafont.com

 

[nancy]

dette har jeg i css filen min

@font-face {

font-family: 'AndrogyneRegular';

src: url('http://nancy-solend.com/fonts/androgyne_tb-webfont.eot');

src: url('http://nancy-solend.com/fonts/androgyne_tb-webfont.eot?#iefix')
format('embedded-opentype'),

url('http://nancy-solend.com/fonts/androgyne_tb-webfont.woff') format('woff'),

url('http://nancy-solend.com/fonts/androgyne_tb-webfont.ttf') format('truetype'),

url('http://nancy-solend.com/fonts/androgyne_tb-webfont.svg#AndrogyneRegular')
format('svg');

font-weight: normal;

font-style: normal;


}

 

[Bjørnar]

bruk relativ sti til fontene, og ikke over http så skal du se at det løser seg!

altså /fonts/fontnavn.ttf og ikke http://nancy-solend.com/fonts/fontnavn.ttf

 

[nancy]

bruk relativ sti til fontene, og ikke over http så skal du se at det løser seg!

altså /fonts/fontnavn.ttf og ikke http://nancy-solend.com/fonts/fontnavn.ttf

takk

 

[TorsteinO]

full sti skal da ikke være noe problem?

 

[agrimsrud]

FF blokkerer fontfiler som hentes fra ekstern server

 

[nancy]

bruk relativ sti til fontene, og ikke over http så skal du se at det løser seg!

altså /fonts/fontnavn.ttf og ikke http://nancy-solend.com/fonts/fontnavn.ttf

funket når jg fulgte Bjørnar sitt råd

 

[TorsteinO]

FF blokkerer fontfiler som hentes fra ekstern server

Full sti trenger jo ikke å bety ekstern server, men da kan det jo faktisk se ut til at den regner full sti som = ekstern server, er jo kjekt å ha i bakhodet

Hmmm... men det funker da med googles webfonts-tjeneste i firefox? Jeg har vel egentlig aldri brukt noe av googles bibliotek til dette, har alltid laget egne pakker som jeg har hatt på serveren, men... såvidt jeg forstår funker det da med google webfonts, og det er jo så definitivt eksternt, noen som vet hvordan de løser det der?

 

[agrimsrud]

Bra problemet er løst, Nancy! Men plager meg å ikke vite hvorfor ting skjer, så jeg gjorde litt research...

Konklusjon:
FF støtter både å hente fontfiler med relativ og absolutt url på lokal server i Firefox.

Men FF vil blokkere fontfiler som hentes fra ekstern server eller et annet subdomene. Her vil det lett oppstå problemer på kryss og tvers av www - regner med dette var problemet for trådstarter i utgangspunktet?!

Tipper FF blokkerer disse for å forhindre at folk stjeler båndbredde og bruker fonter de ikke har rettigheter til å bruke.

Men dersom du har tilgang til serveren (eller subdomenet) hvor filene ligger, kan du åpne for at andre kan hente filene. Legg til dette i .htaccess der fontfilene ligger:

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

Eventuelt om du kun ønsker at spesifikke domener skal ha tilgang til dine fontfiler:

<FilesMatch "\.(eot|otf|svg|ttf|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin http://annensub.mittdomene.com http://annetdomene.com http://osv.osv
  </IfModule>
</FilesMatch>

Tenkte jeg skulle dele hva jeg kom frem til, håper det kan komme til hjelp for noen