CSS @font-face

[scootergrisen]

Jeg er lige begyndt at bruge CSS @font-face til at bruge en font der
hedder "open sans" p� http://netkoder.dk/

Det ser ud til at virke i de forskellige browsere men der er et problem
i Firefox f�rste gang man bes�ger siden s� kan man ikke se at der st�r
"Forsiden" eller "Her finder du info om HTML...".
Ligesom om fonten ikke blev indl�st.
Men s� n�r man genindl�ser siden s� kan teskten ses.

Ogs� er det lidt vildt at man skal indl�se en font for almindelig tekst
ogs� endnu en font for bold tekst og endnu en for italic ogs� endnu en
for bold og italic sammen.
Ogs� er der ogs� light og extrabold.
S� hvis man skal have alle sammen med er der 8 forskellige variatoren af
fonten.
Er der en bedre m�de at g�re det p� eller er det bare s�dan man skal g�re ?
T�nkte at det ville jo v�re smart hvis man bare skulle indl�se �n font
med alle variater som bold og italic osv.

[runeof...@hotmail.com]

On 26 Apr., 18:01, scootergrisen <NEJ...@TILSPAM.DK> wrote:
> Jeg er lige begyndt at bruge CSS @font-face til at bruge en font der

> hedder "open sans" påhttp://netkoder.dk/

>
> Det ser ud til at virke i de forskellige browsere men der er et problem

> i Firefox første gang man besøger siden så kan man ikke se at der står

> "Forsiden" eller "Her finder du info om HTML...".

> Ligesom om fonten ikke blev indlæst.
> Men så når man genindlæser siden så kan teskten ses.

Det virker første gang for mig i nyeste FF på Linux.

Har du rettet problemet?

Ellers kan det være fordi fonten allerede er installeret på mit
system.

Hvis jeg sammenligner med Netrenderers IE10-visning, er fonten
nøjagtigt den samme, som jeg får i Firefox.


MVH
Rune Jensen

[scootergrisen]

> Det virker f�rste gang for mig i nyeste FF p� Linux.
>
> Har du rettet problemet?

Jeg har ikke �ndret noget.
Det ikke hver gang den g�r det men for eksempel hvis man rydder cachen
og lukker browseren og bes�ger siden s� kan den g�re det f�rste gang
(nogen gange).
Ligesom om at fonten ikke bliver indl�st ogs� kan man ikke se teksten.
Men det skulle jo gerne v�re s�dan at teksten bare blev vist alligevel
bare med en anden font.
Normalt hvis jeg ser det p� andre hjemmesider man bes�ger s� kan teksten
ses med det samme ogs� g�r det 1 sekund s� skifter fonten til den
rigtige font.

Men kan v�re der bare er et problem med den Firefox version/ops�tning
jeg har.

[runeof...@hotmail.com]

On 27 Apr., 00:37, scootergrisen <NEJ...@TILSPAM.DK> wrote:

> Men kan v re der bare er et problem med den Firefox version/ops tning
> jeg har.

Hvis du vil teste alternativ metode til at indlæse fonte kan du prøve:
https://developers.google.com/fonts/

Men selvfølgelig skal det virke med @font-face også, hvis browseren
understøtter det.

Jeg kan prøve at teste din side i morgen med tom cashe, hvis det er.


MVH
Rune Jensen

[scootergrisen]

> Hvis du vil teste alternativ metode til at indl�se fonte kan du pr�ve:
> https://developers.google.com/fonts/

Det er det samme som jeg bruger nu.

[Karl Erik Christensen]

Har du husket det tilh�rende stylesheet?

<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=open sans" />

I mit f�rste bes�g manglede i hvert fald "V" i Velkommen.

Karl Erik.

--
http://dmwebdesign.dk/karlerik/

[runeof...@hotmail.com]

On 27 Apr., 01:21, scootergrisen <NEJ...@TILSPAM.DK> wrote:
> > Hvis du vil teste alternativ metode til at indlæse fonte kan du prøve:

> >https://developers.google.com/fonts/
>
> Det er det samme som jeg bruger nu.

OK, nu fandt jeg det i din kode. Jeg troede bare, dev skulle hentes
fra Google.

Men du har rigtignok en kæmpe liste af @font-face... Bruger du det
efter Googles forklaring? For så ville jeg nok overveje alternativ,
ja, med så meget ekstra kode.

Kan du ikke bare lave én enkelt @font-face helt øverst i dokumentet?
Er der noget, som skal ligge i bestemt rækkefølge?


MVH
Rune Jensen

[Karl Erik Christensen]

Den 27-04-2013 01:44, Karl Erik Christensen skrev:
> Har du husket det tilh�rende stylesheet?
>
> <link rel="stylesheet" type="text/css"
> href="http://fonts.googleapis.com/css?family=open sans" />
>
> I mit f�rste bes�g manglede i hvert fald "V" i Velkommen.
>
> Karl Erik.

Og s� skal du ogs� have en fall-back type.

[scootergrisen]

> Men du har rigtignok en k�mpe liste af @font-face... Bruger du det
> efter Googles forklaring?

Det har ikke noget med google og g�re det jeg bruger men da de bruger
ogs� @font-face.

> Kan du ikke bare lave �n enkelt @font-face helt �verst i dokumentet?
> Er der noget, som skal ligge i bestemt r�kkef�lge?

Efter hvad jeg kan forst� s� skal man have en @font-face per variant.

Alts� en til bold.
En til italic.
En til almindeligt.
En til bold+italic.

Jeg ved ikke om man kan n�jes med 1 @font-face.

[scootergrisen]

> Har du husket det tilh�rende stylesheet?
>
> <link rel="stylesheet" type="text/css"
> href="http://fonts.googleapis.com/css?family=open sans" />

Jeg bruger ikke google til det.
Jeg har fontene p� webhotellet.

> I mit f�rste bes�g manglede i hvert fald "V" i Velkommen.

Ja det lidt m�rkeligt.
V'et er med bold ogs� er der �benbart noget som g�r galt i Firefox.

> Og s� skal du ogs� have en fall-back type.

Hvordan skulle jeg lave det ?

[Rune Jensen]

On 27 Apr., 02:18, scootergrisen <NEJ...@TILSPAM.DK> wrote:
> > Men du har rigtignok en kæmpe liste af @font-face... Bruger du det
> > efter Googles forklaring?
>
> Det har ikke noget med google og gøre det jeg bruger men da de bruger
> også @font-face.
>
> > Kan du ikke bare lave én enkelt @font-face helt øverst i dokumentet?
> > Er der noget, som skal ligge i bestemt rækkefølge?
>
> Efter hvad jeg kan forstå så skal man have en @font-face per variant.
>
> Altså en til bold.

> En til italic.
> En til almindeligt.
> En til bold+italic.

OK.

Prøv at lave en helt blank side, hvor der kun er teksten i HtMLen og
din @font-face (bare én til at starte med) og så CSS-deklarationen i
font-family.

Det er meget nemmere at debugge end når det ligger på selve siden med
en masse andet kode.

Du har lige pt. mange flere @font-face end de fire, der så skulle være
nødvendige. Jeg talte i hvert fald 10 af dem, med deklarationer for
både true type og alt muligt andet. Det burde slet ikke være
nødvendigt med al den kode, når det er den samme font.

Jeg siger ikke, du gør det forkert, men det lyder som uendeligt
besværligt med så mange deklarationer, og APIet skulle netop være
bygget til at være nemt at bruge og fylde meget lidt.


MVH
Rune Jensen

[Karl Erik Christensen]

Den 27-04-2013 02:22, scootergrisen skrev:
> Jeg bruger ikke google til det.
> Jeg har fontene p� webhotellet.

Men det er jo ikke webhotellet der skal "se" siden - vel?

Skrifttypen skal overf�res til g�stens computer.

Google g�r det med det viste stylesheet.
Hvordan du vil g�re, m� du finde ud af.

[scootergrisen]

> Pr�v at lave en helt blank side, hvor der kun er teksten i HtMLen og
> din @font-face (bare �n til at starte med) og s� CSS-deklarationen i
> font-family.

Har lavet en demo side her :
http://netkoder.dk/netkoder/eksempler/eksempel0077.html
Jeg kan ikke lige f� den til at g�re det samme der men man kan da se at
fontene hentes lidt efter lidt da hver linie vises lidt efter lidt f�rst
gang man bes�ger siden.
S� Firefox viser �benbart ikke nogen tekst f�r fonten er valgt s� det m�
vel v�re fordi jeg skal v�lge en fallback font eller s�dan noget der
vises n�r open sans fonten ikke er tilg�ngelig.

> Du har lige pt. mange flere @font-face end de fire, der s� skulle v�re
> n�dvendige. Jeg talte i hvert fald 10 af dem, med deklarationer for
> b�de true type og alt muligt andet. Det burde slet ikke v�re
> n�dvendigt med al den kode, n�r det er den samme font.

Nej det t�nker jeg ogs� at bold og italic osv vel burde kunne v�re i
samme fontfil.
Fonten er hentet her : http://www.fontsquirrel.com/fonts/open-sans

> Jeg siger ikke, du g�r det forkert, men det lyder som uendeligt
> besv�rligt med s� mange deklarationer, og APIet skulle netop v�re
> bygget til at v�re nemt at bruge og fylde meget lidt.

Hvis du henter fonten hos google s� n�r du nogenlunde det samme :
http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic

Borset fra der er kun woff formatet.
Jeg har diverse andre formater med for at det skal virke p� mange
forskellige platforme/enheder.

[scootergrisen]

> Men det er jo ikke webhotellet der skal "se" siden - vel?

Nej men jeg �nsker at have fonten p� mit webhotel. Ikke at hente fonten
fra google.

[scootergrisen]

Nu har jeg testet at .eot og .ttf filerne bliver sendt med standard MIME
type text/plain.

Nu har jeg sat MIME typerne s�dan her :

AddType application/vnd.ms-fontobject .eot
AddType application/font-woff .woff
AddType application/octet-stream .ttf
AddType application/octet-stream .otf

Men det kunne tyde p� der endnu ikke er valgt nogen MIME type til nogen
af typerne...

Her fra mozilla : "Note: Because there are no defined MIME types for
TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type
of the file specified is not considered."

[Karl Erik Christensen]

Hvor fonten kommer fra, kan for s� vidt v�re ligegyldigt.
Men metoden er sikkert meget ens.

Google overf�rer woff filen til g�sten.

[Rune Jensen]

On 27 Apr., 15:42, scootergrisen <NEJ...@TILSPAM.DK> wrote:
> > Prøv at lave en helt blank side, hvor der kun er teksten i HtMLen og
> > din @font-face (bare én til at starte med) og så CSS-deklarationen i

> > font-family.
>
> Har lavet en demo side her :http://netkoder.dk/netkoder/eksempler/eksempel0077.html

Jeg får dem alle i første hug i Firefox, så det er svært for mig at
sige noget om, hvis du ikke gør.

Iflg. Google lider Firefox af "flash of unstyled content", hvilket så
vidt jeg kan forstå vil sige, fonten bliver ikke ændret før til sidst
i forløbet, og det kan jeg så godt se, det går bare hurtigt.

Så du skulle faktisk se først en tekst med fallback-fonten eller en
anden standard font, denæst bliver dine valgte fonte lagt på.

Altså i to renderinger/optegninger af siden - men det bør alligevel
ske første gang, du loader siden. Den bug burde ikke gøre, du er nødt
til at hente siden to gange, for at få vist din font.


MVH
Rune Jensen

[Rune Jensen]

On 27 Apr., 15:42, scootergrisen <NEJ...@TILSPAM.DK> wrote:

> Har lavet en demo side her :http://netkoder.dk/netkoder/eksempler/eksempel0077.html

