2012-12-11 11 views
7

Ich versuche, Google Webfonts open sans mit Bootstrap zu öffnen.Rendern ohne Google Web-Schriftarten mit Bootstrap?

Ich lade die Schriftarten mit:

habe ich eine Website-specific.css dass Lasten nach Bootstrap. Ich habe versucht:

.body { font-family: 'Open Sans', sans-serif;} 

und auch:

.bootstrap-container *,  
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font { 
font-family: 'Open Sans', sans-serif; 
} 

Aber es scheint, dass, egal welche Klasse Wähler ich, die bestimmte Schriftarten nicht und die Bootstrap-Schriftarten werden stattdessen geerbt. Ich bin mir nicht sicher, wie das zu debuggen ist.

+0

Warum passen Sie Bootstrap nicht einfach an? – SLaks

Antwort

4

Verwenden CSS !important

.bootstrap-container *,  
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font { 
font-family: 'Open Sans', sans-serif !important; <-------- Here 
} 
+0

! Wichtig hatte keine Auswirkungen auf die gerenderte Ausgabe. –

9

Sofern Sie nicht die Core-Dateien von Bootstrap verändert haben, würde ich diese leichter auf sich selbst machen und ihre „anpassen“ -Funktion nutzen. Laden Sie es nach dem Platzieren Ihrer Schriftartnamen erneut herunter und ersetzen Sie Ihre vorhandenen Bootstrap-Dateien durch die neuen.

Sie können es hier anpassen:

http://getbootstrap.com/customize/

Dadurch wird zumindest dafür sorgen, dass Sie etwas nicht verpassen ... und bitte, vermeiden !important wie oben (es sei denn, Sie vorgeschlagen wirklich müssen). Hoffe das hilft?

+1

fügen Sie 'Open Sans' einfach in das Feld @sansFontFamily auf der Seite customize ein, bevor Sie es herunterladen, und vergessen Sie nicht, den Link von google webfonts api in den Kopf Ihres Dokuments einzufügen – Pevara

+1

Ich benutze Bootstrap aus dem Bootstrap CDN. Ich werde diese Methode versuchen. Ich verstehe einfach nicht, warum die überschreibenden ererbten Schriftstile so schwierig zu sein scheinen. –

+4

Hat dies für Sie funktioniert? Haben Sie überlegt, eine Antwort als richtig zu akzeptieren? Dies wird anderen in Zukunft mit ähnlichen Problemen helfen. Vielen Dank. –

Verwandte Themen