Support Articles
Custom fonts are a great way to make your site truly unique. You can pick a font that matches your logo, a font featured on your business cards and press materials, or creative fonts that match the niche of your site. Snapps's built-in collection of fonts, along with those provided by the Google Fonts library, gives you a wide range of choices to match various site designs. If these are not enough, follow the guide below for embedding custom fonts in sites.
Disclaimer: This guide relies on a third-party tool, not one built by Snapps. Also, note that @font-face technology falls under custom code. We cannot guarantee that the font you choose supports web embedding, that the files you receive from the font foundry are ready-to-use or that the code you edit is in the correct format.
Although these issues rarely result in causing any problems with editing your site, please make sure to backup your site before you do any custom code changes. You can review our policy regarding custom code here.
Prepare Custom Font Files
Custom fonts may come in several formats, the most popular ones being .otf, .ttf, .woff, .svg, and .eot. In order to use your font, you need to make sure you own the .ttf, .eot and .svg files.
If you only have an .otf or .ttf file, we recommend using an external tool to convert the font to the required formats (in our guide below, we use FontSquirrel, but you can use any available alternatives).
Convert .otf or .ttf Files
If you already have the links to the fonts (for example, they are hosted on your font foundry and they provide you with the links or you uploaded the fonts to file sharing platform), skip to the next step. Otherwise, you will need to embed the generated .ttf, .svg and .eot versions of the font to your site.
CSS Code Template
Go to Developer Mode in your site, open the site.css file and paste the following code:
@font-face {
font-family: 'FONT-NAME';
src: url('URL') format('embedded-opentype'),
url('URL') format('svg#FONT-NAME'),
url('URL') format('truetype');
font-weight: normal;
font-style: normal;
}
Find Name For Your Custom Font
Updating CSS Code With Your Custom Font Name and File Download Links
WARNING: Do not forget to change the closing signs: a semicolon at the end of the files list, and a comma after .svg format.
Return to the editor, right-click the text element you want to edit and click Edit HTML/CSS. You can then apply the new font to widgets in all devices, or in specific device views using the CSS snippet in the following form: font-family: 'FONT-NAME' !important;. For example, for our font, we added this CSS line of code: font-family: 'cry_wolfregular' !important;.
This way, you can apply the font to paragraphs, headings, and so on. If you would like to apply custom fonts to the text elements in the header, please do that in Developer Mode.
Apply Font to Specific Global Site Fonts
To apply your custom fonts globally, you must replace the specific CSS elements with your custom font name. To do this:
Apply Font via CSS
To set the font you embedded as your site's global font, add the following CSS line to site.css. For more information on adding custom CSS, see Developer Mode.
"*#dm div.dmContent *, *#dm div.dmFooter *, *#dm div.dm-title {YOUR_GOOGLE_INTEGRATION_CODE}"
Replace YOUR_GOOGLE_INTEGRATION_CODE above with the font-family CSS code you copied from Google Fonts. Click Save.
The font is now applied to the widget’s text elements and you can use the inline editor to change the colors and edit the text as normal.
Apply Font to Specific Global Site Fonts
To apply your custom fonts globally, you must replace the specific CSS elements with your custom font name. To do this:
Notes About Using Custom Fonts With Snapps