Skip to main content
All CollectionsDesign and customisation
Can I use my own web font on SupaDupa?
Can I use my own web font on SupaDupa?
Guy Schragger avatar
Written by Guy Schragger
Updated over 2 years ago

Using a web font in your SupaDupa store that you purchase or find using an online service such as Google Web Fonts is possible, but it does require that you are on a plan which provides HTML/CSS customisation. Given this, we strongly recommend that you are either comfortable modifying HTML/CSS code, or find someone who is, to prevent making a mistaking and breaking your theme.

See this helpful article on CSS Web Fonts:
http://css-tricks.com/snippets/css/using-font-face/

The exact steps will vary depending on the provider of the font, but in the case of Google, this should work for you:

1) You'll want to obtain a URL for your custom font, a path to a file with a .eot or .ttf file extension for example. This URL will either be provided to you by the font service you've obtained the font from, or you can upload the individual font files to your theme, via the 'Custom Assets' uploader - found within the 'Advanced Customisation' section of the SupaDupa Design tab.

2) Then you'll need to edit the main 'theme.css' template and enter code like the following into the HEAD of the page:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You'll want to edit the URLs to match their actual locations.

3) Finally, with the font-face now registered in your theme, you'll be able to edit the CSS and set where you want the font used. As an example, using the font for your Shop Description would be achieve with something like this, depending on the theme:

.shop-tag-line {
font-family: DeliciousRoman
}

This should get you going, but let us know if further help is required!

Did this answer your question?