The soft outer glow SVG filter I used is achieved in 2 steps: first expand the source image using feMorphology and then a Gaussian blur using feGaussianBlur. It gives that 80s look to any design that you place it on. CSS SVG Filters – Road Rage Font Text Effectĭescription: The Road Rage font is quite a beautiful example of retro typography. If you want to know more about the chrome effect in 80s design, check out this awesome article from PSDDude about 80s fonts.Ģ. I’ve re-used the noise SVG filter several times for the other text effects as well. For a final touch I used a noise SVG filter. The chrome look is given using a CSS linear gradient.
There’s a CSS text bevel SVG filter to give the raised text effect. CSS SVG Filters – Commando Font Fake Chrome Text Effectĭescription: This fake chrome text effect is made using svg filters and CSS.
So, are you curious to see how to make text effects like in Photoshop using CSS and SVG filters?Ĭheck these out: 1. You’ll find more free fonts and text effects from 80s movies, video games, music albums, etc. If you like the 80s fonts and text effects, check out this awesome post about 80s Font Text Effects and Modern Retro Design (or synthwave outrun design) from PSDDude. My inspiration for these text effects came from Photoshop text effects like the ones from Indieground. You can download the fonts from the links below, but you will have to use a tool for converting from TTF to web fonts (I’ve used Transfonter and Web Font Generator) Please note that I’ve used a couple of free 80s fonts.
You can find the source code for each of the 80s font text effects in the codepens from the link.
In this post I’ve used SVG filters and 80s fonts to create a few 80s text effects. You can reference SVG filters from CSS and you can even combine multiple SVG filters. Step 1: On Page Builder, go to your Settingsįirst, go ahead and open the Shogun app and click on the Settings icon.SVG filters are a very powerful, but a bit obscure tool. Then you can use it throughout your store as a header or body copy.
Integrating custom fonts with ShogunĪfter you’ve added the font to your theme, you’re only a few easy steps away from integrating it with Shogun Page Builder. Not terribly easy but you’ll have a deep sense of pride once you’ve accomplished it. If you want to upload multiple fonts, you need to do so one by one. When you’re all finished, make sure to Save your changes.Ĭongrats! Your font has successfully been added to Shopify. subtitle Step 5: Save your changes and find peace in your new font In this example, we’ll be changing the headers, but you can add whatever types of text you want to change to this line of code (click here for a guide to CSS font).Īnd again, replace “FONT” with the name of your font: You may need to add or remove lines from this chunk of code depending on the file types that you’re uploading (for example, if you’re not uploading a woff2 file, remove the woff2 line completely).ĭirectly below that code, add the following code for the types of text you want to change. Inside the code you just pasted, replace “FONT” with the name of your font, and remember to include any hyphens or underscores in the name so that it’s an exact match.
Step 4: Update code to reflect your new font