Tagged: web fonts
-
AuthorPosts
-
October 14, 2015 at 7:27 pm #518895
Hi there,
In summary, the problem we have is that we are using the Raleway Google Font, which is implemented as font-family: Raleway with different font-weights, but the rich text editor is setting the font-family as ‘Raleway Medium’, ‘Raleway Light’ etc, which are not implemented in the Google API font.
We have the Raleway font defined in functions.php as follows:function avia_add_heading_font($fonts){ $fonts['Raleway'] = 'Raleway:100,200,300,400,500,600,700,800,900'; return $fonts; }
And indeed, this results in:
<link rel='stylesheet' id='avia-google-webfont' href='//fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900' type='text/css' media='all'/>
The font shows up in the enfold child settings, and consequently it is used across the site by default. But, when editing various text boxes through avia, there is an inline font-family added. For example, on this page, we find:
<span style=”font-family: ‘Raleway Medium’;”>Who we are…</span>
But Raleway Medium is not defined in the Google font CSS.Is there a way to change this behaviour, and have the content editor specify an inline font-weight? Where are those inline definitions coming from?
We could use a different version of Raleway (not served from Google), but we would have to do that in addition to the Google font, since we do have certain styles (correctly) defined using font-weight:400 and the like
For now we have implemented a fix where we define the unique font face name (Raleway Medium, Raleway Light etc.) in style.css, referencing the same Google font asset. But, for some reason, this only works in Chrome, not Safari.
@font-face { font-family: 'Raleway Medium'; font-style: normal; font-weight: 500; src: local('Raleway Medium'), local('Raleway-Medium'), url(https://fonts.gstatic.com/s/raleway/v9/CcKI4k9un7TZVWzRVT-T8wzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }
Please advise.
October 14, 2015 at 10:09 pm #518940Hi rpesce!
Hmm, that’s weird. Try deactivating all of your plugins to see if they are causing issues.
Can you send us a link to the page where the inline style is being applied? Also let us know which heading it is.
Best regards,
ElliottOctober 15, 2015 at 4:03 pm #519381After further research, I found out that the client had installed the Use Any Font plugin and had configured it by uploading a range of Raleway font variants (Raleway Medium, Raleway Bold etc.). These then show up in the tinyMCE editor and can be saved as inline styles.
So this issue ends up having nothing to do with your theme.
The problem now is to figure out how to expose a fine-grained font-weight option in tinyMCE. It will probably have to be done by defining some styles and exposing that drop-down: http://www.tinymce.com/wiki.php/Configuration:style_formatsOctober 16, 2015 at 8:51 am #519716 -
AuthorPosts
- You must be logged in to reply to this topic.