1. #1

    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  

  2. #2
    Zero Grav's Avatar
    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  

  3. #3

    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  

  4. #4
    scipicore's Avatar
    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:
    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/
    Als ik dit niet heb ben ik geen approved 9-lifer.
    no votes  

  5. #5
    UnD3RD0G's Avatar
    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  

  6. #6
    dJeez's Avatar
    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 alieno
    Pastafarian by choice
    no votes  

  7. #7
    Huxley's Avatar
    Registered
    21/01/10
    Location
    Gent
    Posts
    3,535
    iTrader
    0
    Mentioned
    0 Post(s)
    Quote Originally Posted by Jeroen07 View Post
    This quote is hidden because you are ignoring this member. Show
    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?
    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  

  8. #8
    GregoryCo's Avatar
    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:
    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.
    http://stackoverflow.com/questions/3...src-local-mean
    no votes  

  9. #9
    coldvinc's Avatar
    Registered
    25/06/05
    Location
    9000feet dwn
    Posts
    3,611
    iTrader
    2 (100%)
    Mentioned
    0 Post(s)
    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/RE
    no votes  

  10. #10
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    Quote Originally Posted by UnD3RD0G View Post
    This quote is hidden because you are ignoring this member. Show
    Het jammere aan cufon is dat het toch een merkbare delay veroorzaakt en de pageloads aanzienlijk verhoogt...
    Dat hebt ge met font-face ook.. Ge maakt eigelijk altijd een opoffering.
    no votes  

  11. #11

    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 & Chrome
    no votes  

  12. #12

    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  

  13. #13

    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in