Thread: Non-Web fonts gebruiken
-
27-07-2011, 16:08 #1Member
- Registered
- 03/06/06
- Posts
- 510
- iTrader
- 0
- Mentioned
- 0 Post(s)
Non-Web fonts gebruiken
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?no votes
-
-
27-07-2011, 16:13 #2Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
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.no votes
-
27-07-2011, 17:14 #3Member
- Registered
- 03/06/06
- Posts
- 510
- iTrader
- 0
- Mentioned
- 0 Post(s)
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?no votes
-
27-07-2011, 17:15 #4Approved 9-lifer
- Registered
- 10/10/03
- Location
- Gent
- Posts
- 5,535
- iTrader
- 25 (96%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/20
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:
Daarna gebruik je dat dan bv. als volgt: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; }
Hier vind je meer informatie over font-face: http://www.css3.info/preview/web-fonts-with-font-face/Code:font-family: 'Merge', Helvetica, sansserif;
Als ik dit niet heb ben ik geen approved 9-lifer.no votes
-
27-07-2011, 17:19 #5Member
- Registered
- 27/04/03
- Location
- -Grimbergen-
- Posts
- 3,785
- iTrader
- 5 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/21
Het jammere aan cufon is dat het toch een merkbare delay veroorzaakt en de pageloads aanzienlijk verhoogt...
underdogdesign vernieuwt...zichzelf! ONTDEK HET ZELF!
webdesign | mediadesign | reclame | grafisch ontwerp | alle drukwerk | partnership | hardware | hosting | ...no votes
-
27-07-2011, 21:05 #6Member
- Registered
- 17/07/02
- Location
- Sol System
- Posts
- 10,064
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 27/78
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).
PSN: dJeezBE - Delicious bookmarks
Disclaimer: I am currently suffering from severe CSD (Compulsive Sarcasm Disorder). - L'onion fait la farce - Facile largire de alienoPastafarian by choiceno votes
-
27-07-2011, 21:10 #7
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.no votes
-
27-07-2011, 21:40 #8Approved 9liver
- Registered
- 29/10/03
- Location
- Izegem
- Posts
- 4,748
- iTrader
- 25 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 6/9
Download uw font (in verschillende formaten, .woff, .eot, etc...) die Zero Grav gaf, FOnt Squirrel en gebruik als css dit:
Met natuurlijk de url naar uw fontCode:@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; }
Waarom gebruiken ze een smiley in src: local('☺')?
Het antwoord:
http://stackoverflow.com/questions/3...src-local-meanThe 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.no votes
-
28-07-2011, 01:10 #9
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.
My fight towards financial independence: Fight to FI/REno votes
-
28-07-2011, 10:24 #10no votes
-
30-07-2011, 21:42 #11Member
- Registered
- 03/06/06
- Posts
- 510
- iTrader
- 0
- Mentioned
- 0 Post(s)
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 & Chromeno votes
-
30-07-2011, 21:53 #12Member
- Registered
- 03/06/06
- Posts
- 510
- iTrader
- 0
- Mentioned
- 0 Post(s)
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?no votes
-
01-08-2011, 00:27 #13Member
- Registered
- 03/06/06
- Posts
- 510
- iTrader
- 0
- Mentioned
- 0 Post(s)
Het lag er hem blijkbaar aan dat IE andere CSS klasses voorrang gaf ivm Chrome & Firefox
no votes

