Render fonts in editor and build landing pages faster!

  • 11 March 2016
  • 8 replies
  • 88 views
G

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

 
 

8 replies

J

Gabe, 
It looks like my original reply never made it through, so I want to chime in now and say that this is a HUGE tip that will save a ton of time. Great timing, too!

Between you and I (and the rest of the Community) we’re currently in the works of building out a new text editor for the builder that will allow you to use more custom Google fonts. We’re still a bit away from a public release, so this will definitely help smart marketers like yourself in the meantime. 

Awesome work, my friend!

Stefano
Userlevel 7
Badge +4

Hey Gabriel,

Thank you for sharing this!

T

Hi Gabriel, thanks for this advise… but somehow i cant get it to work…

This is what I copied from the CSS / Style sheet:

@font-face { font-family: 'Populaire'; src:





  url('http://kochab.uberspace.de/var/www/virtual/silvy/html/Populaire_kit_font/webfonts/30ABF3_0_0.eot') format('embedded-opentype'),







url('http://kochab.uberspace.de/var/www/virtual/silvy/html/Populaire_kit_font/webfonts/30ABF3_0_0.woff') format('woff'),





  url('http://kochab.uberspace.de/var/www/virtual/silvy/html/Populaire_kit_font/webfonts/30ABF3_0_0.ttf') format('truetype'),





  url('http://kochab.uberspace.de/var/www/virtual/silvy/html/Populaire_kit_font/webfonts/30ABF3_0_0.svg') format('svg');

font-weight: normal;

font-style: normal;

font-family: 'Populaire Light'; src:





  url('http://kochab.uberspace.de/var/www/virtual/silvy/html/Populaire_kit_font/webfonts/30ABF3_1_0.eot') format('embedded-opentype'),







url('http://kochab.uberspace.de/var/www/virtual/silvy/html/Populaire_kit_font/webfonts/30ABF3_1_0.woff') format('woff'),





  url('http://kochab.uberspace.de/var/www/virtual/silvy/html/Populaire_kit_font/webfonts/30ABF3_1_0.ttf') format('truetype'),





  url('http://kochab.uberspace.de/var/www/virtual/silvy/html/Populaire_kit_font/webfonts/30ABF3_1_0.svg') format('svg');

font-weight: normal;

font-style: normal; }

Unbounce picks up the fonts well, but the renderer shows the wrong font. Only in Preview or Published mode I can see the real font…  The link to the webserver does not give me https, but just http, as you can see above. Could this be a reason?

Lastly, I don’t understand your last paragraph: 

Then any text which you add the font to will now be rendered accordingly, example.

TextHope you can help me out. Thanks,
Thomas

PS: just noticed that all the above code has dissappeared from the Styler plug-in ??

G

Hey Thomas,

I think I know what is happening. After you press paste press enter to confirm what you have pasted.

I think that when pasting into Styler it doesn’t refresh/know that you have added anything yet until you start a new line of css.

This is why the code isn’t there when you exit.

As for the last paragraph that is just an extract of code from a text box using the source view, so I’m pretty much saying that you need to add the font in the code for any text you want it to apply to.

Thanks,
Gabe.

T

Hi Gabriel, really appreciate your help. Still trying to make it work though… I guess it is not so easy over the forum… the code stays inside the Styler CSS block. But still it does not show in my editor in unbounce.  I dont use https but http, but suppose this does not matter.  The code in the Stylesheet is copied. But I simply dont know why it does not work… any further things I should have done? Happy to give you access.

G

Hi Thomas,

I can definitely take a look, what is the best way for you to get in contact with me.

Thanks,
Gabe.

T

Great, please drop me a mail at thomas@silvy-health.com and then we can share links and more.
Thanks

T
Badge

Does anyone know if this workaround is still good before I try it?
I’m not very CSS savvy, so it’ll take me a while to figure it out.

Reply


Terms & ConditionsCookie settings