Open embar- opened 8 years ago
looks fine on my TW. you can do the following:
coolo@thinkpad-X230-WLAN#cwar>fc-match sans-serif DejaVuSans.ttf: "DejaVu Sans" "Book" coolo@thinkpad-X230-WLAN#cwar>fc-match 'Source Sans Pro' SourceSansPro-Regular.otf: "Source Sans Pro" "Regular"
I assume your sans-serif matches some bolder font
but I can see the problem with greek. 'Source Sans Pro' seems to be pretty limited ;(
http://blog.typekit.com/2014/07/09/source-sans-v2/ says the greek glyphs were only added in v2. That explains why it looks proper on TW.
fc-match sans-serif arial.ttf: "Arial" "Normal" fc-match 'Source Sans Pro' arial.ttf: "Arial" "Normal"
After installing adobe-sourcesanspro-fonts it looks much better for Lithuanian:
fc-match 'Source Sans Pro' SourceSansPro-Regular.otf: "Source Sans Pro" "Regular"
the fix for that is using @font-face normally
The site uses @font-face
, it downloads some CSS from Google for that.
As you can see from the CSS, when the font is installed locally, the Google CSS gives preference to the locally installed font. The issues seem to be:
cf. https://www.google.com/fonts#ReviewPlace:refine/Collection:Source+Sans+Pro
The instruction to load the font in the landing page is unsupported by the provider and the resulting format (TrueType) is unsupported by the browser.
@yecril71pl Which browser/OS combination are you speaking about? (Google will deliver different CSS to different browsers but this is generally pretty well tuned and usually works.)
Microsoft Edge 42.17134.1.0 OS Name: Microsoft Windows 10 Pro SEC7111: HTTPS security is compromised by http://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf www.opensuse.org (1,1) SEC7111: HTTPS security is compromised by http://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf www.opensuse.org (1,1) CSS3119: No fonts available for @font-face rule openSUSE.min.css (1,1100)
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'),local('SourceSansPro-Regular'),url(http://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf) format('truetype') }
The following page demonstrates that Google is right and we are wrong:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ><HTML LANG="pl" ><META HTTP-EQUIV=CONTENT-TYPE CONTENT="TEXT/HTML; CHARSET=WINDOWS-1250" ><TITLE >Sprawdzenie działania czcionki</TITLE ><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=latin-ext" rel="stylesheet" ><STYLE TYPE="TEXT/CSS" ><!-- h3 { FONT-FAMILY: 'Source Sans Pro', monospace } --></STYLE ><H1 >Sprawdzenie działania czcionki</H1 ><P >Czcionka <A HREF="https://fonts.google.com/specimen/Source+Sans+Pro" >Source Sans Pro</A > działa prawidłowo na <A HREF="#BQ-FONT-SAMPLE" >tej stronie</A >: <BLOCKQUOTE ID=BQ-FONT-SAMPLE ><h3 class="text-center wow fadeInUp" lang="pl" style="visibility: visible; animation-name: fadeInUp;" >Polecany przez twórców dla administratorów, programistów i użytkowników domowych.</h3 ></BLOCKQUOTE ><P >Natomiast na stronie <OBJECT TYPE="TEXT/HTML" DATA="https://www.opensuse.org/" WIDTH=400 HEIGHT=400 ><A HREF="https://www.opensuse.org/#opensuse-os" >openSUSE - Linux OS. Polecany przez twórców dla administratorów, programistów i użytkowników domowych.</A ></OBJECT > ładuje się ona <A HREF="https://github.com/openSUSE/landing-page/issues/73" HREFLANG="en-us" >nieprawidłowo</A >.I have the following question: Why do we import font CSS at build time instead of at run time? This is unsupported by the provider.
I looked at your PR (and hence compared some of the delivered code with the source for the first time):
I think the issue is that Google's font CSS is @import
ed via Less and @import
behaves differently in CSS and Less:
@import
is executed by the browser@import
is executed by the Less compiler (if you use less.js, that still runs in the browser; but we are using lessc locally and finally put up plain CSS)Clearly, the author of the page expected CSS's behavior but got lessc's behavior. This means, Google gets the request via HTTP and hence ships fonts via HTTP as well. Also, the HTTP request probably has a user agent string that is not recognized by Google, so Google delivers the lowest common denominator which is TTF fonts (as I said in the earlier comment, Google delivers different CSS based on the user agent string).
You could solve this issue by just using <link>
tags in the HTML directly. Otherwise, you'd have to escape the @import
rule, so lessc can't see it, I guess.
As a further explanation:
SEC7111: HTTPS security is compromised by http://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf
www.opensuse.org (1,1)
This error occurs because the fonts are unconditionally loaded via HTTP and not HTTPS. Just using //
at the beginning of the URL would fix that.
TTF fonts should work pretty much everywhere, the only issue is that they have some size disadvantages. (After all, WOFF fonts are essentially compressed TTF fonts.) However, your browser blocks the TTF fonts because they are delivered via HTTP.
@import (css)
passes the import task to the browser but the effect was nuked by minify so I had to use clean instead.
When I open staged openSUSE site, I see bold Ą Č Ę Ė Į Š Ų Ū Ž letters in Lithuanian locale, while ASCII letters has non-bold style:
Maybe font not found? I have installed quite a lot fonts:
B | Pavadinimas | Santrauka | Tipas
--+------------------------------+---------------------------------+--------- i | bitstream-vera-fonts | Bitstream Vera(tm) Truetype f-> | paketas i | dejavu-fonts | DejaVu Truetype Fonts | paketas i | fontconfig | Library for Font Configuration | paketas i | fonts | Fonts | šablonas i | fonts-config | Configures Fonts for X Window-> | paketas i | ghostscript-fonts | Ghostscript's free fonts | paketas i | ghostscript-fonts-other | Optional Fonts for Ghostscript | paketas i | ghostscript-fonts-std | Basic Fonts for Ghostscript | paketas i | gnu-free-fonts | Free UCS Outline Fonts | paketas i | gnu-unifont-bitmap-fonts | The GNU Unicode Bitmap Font | paketas i | google-alegreya-fonts | Serif Font for Literature | paketas i | google-allerta-fonts | Easily Readable Sans Serif Font | paketas i | google-anonymouspro-fonts | A Free Monospace Font | paketas i | google-cabin-fonts | Humanist Sans Serif Font | paketas i | google-caladea-fonts | Sans-serif Font Metrics-compa-> | paketas i | google-carlito-fonts | Sans-serif Font Metrics-compa-> | paketas i | google-cousine-fonts | Monospace Sans Serif Font | paketas i | google-droid-fonts | Fonts With Extensive Style an-> | paketas i | google-exo-fonts | Contemporary Geometric Sans S-> | paketas i | google-lato-fonts | Easily Readable Sans Serif Font | paketas i | google-lekton-fonts | Monospaced Typewriter Font | paketas i | google-merriweather-fonts | Readable Text Serif Font for -> | paketas i | google-nobile-fonts | Sans Serif Font | paketas i | google-opensans-fonts | Humanist Sans Serif Typeface | paketas i | intlfonts-euro-bitmap-fonts | European fonts for the X Wind-> | paketas i | libXfont1 | X font handling library for s-> | paketas i | libXfontcache1 | X TrueType font cache extensi-> | paketas i | liberation-fonts | Liberation Fonts | paketas i | libfontenc1 | X11 font encoding library | paketas i | libobasis5.0-ooofonts | Mailcap module for LibreOffic-> | paketas i | mkfontdir | Utility to create index of X -> | paketas i | mkfontscale | Utility to create index of sc-> | paketas i | palemonas-ttf-fonts | Lithuanian TrueType font Pale-> | paketas i | patterns-openSUSE-fonts | Fonts | paketas i | patterns-openSUSE-fonts_opt | Fonts | paketas i | tv-fonts | Fonts for TV Applications | paketas i | unidings-fonts | Font with Basic Icon Glyphs | paketas i | vytis-ttf-fonts | Lithuanian TrueType font Vytis | paketas i | xlsfonts | Utility to list fonts availab-> | paketas i | xorg-x11-fonts | X.Org fonts | paketas i | xorg-x11-fonts-core | Core Fonts for X.Org | paketas
Similar bad look if I select Polish:
or Slovak:![nuotrauka3](https://cloud.githubusercontent.com/assets/1218781/10793841/46cbb920-7d9b-11e5-8fe2-b3909568c532.png)