Archief - Non-Web fonts gebruiken

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
J

Jeroen07

Legacy Member
Graag zou ik voor sommige sites enkele non-web fonts gebruiken maar op welke manier doe je dit het best?

Op bv. de website van deredactie.be wordt het font "'DINMedium" gebruikt. Als je dat in je CSS echter invult bij font-family dan zal dit niet werken. Maar hoe integreer je dergelijke fonts het beste in je website? En zijn zo'n fonts door iedereen goed te zien?
Z

Zero Grav

Legacy Member
Door middel van @font-face css3, zo wordt het bij deredactie gedaan.
Font Squirrel | Create Your Own @font-face Kits

Is niet altijd door iedereen even goed te zien, vooral niet in oudere browsers. Maar indien het niet werkt worden gewoon de volgende fonts in de font-family ingeladen, dus niet echt een probleem.
J

Jeroen07

Legacy Member
Ik heb daar nu zo'n kit gedownload, en heb effectief een html bestand met dat font in, maar hoe krijg ik dat nu op een vlotte manier naar mijn site?

Wat moet ik naar de css van mijn site kopieren?
s

scipicore

Legacy Member
Wat je eventueel zou kunnen doen indien je het font enkel voor titels oid gebruikt is ze te cufonizen.

Meer info: cufón - fonts for the people

*edit*

Een voorbeeld van css voor een webfont:
Code: 
@font-face {
	font-family: 'Merge';
	src: url('merge-webfont.eot');
	src: local('?'), url('merge-webfont.woff') format('woff'), url('merge-webfont.ttf') format('truetype'), url('merge-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

Daarna gebruik je dat dan bv. als volgt:
Code: 
font-family: 'Merge', Helvetica, sansserif;

Hier vind je meer informatie over font-face: http://www.css3.info/preview/web-fonts-with-font-face/
U

UnD3RD0G

Legacy Member
Het jammere aan cufon is dat het toch een merkbare delay veroorzaakt en de pageloads aanzienlijk verhoogt... :(
d

dJeez

Legacy Member
Typekit is ook een optie, de gratis versie ervan is wel beperkt (en enkel geschikt voor persoonlijke sites)... Pricing valt echter wel mee voor commerciëel gebruik. Het voordeel bij Typekit is dat je zeker bent dat je juridisch in orde bent (je mag nl. niet zomaar - aangekochte - fonts gaan bewerken en downloadbaar op je site zetten, check dus eerst de gebruiksrechten die op het font rusten alvorens Font Squirrel ed meer te gebruiken).
H

Huxley

Legacy Member
Jeroen07 zei:
Ik heb daar nu zo'n kit gedownload, en heb effectief een html bestand met dat font in, maar hoe krijg ik dat nu op een vlotte manier naar mijn site?

Wat moet ik naar de css van mijn site kopieren?
Klik om te vergroten...

Ge hebt enkel de stylesheet.css en alle font files nodig. De inhoud van de css kopieert ge naar uw css file of hernoemt ge bv. naar fonts.css. Fonts kopieren naar een make 'fonts'.
Ahja, en zorgen dat het pad in u fonts.css klopt.
G

GregoryCo

Legacy Member
Download uw font (in verschillende formaten, .woff, .eot, etc...) die Zero Grav gaf, FOnt Squirrel en gebruik als css dit:
Code: 
@font-face{
		font-family: 'UwFontNaam';
		src: url('../fonts/bebasneue-webfont.eot');
		src: local('☺'),
		url('../fonts/bebasneue-webfont.woff')
		format('woff'),
		url('../fonts/BebasNeue.otf')
		format('opentype'),
		url('../fonts/bebasneue-webfont.ttf')
		format('truetype'),
		url('../fonts/bebasneue-webfont.svg#webfontCWGy5Apf')
		format('svg');
		font-weight: normal;
		font-style: normal;
	}
Met natuurlijk de url naar uw font

Waarom gebruiken ze een smiley in src: local('☺')?

Het antwoord:
The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.

There are a few reasons why smiley is a better solution:

Webkit+Font Management software can mess up local references, like turning glyphs into A blocks.

On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() font that's accessible outside of Library/Fonts. More detail on my bulletproof post. Font Explorer X is also known to mess up other stuff in Firefox.

Although it's unlikely, you could reference a local() font which is completely different than what you think it is. (Typophile post on different fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the font download.
Klik om te vergroten...
http://stackoverflow.com/questions/3698319/css-font-face-what-does-src-local-mean
c

coldvinc

Legacy Member
Nou, ik kan alleen maar het bovenstaande herhalen, gebruik het zelf ook voor een aantal sites, 't grappige is trouwens dat @font-face al lang in IE zit vanaf versie 6 denk ik.
a

adrianhates

Legacy Member
UnD3RD0G zei:
Het jammere aan cufon is dat het toch een merkbare delay veroorzaakt en de pageloads aanzienlijk verhoogt... :(
Klik om te vergroten...

Dat hebt ge met font-face ook.. Ge maakt eigelijk altijd een opoffering.
J

Jeroen07

Legacy Member
Die font face werkt goed, en in Firefox en Chrome wordt dat goed weergegeven, maar in IE is dit toch merkbaar anders...

Valt hier iets aan te doen? Het is toch wel iets lelijker dan in Firefox & Chrome
J

Jeroen07

Legacy Member
Probleem is dat in Internet Explorer het font in kwestie altijd in bold wordt weergegeven...

en als ik in de css @font-face: font-weight: bold instel, dan krijg je in chrome & firefox een niet bold font, in IE blijft het hetzelfde... Waarom is dit omgekeerd?
J

Jeroen07

Legacy Member
Het lag er hem blijkbaar aan dat IE andere CSS klasses voorrang gaf ivm Chrome & Firefox
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan