CSS og stylesheet: integrere fonter

[EyeLid]

Da er det bare å krype til korset, i håp om at noen andre sitter med kunnskapen jeg trenger for å løse problemet mitt. Jeg sitter og ønsker å revidere litt på hjemmesiden min, og forsøker meg frem med litt font-definisjoner for hva som skal løpe som standard på hjemmesiden. Dvs, jeg ønsker å kjøre definisjonene i en sentral CSS stylesheet sak. På egen maskin ser jo dette helt kurrant ut, men for alle andre kommer ikke fontvalgene med. Ikke så unaturlig, da fontene kanskje ikke er de mest typiske, og er derfor lastet opp som .ttf og .svg filer på hjemmesiden for å være tilgjengelige for de besøkende.

Testsiden min hvor dette skal inntreffe er denne.
Og slik er meningen at det skal fremkomme (bilde fra min maskin).



Innenfor head-brakettene av HTML-kodingen på denne siden ligger følgende:

<link rel="stylesheet" type="text/css" href="http://ableitet.no/layout/cssstyle/stylesheet.css" />

Stylesheet fila har følgende koding:

@font-face {
font-family: 'Permanent Marker';
src: URL('http://www.ableitet.no/layout/fonts/permanentmarker.ttf') format ('ttf'),
URL('http://www.ableitet.no/layout/fonts/permanentmarker.svg#PermanentMarker') format ('svg');}

@font-face {
font-family: 'Levenim MT';
src: URL('http://www.ableitet.no/layout/fonts/levenimmt.ttf') format ('ttf'),
URL('http://www.ableitet.no/layout/fonts/levenimmt.svg#LevenimMT') format ('svg');}

h1 {
font-family: "Permanent Marker", Verdana, generic;
font-size:32px;
margin-left:20px;margin-right:10px;margin-top:10px;}

p {
font-family: "Levenim MT"; Verdana, generic;
font-size:16px;
margin-left:20px;margin-right:10px;margin-top:10px;}

.SVG filene er enkodet online på en eller annen converter jeg fant i farten (ikke Font Squirrel). Og for hva jeg ser, så virker det fornuftig nok. For å få slikt til å fungere, forstår jeg det er kritisk at verdien funnet i font id fra .SVG filene tas med etter # i URL-angivelsen man gjør i stylesheet'en. Jeg har ingen større formening omkring font-family navnet, men har nå sørget for at det også stemmer overens i alle referansene (alle disse er i fet skrift over).

<font id="PermanentMarker" horiz-adv-x="773" >
<font-face font-family="Permanent Marker"

<font id="LevenimMT" horiz-adv-x="1175" >
<font-face font-family="Levenim MT"

Først av alt er det en bekymring om at iOS plattformene ikke klarer true type som har gjort at jeg har kikket nøyere på dette. Dette stemmer svært godt med hva jeg har sett av testing med iPad og iPhone. Men så spurte jeg noen andre om å ta en kikk, og de bekreftet at selv på Chrome kom ikke fontene med - så min nettbaserte fontlagring ser ikke ut til å slå inn overhodet for andre brukere.



Har kikket gjentatte ganger på oppsettet nå, og forstår ikke hvorfor det ikke skal la seg gjøre med kodingen over. Det jeg hvertfall må slå fast er at det er en eller annen feil ift å holde fontene eksternt, og ikke pga type plattform den besøkende har - noe som kan virke fornuftig med tanke på alle søketreffene jeg finner om at iOS 4.2 og nyere skal støtte vanlig true type bruk.

 

 

Så er veldig happy for alle innspill som kan avklare denne saken.

[Gjest Slettet+1523]

Jeg ville nok avgjort brukt denne for å konvertere filer og generere CSS:

http://www.fontsquirrel.com/tools/webfont-generator

 

WOFF er vel det mest universelt støttede webfontformatet, og når du bare har TTF og SVG blir det nok problemer, ja.

[EyeLid]

Men selv om iOS produktene går glipp av mitt oppsett slik det er her, burde vel fortsatt TTF (som er i stor grad i bruk på alle Windows maskiner) vært synlig for andre plattformer - altså, er det noe spesielt feil med oppsettet over som sådan?