Google klarar inte av sin egen font

2013-11-30 12:50

Permalänk

WIRN

Medlem ★

Plats: Cyberrymden
Registrerad: Okt 2003

●

Google klarar inte av sin egen font

Jag håller på att bygga en sida och upptäckte en komisk grej i Chrome.

Jag använder google fonts och firefox och ie renderar fonten perfekt men i Chrome ser det keff ut.

Se bild

Sidan: http://www.europeanhairtransplant.se/ .

Jag har importerat dom på följande sätt:

HTML

<link href='http://fonts.googleapis.com/css?family=Magra' rel='stylesheet' type='text/css'>

CSS

h1, h2, h3, h4, h5, h6 {
    font-family: "Magra", Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}

Jag använder mig av senaste versionen av chrome (31)

Any idea?

Rapportera Redigera

Citera flera Citera

2013-11-30 12:53

Permalänk

Florrpan

Medlem ★

Plats: Sundsvall
Registrerad: Dec 2006

●

Alla andra webbläsare hare antialiasing på fonter, google har bestämt att inte ha det, inte ens som ett tillval då dom valde att ta bort det från CSS t.o.m.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Rapportera Redigera

Citera flera Citera

2013-11-30 12:59

Permalänk

WIRN

Medlem ★

Plats: Cyberrymden
Registrerad: Okt 2003

●

Skrivet av Florrpan:

Alla andra webbläsare hare antialiasing på fonter, google har bestämt att inte ha det, inte ens som ett tillval då dom valde att ta bort det från CSS t.o.m.

Gå till inlägget

Ok, låter ju skumt, varför gjorde de så?

Rapportera Redigera

Citera flera Citera

2013-11-30 13:06

Permalänk

dagbro

Medlem ★

Registrerad: Jan 2011

●

Skrivet av Florrpan:

Alla andra webbläsare hare antialiasing på fonter, google har bestämt att inte ha det, inte ens som ett tillval då dom valde att ta bort det från CSS t.o.m.

Gå till inlägget

Vad menar du nu? Jag har helt klart antialiasing i chrome.

Rapportera Redigera

Citera flera Citera

2013-11-30 13:31

Permalänk

Florrpan

Medlem ★

Plats: Sundsvall
Registrerad: Dec 2006

●

Skrivet av dagbro:

Vad menar du nu? Jag har helt klart antialiasing i chrome.

Gå till inlägget

Problemet ligger i att chrome ignorerar windows clearType inställningar. Man måste slå på detta i chrome någonstans.
Iaf, på alla mina datorer är fonter "hackiga" i chrome.

Detta är allmänt känt. Läste nu att det troligen är en bugg, men inget har hänt det senaste året.

Senast redigerat 2013-11-30 13:38

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Rapportera Redigera

Citera flera Citera

2013-11-30 13:45

Permalänk

Neonxz

Medlem

Plats: Stockholm
Registrerad: Aug 2008

●

Tror jag läst det ska bli bättre om man specificerar font-weight.

h1, h2, h3, h4, h5, h6 {
font-family: "Magra", Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
font-weight: normal;
}

Värt ett försök?

Visa signatur

Neon
Citera mig om du vill ha svar!

Rapportera Redigera

Citera flera Citera

2013-11-30 18:02

Permalänk

WIRN

Medlem ★

Plats: Cyberrymden
Registrerad: Okt 2003

●

Skrivet av Neonxz:

Tror jag läst det ska bli bättre om man specificerar font-weight.

h1, h2, h3, h4, h5, h6 {
font-family: "Magra", Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
font-weight: normal;
}

Värt ett försök?

Gå till inlägget

Misstänkte tidigare att det hade med font-weight att göra men nope!

Rapportera Redigera

Citera flera Citera

2013-11-30 21:23

Permalänk

rumpnisse

Medlem ★

Plats: Göteborg
Registrerad: Jan 2006

●

testa -webkit-font-smoothing

Visa signatur

