Vælg en hvilken som helst skrifttype til din hjemmeside

VN:F [1.9.22_1171]
Kan du lide denne artikel? Stem her:
Rating: 3.0/5 (2 votes cast)

Har du nogensinde tænkt over hvorfor du kun i CSS kan kan bruge relativt få skrifttyper? Det er jo lidt mærkeligt når der findes så mange forskellige skrifttyper i f.eks. Photoshop.

Fortvivl ikke. Det er faktisk muligt, og det er ikke så besværligt endda. Jeg havde brug for det til et TYPO3 CMS projekt, som jeg har bikset med de seneste par uger.

Faktisk er det ret simpelt, hvis det ikke lige havde været for de forskellige typer af browsere. Den diskution vil nok aldrig nogen ende tage, men igen er det Internet Explorer der skal være på tværs.

I hvert fald skal du lave det lidt anderledes til Internet Explorer end du skal til de andre browsere som Firefox, Safari, Crome osv. Og da det jo er vigtigt at din hjemmeside virker i flere browsere, så skal du tilgodese alle de mest benyttede af slagsen.

Sådan sætter du en anden skrifttype ind på din hjemmeside

Det første du skal gøre er at downloade den ønskede skrifttype i ttf format. Nogen kan du finde gratis og andre skal du måske betale for.

Det næste du skal gøre er at finde en eot fil også, som skal bruges til Internet Explorer browseren. Hvis du ikke kan finde den kan du selv lave den ved hjælp af denne hjemmeside. Upload din ttf fil og den vil blive konverteret til en eot skriftype, som kan bruges i Internet Explorer.

Til Internet Explorer skal du bruge:

@font-face {
   font-family: "OfficinaSerif";
   src: url("/fonte/OfficinaSerifStd-Book.eot"); /* EOT file for IE */
}

Til alle andre browsere skal du bruge:

@font-face {
   font-family: "OfficinaSerif";
   src: url("/fonte/OfficinaSerifStd-Book.ttf"); /* TTF file for CSS3 browsers */
}

Det er muligvis nødt til at have 2 CSS stylesheets, for hvis du har begge ovenstående koder som anvist i samme CSS fil vil det ikke virke. Så du skal på en eller anden måde kun vise den øverste til IE brugere og den anden til alle andre browser brugere.

Brug den herefter hvor du vil på følgende måde:

body {
   font-family: "OfficinaSerif", verdana, helvetica, sans-serif;
}

“OfficinaSerif” er altså hvad du kalder din skrifttype i inkluderingen af den i din CSS fil. Og det navn kan du henvise til igen og igen når du bruger font-family, som vist ovenfor.

Håber du kunne bruge det. Det var alt fra mig i denne omgang. :-)

VN:F [1.9.22_1171]
Kan du lide denne artikel? Stem her:
Rating: 3.0/5 (2 votes cast)
Vælg en hvilken som helst skrifttype til din hjemmeside, 3.0 out of 5 based on 2 ratings

