Seite 1 von 1
[gelöst] Wie Web-Font einbinden?
Verfasst: Di 1. Nov 2011, 09:23
von Freda
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
Re: Wie Web-Font einbinden?
Verfasst: Di 1. Nov 2011, 11:16
von xmurrix
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
Re: Wie Web-Font einbinden?
Verfasst: Di 1. Nov 2011, 11:48
von Freda
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;
}
Re: Wie Web-Font einbinden?
Verfasst: Di 1. Nov 2011, 12:53
von xmurrix
Es sollte ausreichen, wenn du die Schriftart mit der font-family Eigenschaft in entsprechenden Selektoren zuweist.
Re: Wie Web-Font einbinden?
Verfasst: Di 1. Nov 2011, 13:43
von Freda
danke - klappt!
