Endre font i wordpress template

[Dag Frogner]

Jeg trodde dette skulle være enkleste sak av verden, men der tok jeg feil gitt. Vil endre font på h1, h2, h3 osv osv.

I designet jeg bruker finner jeg dette i style.css:

h1, h2, h3, h4, h5, h6  { margin: 0; color: #fff; font-weight:normal; }
h1  {font-size: 22px; } h2  {font-size: 22px;} h3  {font-size: 18px;} h4  {font-size: 16px;} h5  {font-size: 14px;} h6  {font-size: 12px;}

Jeg tenkte derfor at jeg kunne putte inn font-family utenfor h1 på linje nr to, (og plassere dette i custom.css) men det fungerer dårlig. Når jeg bruker firebug og endrer fonten alle steder hvor jeg finner h1, h2 osv, skjer det fortsatt ikke noe.

Hva gjør jeg galt?

 

[peterandrej]

Hva er adressen til siden?

 

[Dag Frogner]

www.flashbanner.no/beta

Merk deg at jeg kun har jobbet med den i to dager, (da uten å ha vært borti wp før) så det gjenstår en del arbeid før den er ferdig.

Det er teksten som f.eks "Velkommen til vår nettside!" jeg vil forandre.

 

[peterandrej]

Hvis det er overskriftene du er ute etter så finner du disse på linje 204 i style.css.
Det er klassene .featured.feat-blog og .feat-title h2 du er ute etter å endre.

 

[Dag Frogner]

Takk.

Får enkelt endret til f.eks Verdana eller Tahoma, men jeg vil bruke Museo eller Museo300 som er hele navnet på varianten jeg vil bruke.

Men dette fungerer dårlig, noen tips på det også?

 

[Knut]

Huske på at du, eller andre, ikke ser andre fonter enn de som er installert på maskina man bruker.

 

[Dag Frogner]

Ja, det vet jeg. Men har sett flere nettsider som bruker "Museo700" og denne vises her, selvom jeg ikke har denne på pcen. Hvordan forklares det?

 

[peterandrej]

Ja, det vet jeg. Men har sett flere nettsider som bruker "Museo700" og denne vises her, selvom jeg ikke har denne på pcen. Hvordan forklares det?

Avhenger av mange ting, stort sett teknikk og nettleser. FF og andre moderne nettlesere støtter å hente inn eksterne fonter fra f.eks Google, mens IE ikke støtter dette. Derfor vil du kunne få en custom font i FF, selv om du ikke har den på maskinen.

Dersom du bruker en slik font, så husk å angi en websikker alternativ font for de som sitter med litt eldre utstyr.

 

[Dag Frogner]

Ja, det kommer jeg uansett til å gjøre. Har du forslag til løsning på problemet med at jeg ikke får fonten til å vises paj?

Fungerer hverken i Opera, FF eller Chrome.

 

[TorsteinO]

Det funker da fint å hente inn eksterne fonter i IE også, mye rart kan sies om IE, men @font-face har faktisk vært støttet der siden IE4, derimot så må man bruke et bestemt format - EOT.

Du må selvsagt også laste opp de aktuelle fontfilene tilgjengelige på serveren, og importere dem i stilarket, i tilfelle du ikke var klar over det.

jeg pleier å bruke fontsquirrel.com til å generere alt av nødvendige fontfiler og css'en som importerer fontene

 

[Dag Frogner]

Det med at fonten må ligge på serveren osv, visste jeg ikke om.

Takk for info.

 

[peterandrej]

Det funker da fint å hente inn eksterne fonter i IE også, mye rart kan sies om IE, men @font-face har faktisk vært støttet der siden IE4, derimot så må man bruke et bestemt format - EOT.

Aha. Der lærte jeg noe nytt! Takker. Dette må jeg sjekke ut.

 

[TorsteinO]

Ah, jo, den må ligge på serveren, så pass på at pathen blir rett. Evt finnes det også en del forskjellige tjenester der du laster fra eksterne kilder, men det samme gjelder der også.

paj - bare hyggelig, fontsquirrel ordner alle nødvendige formater, og fiks ferdig css, bare å tilpasse pathen for wp.

 

[Dag Frogner]

Et par hint her atomet?

Har brukt nettsiden din og fått laget denne "pakken" med alle filene. Skal dette i "root" alt sammen også skal det fungere, eller må det mer til?

Slik ser "stylesheet.css" ut:

@font-face {
	font-family: 'Museo300';
	src: url('http://www.flashbanner.no/beta/font/museo300-regular-webfont.eot');
	src: local('☺'), url('http://www.flashbanner.no/beta/font/museo300-regular-webfont.woff') format('woff'), url('http://www.flashbanner.no/beta/font/museo300-regular-webfont.ttf') format('truetype'), url('http://www.flashbanner.no/beta/font/museo300-regular-webfont.svg#webfontRreod9Kl') format('svg');
	font-weight: normal;
	font-style: normal;
}

Har lagt alle filene i mappen "font" på serveren.

Hva mer må gjøres nå? Jeg prøver nå å sette font på h2 til Museo300, men ser ingen endring.

 

[TorsteinO]

Hm, skal vi se... Hvor har du lagt "font"-mappa? Jeg klarte ikke å finne noe når jeg fulgte den urlen du brukte der? altså flashbanner.no/beta/fonts/, og ikke flashbanner.no/fonts/ heller?

Når jeg bruker wordpress pleier jeg å legge mappa med fontene i mappa til themet, da blir pathen f.ex.

url('fonts/museo300-regular-webfont.woff')

Så, hos deg vil det da si noe sånt som dette:

@font-face {
	font-family: 'Museo300';
	src: url('font/museo300-regular-webfont.eot');
	src: local('☺'), url('font/museo300-regular-webfont.woff') format('woff'), url('font/museo300-regular-webfont.ttf') format('truetype'), url('font/museo300-regular-webfont.svg#webfontRreod9Kl') format('svg');
	font-weight: normal;
	font-style: normal;
}

(men se over at jeg har fått retta opp alle stedene der, har ikke fått meg en kaffekopp enda...)

Deretter må du kopiere over @font-face-infoen i stilarket ditt, bare lim det inn helt øverst (det viktigste er vel strengt tatt bare at det gjøres FØR man prøver å bruke de aktuelle fontene, men jeg pleier ihvertfall alltid å gjøre det aller først). Hvis fontene da ligger i rett mappe, som her vil være "wp-content/themes/themenavn/fonts/", så skal det nå funke å bruke "font-family: Museo300" i stilarket