lettertypes veranderen

Je menu heeft als font(-family) Helvetica Neue”,Helvetica,Arial,sans-serif. Dit heeft iedereen wel standaard in huis. Een exotischere font kun je koppelen op verschillende manieren. Je kunt bijvoorbeeld van je gedownloaded font een fontface’kit’ maken. De gegenereerde bestanden in je theme opnemen, en in je css er naar verwijzen, zie hier hoe. Dit werkt voor alle moderne browsers (maar niet voor IE8 en eerder).
groet,
Lianne

Niet zo snel opgeven! Ik pak even een voorbeeld uit mijn portfolio: een website waar het lettertype Hang board 123 regular is toegepast voor het logo.

Maak in je theme een nieuwe map aan, noem die fonts. Zet hierin alle bestanden, althans de .eot, .woff, .ttf en .svg-bestanden die je met de kit-generator hebt gemaakt. Ga naar het bestand styles.css.
Neem daar meteen bovenaan op:

@font-face {
    font-family: 'hang_board_123regular';
    src: url('./fonts/hang_board_123-webfont.eot');
    src: url('./fonts/hang_board_123-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/hang_board_123-webfont.woff') format('woff'),
         url('./fonts/hang_board_123-webfont.ttf') format('truetype'),
         url('./fonts/hang_board_123-webfont.svg#hang_board_123regular') format('svg');
}

Deze code staat in het meegeleverde demo-html-bestand in de fontface-kit.

Vervang hangboard_123regular door jouw fontnaam, en de benaming van de bestanden. Vervolgens laat je in je styles.css weten dat je dit lettertype van toepassing wilt verklaren voor het menu. Het menu zit in de div #access. Vanaf regel 554 wordt e.e.a. voor #access gedeclareerd. Voeg hier een verwijzing naar de font-family aan toe.

#access {
......
font-family: 'hang_board_123regular';
}

Vervolgens zoek je uit welk font-size passend is (dat verschilt nogal per font-family)
Dan wordt het verhaal:

#access {
......
font-family: 'hang_board_123regular';
font-size: XXpx;
}

Succes!

Lianne

Hoi Tim,

Goed dat je even zegt dat je serieus shithead als font hebt aangetroffen. Best wel een grappig font!

In je fontsmap hoeven alleen maar de eot, woff, ttf en svg bestanden te staan.

De code uit het stylesheet van de kit moet je inderdaad overbrengen naar de styles.css van je theme, maar wel met een wijziging in de src – je moet laten weten dat deze zich in de fonts-map bevindt. ./fonts/ betekent: ga 1 niveau omlaag en daarna naar de map fonts/specifiek bestand.

@font-face {
font-family: 'shitheadmedium';
src: url('./fonts/shithead.eot');
src: url('./fonts/shithead.eot?#iefix') format('embedded-opentype'),
url('./fonts/shithead.woff') format('woff'),
url('./fonts/shithead.ttf') format('truetype'),
url('./fonts/shithead.svg#shitheadmedium') format('svg');
font-weight: normal;
font-style: normal;
}

En vergeet daarna niet voor #access te verklaren dat daarvoor deze font-family moet worden gebruikt!

groet,
Lianne

Hoi Tim,

Hdet is goed gebruik om met een childtheme te werken. Daarin zet je alle wijzigingen t.o.v. het originele theme. Het minste wat een childtheme moet hebben is een style.css. Daarin zet je niet het volledige style.css van je parent-theme, maar uitsluitend de wijzigingen daarop. Maar let op: je moet wel een import-regel naar je parent style.css opnemen.

Importregels moeten altijd bovenin je style-sheet staan.

/*
Theme Name:     naam-childtheme
Description:    optioneel
Author URI:	optioneel
Author:         optioneel
Template:       parent-theme-naam
Version:	optioneel

*/

@import url("../parent-theme-naam/style.css");

@font-face {
font-family: 'shitheadmedium';
src: url('./fonts/shithead.eot');
src: url('./fonts/shithead.eot?#iefix') format('embedded-opentype'),
url('./fonts/shithead.woff') format('woff'),
url('./fonts/shithead.ttf') format('truetype'),
url('./fonts/shithead.svg#shitheadmedium') format('svg');
font-weight: normal;
font-style: normal;
}

Finishing touch goed begrepen. Je menu staat in de div met id access. Je moet de font-family van toepassing verklaren voor deze div. (dus ik bedoel: bedoeld voor)

Dit betekent dus dat je in de style.css van je childtheme moet opnemen:

#access {
font-family: 'shitheadmedium';
font-size: XXpx;
}

Voor XX moet je de gewenste font-size invullen, bijvoorbeeld 20px.

Met deze code overschrijf je de font-family uit het parent-theme.

groet,
Lianne

Je waarneming dat de css van het parent-theme niet doorkomt, klopt. Want de importregel voor de css van het parent-theme in je child-theme klopt niet. Die hoort te zijn:

@import url("../twentyeleven/style.css");

Verder hoort eerst via @font-face je font-family worden gedefinieerd, voordat je hem voor een element kunt aanroepen. Dus de declaraties voor #access moeten pas na de @font-face worden opgenomen.

/*
    Theme Name: twentyeleven child
    Version: .0.07
    author: Tim
    Description: A basic starter child theme for twentyeleven

    Template: twentyeleven

    */

    @import url("../parent-twentyeleven/style.css");

    @font-face {
    font-family: 'shitheadmedium';
    src: url('./fonts/shithead.eot');
    src: url('./fonts/shithead.eot?#iefix') format('embedded-opentype'),
    url('./fonts/shithead.woff') format('woff'),
    url('./fonts/shithead.ttf') format('truetype'),
    url('./fonts/shithead.svg#shitheadmedium') format('svg');
    font-weight: normal;
    font-style: normal;
    }

#access {
    font-family: 'shitheadmedium';
    font-size: 20px;
    }

Laatste vraag: klopt de map-naam van je child-theme met de naam die je noemt in het style.css, namelijk ’twentyeleven child’ Ik maak nooit een childtheme naam aan met een spatie er in, wellicht zit daar het probleem.

Heel erg kortom:
Je vraagstelling is an sich vrij eenvoudig, deze conversatie kost nu best veel tijd. Bij blijvende problemen omtrent dit vraagstuk, contact me even via http://www.mooifunctioneel.nl

groet,
Lianne