Google Roboto font lelijk in Mozilla Firefox
Ik ben bezig met een menu en dit lukt me best wel goed.
Het gaat om de Roboto font van Google.
Alleen:
- In Google Chrome is de font mooi en smooth.
- Maar in Mozilla Firefox is de font super lelijk, niet smooth en je ziet meer van de letter-spacing..
Weet iemand hoe dit komt en hoe ik het beter kan maken?
Want door dit heb ik ook iets minder ruimte aan de andere kant van mijn balk. (is niet te zien heb de foto's kleiner gemaakt)
Alvast bedankt :)
Chrome:
Mozilla:
• Controleer in de developer tools van Mozilla of überhaupt wel Roboto wordt gebruikt. Door een strenge same-origin policy kan het laden van fonts en CSS van andere domeinen worden geblokkeerd.
• Heb je Roboto onder Windows of iOS geïnstalleerd? Verwijder die versie dan eens, zodat de webfont wordt gebruikt. (Niet aan te bevelen bij Android, want Roboto is het systeemlettertype.)
• Download de versie van Font Squirrel en gebruik die in plaats van de Google-webfont.
• Voorkom naamconflicten door in @font-face een andere naam dan Roboto te declareren.
• Nee, Roboto staat niet op mijn laptop geïnstalleerd.
• Bedankt voor de link heb nu alle lettertypen omgetoverd naar die van Fonts Squirrel.
Maar ik zie geen verschil :(
• Nee, dit is niet van toepassing.
Gewijzigd op 18/05/2015 09:55:46 door Marthijn Buijs
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@font-face {
font-family: 'Roboto';
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Light'),
local('OpenSans-Light'),
url('./fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Oxygen';
src: local('Oxygen'),
local('Oxygen-Regular'),
url('./fonts/Oxygen/Oxygen-Regular.otf') format('opentype');
}
font-family: 'Roboto';
src: local('Roboto'),
local('Roboto-Regular'),
url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Open Sans';
src: local('Open Sans Light'),
local('OpenSans-Light'),
url('./fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Oxygen';
src: local('Oxygen'),
local('Oxygen-Regular'),
url('./fonts/Oxygen/Oxygen-Regular.otf') format('opentype');
}
En het pad naar de font klopt.
Gewijzigd op 18/05/2015 11:41:15 door Marthijn Buijs
Elke browser doet dit anders.
http://stackoverflow.com/questions/17864742/how-to-apply-font-anti-alias-effects-in-css
Watch your @font-face font-weight
Overigens zie ik ergens bij de link die je stuurde dat font-smoothing niet meer ondersteund word.
Ik denk dat wat Ozzie PHP zei het beste is.
Dus ik moet het maar accepteren, maar daar krijg ik al minder moeite mee als ik op een aantal plekken zie dat Chrome het meeste gebruikt word.
Toevoeging op 18/05/2015 12:04:51:
Eerlijk gezegd vind ik dat 'vals vet' wel mooi eigenlijk.
Maar ik denk zelf ook wel dat het met de renderwijze te maken heeft, en dat we hier eigenlijk niks aan kunnen doen.
Evengoed wil ik iedereen bedanken voor de moeite.
Gewijzigd op 18/05/2015 11:58:25 door Marthijn Buijs