OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to new native system font stack (#7219)

Browse Source 
no issue

Based on an increasingly popular trend and modern web typography capabilities, switch out Google Fonts for default native system fonts, tailored in a stack to suit every device. Also makes some very minor visual adjustments to suit.

Nixes all references to Google Fonts, and provides a faster rendering experience and fewer http requests. 💃

Reference material:

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
https://medium.design/system-shock-6b1dc6d6596f#.rhqx5fmyz
Dependencies:

TryGhost/Ghost-Admin#211
TryGhost/Ghost-Desktop#190
This commit is contained in:
John O'Nolan 2016-08-18 21:29:46 +02:00 committed by Hannah Wolfe
parent 663b410fd4
commit 61a8845ab5
9 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
PRIVACY.md
View File

@ -20,11 +20,6 @@ This service can be disabled at any time. All of the information and code relate
Ghost uses a number of third party services for specific functionality within Ghost.
### Google Fonts
Ghost makes use of the Open Sans [Google Font](https://www.google.com/fonts), which is loaded into the Ghost admin area to provide a typographically stimulating experience.
### Gravatar
To automatically populate your profile picture, Ghost pings [Gravatar](http://gravatar.com) to see if your email address is associated with a profile there. If it is, we pull in your profile picture. If not: nothing happens.
@ -48,4 +43,4 @@ Ghost outputs basic meta tags to allow rich snippets of your content to be recog
### Default Theme
The default theme which comes with Ghost loads a copy of jQuery from the jQuery Foundation's [public CDN](https://code.jquery.com/jquery-1.11.3.min.js). The theme also contains three sharing buttons to [Twitter](http://twitter.com), [Facebook](http://facebook.com), and [Google Plus](http://plus.google.com). No resources are loaded from any services, however the buttons do allow visitors to your blog to share your content publicly on these respective networks.
The default theme which comes with Ghost loads a copy of jQuery from the jQuery Foundation's [public CDN](https://code.jquery.com/jquery-1.11.3.min.js), and makes use of the Open Sans [Google Font](https://www.google.com/fonts). The theme also contains three sharing buttons to [Twitter](http://twitter.com), [Facebook](http://facebook.com), and [Google Plus](http://plus.google.com). No resources are loaded from any services, however the buttons do allow visitors to your blog to share your content publicly on these respective networks.

1
core/server/api/configuration.js
View File

@ -30,7 +30,6 @@ function getAboutConfig() {
function getBaseConfig() {
return {
fileStorage: {value: (config.fileStorage !== false), type: 'bool'},
useGoogleFonts: {value: !config.isPrivacyDisabled('useGoogleFonts'), type: 'bool'},
useGravatar: {value: !config.isPrivacyDisabled('useGravatar'), type: 'bool'},
publicAPI: labsFlag('publicAPI'),
internalTags: labsFlag('internalTags'),

1
core/server/apps/private-blogging/lib/views/private.hbs
View File

@ -15,7 +15,6 @@
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700'>
<link rel="stylesheet" href="{{asset "ghost.css" ghost="true" minifyInProduction="true"}}" />
</head>
<body>

1
core/server/apps/subscribers/lib/views/subscribe.hbs
View File

@ -15,7 +15,6 @@
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700'>
<link rel="stylesheet" href="{{asset "ghost.css" ghost="true" minifyInProduction="true"}}" />
</head>
<body>

5
core/server/mail/templates/invite-user.html
View File

@ -3,7 +3,7 @@
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #ffffff; color: #808284; font-family: sans-serif; font-size: 15px; line-height: 1.5; margin: 0; width: 100%;">
@ -21,7 +21,7 @@
<td class="content-cell" width="100%">
<!-- START OF EMAIL CONTENT -->
<h1 style="color: #212425; font-family: sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -1px; line-height: 1.1; margin: 0.4em 0 0.8em 0; padding: 0;">Welcome</h1>
<h1 style="color: #212425; font-family: sans-serif; font-size: 28px; font-weight: 600; line-height: 1.1; margin: 0.4em 0 0.8em 0; padding: 0;">Welcome</h1>
<p style="color: #808284; font-family: sans-serif; font-size: 15px; font-weight: normal; line-height: 1.5em; margin: 0; padding: 0 0 1.5em 0;"><strong>{{blogName}}</strong> is using Ghost to publish things on the internet! {{invitedByName}} has invited you to join. Please click on the link below to activate your account.</p>
<p style="color: #808284; font-family: sans-serif; font-size: 15px; font-weight: normal; line-height: 1.5em; margin: 0; padding: 0 0 1.5em 0;"><a href="{{resetLink}}" style="color: #5ba4e5;">Click here to activate your account</a></p>
<p style="color: #808284; font-family: sans-serif; font-size: 15px; font-weight: normal; line-height: 1.5em; margin: 0; padding: 0 0 1.5em 0;"><strong>No idea what Ghost is?</strong> It's a simple, beautiful platform for running an online blog or publication. Writers, businesses and individuals from all over the world use Ghost to publish their stories and ideas. <a href="http://ghost.org" style="color: #5ba4e5;">Find out more</a>.</p>
@ -53,4 +53,3 @@
</body>
</html>

22
core/server/mail/templates/newsletter.html
View File

@ -101,7 +101,7 @@
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left">
<!-- Blog title -->
<h1 class="blog-title text-center" style="Margin:0;Margin-bottom:0;color:#242628;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:24px;font-style:normal;font-weight:400;letter-spacing:-.8px;line-height:100%;margin:0;margin-bottom:0;padding:0;text-align:center;word-wrap:normal">
<h1 class="blog-title text-center" style="Margin:0;Margin-bottom:0;color:#242628;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:100%;margin:0;margin-bottom:0;padding:0;text-align:center;word-wrap:normal">
{{blog.title}}
</h1>
</th>
@ -140,7 +140,7 @@
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left">
<!-- interval (Weekly, Monthly, Daily) & date (e.g. June 9th, 2016)-->
<h3 class="text-center mail-issue" style="Margin:0;Margin-bottom:0;color:#7d878a;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:18px;font-style:normal;font-weight:400;letter-spacing:-.6px;line-height:100%;margin:0;margin-bottom:0;padding:0;text-align:center;word-wrap:normal;">
<h3 class="text-center mail-issue" style="Margin:0;Margin-bottom:0;color:#7d878a;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:18px;font-style:normal;font-weight:400;line-height:100%;margin:0;margin-bottom:0;padding:0;text-align:center;word-wrap:normal;">
<span style="text-transform:capitalize">{{newsletter.interval}}</span> digest &#x2014;
<span style="text-transform:capitalize">{{newsletter.date}}</span></h3>
</h3>
@ -260,7 +260,7 @@
<!-- Post #1 title & Post #1 URL-->
<!-- Always use `&#x2019;` instead of `&apos;` or `'`, because Outlook & co will break -->
<h2 class="feature-post-title" style="Margin:0;Margin-bottom:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal">
<a href="{{blog.post[0].title}}" target="_blank" style="Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:22px;font-weight:700;letter-spacing:normal;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none"><font color="#242628">
<a href="{{blog.post[0].title}}" target="_blank" style="Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:22px;font-weight:700;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none"><font color="#242628">
{{blog.post[0].title}}</font>
</a>
</h2>
@ -301,7 +301,7 @@
<th style="Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left">
<!-- Post #1 text -->
<!-- Always use `&#x2019;` instead of `&apos;` or `'`, because Outlook & co will break -->
<p class="feature-post-text" style="Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:17px;font-weight:400;letter-spacing:normal;line-height:23px!important;margin:0;margin-bottom:0;padding:0;text-align:left">
<p class="feature-post-text" style="Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:17px;font-weight:400;line-height:23px!important;margin:0;margin-bottom:0;padding:0;text-align:left">
{{blog.post[0].text}}
</p>
</th>
@ -462,7 +462,7 @@
</table>
<!-- post #2 url & post #2 title -->
<h2 class="post-title" style="Margin:0;Margin-bottom:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal">
<a href="{{blog.post[1].url}}" target="_blank" style="Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;letter-spacing:normal;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none"><font color="#242628">
<a href="{{blog.post[1].url}}" target="_blank" style="Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none"><font color="#242628">
{{blog.post[1].title}}</font>
</a>
</h2>
@ -474,7 +474,7 @@
</tbody>
</table>
<!-- post #2 text -->
<p class="text-left post-text" style="Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left">
<p class="text-left post-text" style="Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left">
{{blog.post[1].text}}
</p>
</th>
@ -541,7 +541,7 @@
</table>
<!-- post #3 url & post #3 title -->
<h2 class="post-title" style="Margin:0;Margin-bottom:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal">
<a href="{{blog.post[2].url}}" target="_blank" style="Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;letter-spacing:normal;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none"><font color="#242628">
<a href="{{blog.post[2].url}}" target="_blank" style="Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none"><font color="#242628">
{{blog.post[2].title}}</font>
</a>
</h2>
@ -553,7 +553,7 @@
</tbody>
</table>
<!-- post #3 text -->
<p class="text-left post-text" style="Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left">
<p class="text-left post-text" style="Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left">
{{blog.post[2].text}}
</p>
</th>
@ -623,7 +623,7 @@
</table>
<!-- post #4 url & post #4 title -->
<h2 class="post-title" style="Margin:0;Margin-bottom:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:30px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal">
<a href="{{blog.post[i]['url']}}" target="_blank" style="Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;letter-spacing:normal;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none"><font color="#242628">
<a href="{{blog.post[i]['url']}}" target="_blank" style="Margin:0;color:#242628!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:21px;font-weight:700;line-height:24px;margin:0;padding:0;text-align:left;text-decoration:none"><font color="#242628">
{{blog.post[i]['title']}}</font>
</a>
</h2>
@ -635,7 +635,7 @@
</tbody>
</table>
<!-- post #4 text -->
<p class="text-left post-text" style="Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:normal;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left">
<p class="text-left post-text" style="Margin:0;Margin-bottom:0;color:#7d878a!important;display:block;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:22px;margin:0;margin-bottom:0;padding:0;text-align:left">
{{blog.post[i]['text']}}
</p>
</th>
@ -826,7 +826,7 @@
<tr style="padding:0;text-align:left;vertical-align:top">
<th style="Margin:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left">
<!-- newsletter interval unsubscribe link & blog title -->
<p class="unsubscribe-text" style="Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:-.47px;line-height:16px;margin:0;margin-bottom:0;padding:0;text-align:center">
<p class="unsubscribe-text" style="Margin:0;Margin-bottom:0;color:#7d878a;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:16px;margin:0;margin-bottom:0;padding:0;text-align:center">
You&#x2019;re receiving this email because you subscribed to {{newsletter.interval}} emails from {{blog.title}}<br>If you&#x2019;d prefer not to receive these, you can
<a href="{{blog.unsubscribe}}" target="_blank" style="Margin:0;color:#7d878a!important;font-family:'Helvetica Neue',Helvetica,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:underline"><font color="#7d878a">
unsubscribe instantly</font>

1
core/server/views/user-error.hbs
View File

@ -15,7 +15,6 @@
<link rel="shortcut icon" href="{{asset "favicon.ico"}}">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700'>
<link rel="stylesheet" href="{{asset "ghost.css" ghost="true" minifyInProduction="true"}}" />
</head>
<body>

1
core/test/integration/api/api_configuration_spec.js
View File

@ -26,7 +26,6 @@ describe('Configuration API', function () {
props.should.have.property('blogTitle').which.is.an.Object().with.properties('type', 'value');
props.should.have.property('routeKeywords').which.is.an.Object().with.properties('type', 'value');
props.should.have.property('fileStorage').which.is.an.Object().with.properties('type', 'value');
props.should.have.property('useGoogleFonts').which.is.an.Object().with.properties('type', 'value');
props.should.have.property('useGravatar').which.is.an.Object().with.properties('type', 'value');
props.should.have.property('publicAPI').which.is.an.Object().with.properties('type', 'value');

2
core/test/unit/migration_fixture_spec.js
View File

@ -162,7 +162,7 @@ describe('Fixtures', function () {
it('tried to move jQuery AND add a privacy message if any privacy settings are on', function (done) {
var notificationsAddStub = sandbox.stub(notifications, 'add').returns(Promise.resolve());
configUtils.set({privacy: {useGoogleFonts: false}});
configUtils.set({privacy: {useGravatar: false}});
getObjStub.get.returns('');
moveJquery({}, loggerStub).then(function () {