[gelöst] Wie Web-Font einbinden?

Freda · Beitrag von **Freda** » Di 1. Nov 2011, 09:23

Guten Morgen.

Ich möchte einen Web-Font einbinden. Sicher geht es ganz einfach...
Kann mir bitte jmd. einen Tipp geben, wo ich den Code einbinde?

Mal als Beispiel eine x-beliebige Schrift.
Da steht dann: Add this code to your website.
<link href='http://fonts.googleapis.com/css?family= ... ,400italic' rel='stylesheet' type='text/css'>

Als Anleitung steht da:
Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.

Aber welches HTML document ist es bei Contenido? (Bzw. hat jmd. ein Beispiel?)

Vielen Dank!
Freda

Beitrag von **xmurrix** » Di 1. Nov 2011, 11:16

Hallo Freda,

am einfachsten ist es, wenn du die Styles direkt in deine CSS-Datei einfügst.
Gib dazu die URL http://fonts.googleapis.com/css?family= ... ,400italic in die Adresszeile des Browsers ein und kopiere die ausgegebenen CSS-Angaben in deine CSS-Datei.

Kannst auch die Zeile

Code: Alles auswählen

<link href='http://fonts.googleapis.com/css?family=Marvel:400,400italic' rel='stylesheet' type='text/css'>

im Layout gleich als erstes Element im head-Tag angeben, z. B.

Code: Alles auswählen

...
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Marvel:400,400italic' rel='stylesheet' type='text/css'>
        ...

Besser ist die erste Variante, weil dann das zusätzliche Einbinden der CSS-Datei aus fonts.googleapis.com entfällt.

Gruß
xmurrix

Freda · Beitrag von **Freda** » Di 1. Nov 2011, 11:48

Hallo xmurrix

Danke, das ist ja klasse!
Ich möchte den Font allerdings nur für die Headlines h1 und h2 haben. Es ist nicht richtig, ich weiss, siehst Du den Fehler?
Sicher sind die Klammern falsch?

Code: Alles auswählen

/* ###################################################### */
/* ####################### MAIN CONTENT ################# */
/* ###################################################### */
#content {
    font-size:12px;
    color:#333;
    line-height:19px;
}
#content h1, #content h2 {
    margin:0 0 10px 0;
    padding:0;
    font-size:20px;
    font-weight:bold;
    color:#FF0000;
    @font-face {
  font-family: 'Gochi Hand';
  font-style: normal;
  font-weight: 400;
  src: local('Gochi Hand'), local('GochiHand-Regular'), url('http://themes.googleusercontent.com/static/fonts/gochihand/v2/ZZzTGmufF-Wq8IS3fkpBu8DdSZkkecOE1hvV7ZHvhyU.ttf') format('truetype');
}
}
#content h1 {
    line-height:22px;
}

Beitrag von **xmurrix** » Di 1. Nov 2011, 12:53

Es sollte ausreichen, wenn du die Schriftart mit der font-family Eigenschaft in entsprechenden Selektoren zuweist.

Code: Alles auswählen

#content h1, #content h2 {font-family:'Marvel'}

Freda · Beitrag von **Freda** » Di 1. Nov 2011, 13:43

danke - klappt!

CONTENIDO Forum

[gelöst] Wie Web-Font einbinden?

[gelöst] Wie Web-Font einbinden?

Re: Wie Web-Font einbinden?

Re: Wie Web-Font einbinden?

Re: Wie Web-Font einbinden?

Re: Wie Web-Font einbinden?