> Jeg kan ikke lige få den til at gøre det samme der men man kan da se at
> fontene hentes lidt efter lidt da hver linie vises lidt efter lidt først
> gang man besøger siden.
> Så Firefox viser åbenbart ikke nogen tekst før fonten er valgt så det må
> vel være fordi jeg skal vælge en fallback font eller sådan noget der
> vises når open sans fonten ikke er tilgængelig.

OK, måske jeg ikke fik læst dit indlæg ordentligt.

Hvis jeg ellers har forstået dig korrekt, så får du din font ved
første load, men at den først bliver lagt på til sidst.

Det svarer til det jeg får, og hvad Google beskriver som "flash of
unstyled content".

Hvordan man undgår det ved jeg ikke, men jo en fallback font af en
art, måske.


MVH
Rune Jensen

[scootergrisen]

>> Har lavet en demo side her :http://netkoder.dk/netkoder/eksempler/eksempel0077.html
>

> Jeg f�r dem alle i f�rste hug i Firefox, s� det er sv�rt for mig at
> sige noget om, hvis du ikke g�r.

Ja men hvis du rydder cachen og genstarter browseren s� kan du vel ogs�
se at n�r du bes�ger siden igen s� det f�rste sekund eller to der vises
linierne en efter en efterh�nden som de indl�ses.

> Iflg. Google lider Firefox af "flash of unstyled content", hvilket s�
> vidt jeg kan forst� vil sige, fonten bliver ikke �ndret f�r til sidst
> i forl�bet, og det kan jeg s� godt se, det g�r bare hurtigt.

S� du kan se at teksten med med en anden font til at starte med ogs�
lidt efter skifter fonten ?

> S� du skulle faktisk se f�rst en tekst med fallback-fonten eller en
> anden standard font, den�st bliver dine valgte fonte lagt p�.

Ja det har jeg ogs� set p� mange andre hjemmesider men af en eller anden
grund er der ikke nogen fallback font p� min side.

> Alts� i to renderinger/optegninger af siden - men det b�r alligevel
> ske f�rste gang, du loader siden. Den bug burde ikke g�re, du er n�dt
> til at hente siden to gange, for at f� vist din font.

Nej og det er jo en rimelig alvorlig fejl at teksten bliver usynlig.

[Rune Jensen]

On 27 Apr., 19:11, scootergrisen <NEJ...@TILSPAM.DK> wrote:

> Nej og det er jo en rimelig alvorlig fejl at teksten bliver usynlig.

Jeg kan ikke helt lige gennemskue hvorfor.

Men prøv denne:
https://www.google.dk/search?q=flash+of+unstyled+content+firefox+%40font-face&tbo=1&hl=da&gbv=1&prmdo=1&ie=UTF-8&prmd=ivns&tbas=0&source=lnt&sa=X&ei=2gl8UcvRMsnusgbx54DoDA&ved=0CBQQpwUoAA


MVH
Rune Jensen

[scootergrisen]

> Jeg kan ikke helt lige gennemskue hvorfor.
>

> Men pr�v denne:
> https://www.google.dk/search?q=flash+of+unstyled+content+firefox+%40font-face&tbo=1&hl=da&gbv=1&prmdo=1&ie=UTF-8&prmd=ivns&tbas=0&source=lnt&sa=X&ei=2gl8UcvRMsnusgbx54DoDA&ved=0CBQQpwUoAA

Jeg kan l�se der er noget med at teksten ikke viser i 3 sekunder i
Firefox s� der er tid til at hente fonten. Det kan v�re det er det som
sket nogen gange hos mig hvis det tager over 3 sekunder at henten fonten
ogs� er det jo s� meningen at browseren skal vise med fallback fonten
men det g�r den s� ikke i nogen sj�ldne tilf�lde.

Men det jo sv�rt at fejlfinde n�r fejlen ikke er det s� tit. Nu kan jeg
ikke f� den til at g�re det mere.
Syntes kun jeg har �ndret MIME typen men kan da godt v�re det hjalp.

[scootergrisen]

Nu gjorde Firefox det igen hvor den ikke viste den bold tekst.
S� ventede jeg lidt tid og der skete ikke noget men s� lige s� snart jeg
gik ind i inspekt�r i Firefox s� kom fonten.