Hey all!
Thought I would share a simple trick which will help all of you out there using custom fonts but who are struggling to type set them due to lack of font rendering in the editor.
The Problem:
@font-face kits and other fonts don’t always render in the editor making it extremely difficult and slow to type set your landing pages.
The Solution:
By using a css injection browser extension you can simply copy and paste the font kit css into it while using the editor and wah-lah your fonts are now rendering correctly provided you have added the font in the style attribute of your text.
As I use chrome my extension plugin of choice is Styler as it saves the css for the domain so you can come back to the editor without loosing any css.
I copy the font kit css for example:
@font-face { font-family: ‘Acrom-Regular’;__ src: url('https://fontsite.com/yourfont.eot’) format(‘embedded-opentype’),
url('https://fontsite.com/yourfont.otf’) format(‘opentype’),
url('https://fontsite.com/yourfont.woff’) format(‘woff’),
url('https://fontsite.com/yourfont.ttf’) format(‘truetype’),
url('https://fontsite.com/yourfont.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
And paste it into the css section of the chrome extension. (and of course also include all font kits into your Stylesheets)
Then any text which you add the font to will now be rendered accordingly, example.
Text
And thats it, your fonts will now render in the editor and you no longer have to save and republish every time to change some type to make sure it fits correctly or looks right 🙂
Thanks!
Gabe