26 tanker om "Vælg en hvilken som helst skrifttype til din hjemmeside"

  1. For at vise den ene stump til IE brugere, er det vel bare at lave en “conditional comment” Altså If IE..

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  2. Hej Jacob.

    Det er sikkert en mulighed. Jeg bruger aldrig contitional comments, så det har jeg ikke testet. :-)

    VN:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  3. Pingback: Tweets that mention Indsæt skrifttype på hjemmeside. Tilføj en skrifttype med CSS. -- Topsy.com

  4. Udover at det blev lidt for teknisk til mig, så er det lige den slags jeg har ledt efter. Jeg har gentagne gange undret mig over, at det ikke var muligt at vise en hvilken som helst skrifttype på en hjemmeside (som tekst og ikke billede). Men jeg forstår det som at ovenstående gør det muligt

    Tak, nu skal jeg bare finde nogen der kan lave det for mig :)
    Mikael

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  5. Hej Mikael.

    Jep. Ovenstående er som tekst. Ikke billeder.

    Er ked af du finder det for teknisk. Hvad sidder du med af spørgsmål?

    Det der måske kan være svært er at finde skrifttypen. Altså selve ttf filen. Resten er ikke så galt.

    Jeg skal gerne forsøge at hjælpe dig videre, hvis du har et projekt du gerne vil have en speciel skrifttype kørende på.

    VN:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  6. Hej Henrik,

    Det er pænt af dig. Det projekt jeg har lige nu er for lagt i processen til at jeg vil begynde at rode med det, men jeg har gemt dette indlæg som en favorit så jeg kan vende tilbage til det når næste projekt skal sættes i søen. Til den tid vil jeg meget gerne have lov til at trække på din hjælp hvis det bliver nødvendigt.

    Grunden til at jeg finder det “teknisk” er, at jeg aldrig koder selv. Jeg kan kun en lille bitte smule html og css (hvilket er min egen skyld da jeg ikke har fået læst og brugt de bøger jeg ellers havde købt til formålet) :)

    mvh
    Mikael

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  7. Kom til at tænke på en anden ting..

    Hvis det er en skrifttype man har købt rettighederne til, så kan enhver vel downloade skrifttypen via CSS’en og dermed krænke rettighederne?

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  8. @mikael

    Helt ok. Du siger bare til når det bliver aktuelt i dit næste projekt. :-)

    VN:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  9. @jacob

    Der må jeg være dig et svar skyldigt, men rigtig godt spørgsmål.

    Måske er der andre der kan svare på det?

    VN:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  10. Pingback: Valgfri skrifttype og font til hjemmeside

  11. Hej Henrik,

    Fin artikel – Som Jakob ganske rigtigt siger, så er der nogle problemer i forhold til licenserne, til de typografier man køber, eftersom alle og enhver i princippet kan downloade font-filerne.

    Så der skal man lige sikre sig at de fonte man køber også tillader at de benyttes på web.

    Ellers findes der services som typekit.com og fontdeck.com, hvor man betaler X antal kroner pr. år, for at kunne benytte bestemte fonte. Lige pt. er der flest fonte tilgængelig på typekit.com, men det ser ud til at fontdeck.com tilbyder den nemmeste metode til at benytte fontene. Det er nemlig bare ren og skær CSS, hvorimod typekit.com benytter nogle javascripts som kan blive ret tunge.

    Håber det kan bruges :-)

    /Jan

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  12. Hej Jan

    Mange tak for din kommentar. Så kan jeg godt se at der til de fonte man køber kommer noget mere bøvl.

    Kan du sige noget om hvor stort udvalget af de gratis fonte er i forhold til dem der skal betales for? :-)

    VN:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  13. Hej Henrik

    Gratis fonte er der ingen problemer med så vidt jeg ved, de skulle være i orden at bruge, da de jo typisk er udgivet under en meget liberal licens som f.eks. MIT.

    Håber det kan bruges? :)

    /Jan

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  14. CSS’en kan implementeres i et stylesheet vha. “format” tippet:


    @font-face {
    font-family: "OfficinaSerif";
    /* IE: */
    src: url("/fonte/OfficinaSerifStd-Book.eot") format("embedded-opentype");
    /* En lokal installeret font */
    src: local("OfficinaSerif"),
    /*Safari, Firefox, Chrome og Opera (>= 10) */
    url("/fonte/OfficinaSerifStd-Book.ttf") format("opentype"),
    }

    Se de øvrige CSS3 format strenge hos w3.org.

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  15. Spændende læsning Tommy.

    Jeg tror dog ikke at det er en løsning der erstatter alt andet foreløbigt, da der vil være mange der benytter Internet Explorer 7 og 8 flere år endnu. :-)

    Men det er dejligt at der sker noget på området. Og lad os så håbe at det er nemt at arbejde med for os udviklere.

    VN:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  16. Som i rigtig nok siger, er der store problemer med at benytte en hvilken som helst font. Du må f.eks. ikke lægge Officina til download her på siden, som du har gjort;) Det er en købefont til flere tusind kroner, så du skal nok overveje kraftigt at fjerne download linket;)

    http://www.fontsquirrel.com/ kan du downloade kits til @font-face-teknikken, som er det du forklarer i dit indlæg. De er alle gratis at bruge.

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  17. Hej Malene

    Mange tak for din kommentar. Jeg har nu fjernet skrifttypen fra mit webhotel og dermed også download linket.

    Jeg tror jeg brugte 5 minutter på at finde skrifttypen på nettet, og synes ikke der stod noget om at den kostede penge, men jeg kan sagtens have overset noget.

    Jeg savner i den grad let tilgængelige informationer om hvad jeg må og ikke må, med hensyn til skrifttyper. Og om hvordan må bruge de skrifttyper, der koster penge, på en hjemmeside.

    Har du nogle gode links Malene? Eller er der nogle af jer andre der har?

    VN:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  18. Pingback: Choose any font for your website | Web developer & geek blog

  19. Hej, endelig er der nogen der tager dette emne op til diskussion – tak for det

    Når jeg indsætter nedenstående kode så virker det i firefox og google crome. Men ikke i internet explorer?

    @font-face {
    font-family: “viking-n-webfont”;
    /* IE: */
    src: url(“../fonte/viking-n-webfont.eot”) format(“embedded-opentype”);
    /*Safari, Firefox, Chrome og Opera (>= 10) */
    src: url(“../fonte/viking-n-webfont.ttf”) format(“opentype”);
    }

    Iøvrigt kender I googles forsøg på at komme uden om problemet?

    http://code.google.com/webfonts

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  20. …Og til de der er interesserede, så findes der hver dag i december en ny gratis font på http://adfont-calendar.com/, som er fontdeck.com’s julekalender.

    Der er godt nok ikke så længe til juleaften og man kan kun hente dagens font i 24 timer, men der da stadig mulighed for at få fat i 5-6 stykker og afprøve fontdecks service gratis på den måde.

    /Jan

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  21. Hej Lennart

    Jeg er ganske grøn på dette område med fonte, så jeg kan ikke lige hurtigt gennemskue hvorfor det ikke virker hos dig.

    Måske er Jans svar løsningen. :-)

    /Henrik

    VN:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)
  22. Ganske snedigt og helt sikkert smart mht at vælge andre skrifttyper. Bare folk ikke vælger at for mange af de gyselige og ulæselige skrifttyper der er derude. Det er nogen gange rart nok at font ikke skifter alt fra meget fra normen :)

    VA:F [1.9.22_1171]
    God kommentar? Stem her:
    Rating: 0.0/5 (0 votes cast)

Skriv et svar

Din e-mailadresse vil ikke blive offentliggjort. Krævede felter er markeret med *