Schriften einbinden

[the_Stibä]

Ich habe in meiner Website folgende Schrften:

• Arial
• Gudea
• Meiryo UI
• Bebas Neue

Ich weiss aber nicht ob die auf allen Rechnern installiert sind, die die Website besuchen werden (z.B. Mac's)
Kann ich die irgendwie einbinden?

 

[Darkman]

Du kannst per CSS mit der Eigenschaft "@font-face" Schriften einbinden. Achte aber darauf, dass Du das Recht an der Schrift besitzt bzw. du eine Schrift verwendest, die Du nutzen darfst, ohne sie einkaufen zu müssen. Außerdem solltest Dir die Schrift in mehreren Formaten vorliegen.

Hier ein Beispiel:

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

 

[the_Stibä]

also reicht dann:
@font-face{

font-family: Arial;
font-family: Meiryo UI;
font-family:Gudea;​

}
im css?
und dann immer noch zur aktuellen class
#wrapper{
font-family: "Gudea";
}

 

[scbawik]

Du musst es schon richtig machen …
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

 

[Darkman]

Nein, Du musst für jede Schrift eine eigene Regel definieren:

@font-face {
    font-family: 'MankSans';
    src: url('MankSans.eot');
    src: url('DINWeb.eot?#iefix') format('embedded-opentype'),
        url('MankSans.woff') format('woff'),
        url('MankSans.ttf') format('truetype'),
        url('MankSans.svg#MankSans') format('svg');
}

@font-face {
    font-family: 'Gentium';
    src: url('Gentium.eot');
    src: url('Gentium.eot?#iefix') format('embedded-opentype'),
        url('Gentium.woff') format('woff'),
        url('Gentium.ttf') format('truetype'),
        url('Gentium.svg#MankSans') format('svg');
}

#wrapper {
    font-family: "Gentium";
}

#anderes-div{
    font-family: "MankSans";
}

Du siehst auch direkt, welche Formate ich dir empfehlen würde. Bei kostenlosen Schriften bekommst Du meist nicht alle Formate. Zum Teil ist das problematisch.

Hier findest Du außerdem weitere Informationen: http://www.w3.org/TR/css3-fonts/#font-face-rule