Mina poster är en illusion. Det som står skrivet här över står i själva verket inte där så inget av det som du läser är sant. Inte ens den här texten. Jag har själv ingen kunskap om det jag skriver och ingen bör således läsa eller ta in den information som står skrivet.

Rapportera Redigera

Citera flera Citera

2013-11-30 21:30

Permalänk

Florrpan

Medlem ★

Plats: Sundsvall
Registrerad: Dec 2006

●

Skrivet av rumpnisse:

testa -webkit-font-smoothing

Gå till inlägget

Detta fungerar ej längre för Chrome. Google tog bort den, eller snarare "ändrade" hur den skulle fungera. Hursom, den gör ej texten mjukare längre.

Senast redigerat 2013-11-30 21:35

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Rapportera Redigera

Citera flera Citera

2013-12-02 00:08

Permalänk

rumpnisse

Medlem ★

Plats: Göteborg
Registrerad: Jan 2006

●

Skrivet av Florrpan:

Detta fungerar ej längre för Chrome. Google tog bort den, eller snarare "ändrade" hur den skulle fungera. Hursom, den gör ej texten mjukare längre.

Gå till inlägget

Mm det har du rätt i.
Såg också att det bara var på mac som det blev någon skillnad nu.
Löser dock inte OPs problem.

Här är fonten Open Sans i Chrome 33 @ mac.
Första utan -webkit-font-smoothing
Andra med -webkit-font-smoothing: none;
Tredje med -webkit-font-smoothing: antialiased;
Fjärde med -webkit-font-smoothing: subpixel-antialiased;

Det blir lite skillnad mellan antialiased och ingen font-smoothing.

http://codepen.io/anon/pen/xLuJj

Fan vad imgur tryckte ner kvaliteten... Laddade upp en png och dom gör om den till en jpg med massa compression

Visa signatur

Mina poster är en illusion. Det som står skrivet här över står i själva verket inte där så inget av det som du läser är sant. Inte ens den här texten. Jag har själv ingen kunskap om det jag skriver och ingen bör således läsa eller ta in den information som står skrivet.

Rapportera Redigera

Citera flera Citera

2013-12-02 00:17

Permalänk

Seto1

Medlem

Plats: Sverige
Registrerad: Jul 2013

●

firefox mästarras

Rapportera Redigera

Citera flera Citera (1)

2013-12-03 22:45

Permalänk

J_ajje

Medlem

Plats: Skövde
Registrerad: Nov 2004

●

Då Chrome inte renderar WOFF korrekt i dagsläget kan du istället knuffa upp SVG-deklarationen då dessa renderas fint i Chrome. Nackdelen är dock att de är tyngre att ladda samt att inte font hinting stödjs. Dock skulle jag hellre köra på en lite sämre rendering för Chrome-användare än att belasta betydligt fler med längre laddningstider. Men det är subjektivt.

Visa signatur

| i7 920 | UD5 | 6GB | 3TB | Intel SSD 80GB | Antec P182 |
http://webbutveckla.nu - Blogg om webbutveckling

Rapportera Redigera

Citera flera Citera

2013-12-29 17:24

Permalänk

WIRN

Medlem ★

Plats: Cyberrymden
Registrerad: Okt 2003

●

Galet att det ens ska vara ett problem.

Nu gjorde jag iaf en chrome-specifik css och körde på Arial ist, känns som en ful lösning men men...

Rapportera Redigera

Citera flera Citera

2013-12-30 14:17

Permalänk

Ernesto

Medlem ★

Plats: Stockholm
Registrerad: Aug 2005

●

Chrome kan ju inte läsa WOFF ordentligt, du behöver ett annat format av fonten för att det ska funka i chrome.

Du kör ju med bootstrap och awesome-fonts. Kolla hur det är inlagt när bootstrap laddar awesome, det är en specifik ordning på de olika filtyperna som laddas in för att det ska prioriteras rätt i alla browsers.

Rapportera Redigera

Citera flera Citera

2014-01-18 17:14

Permalänk

WIRN

Medlem ★