Adding custom fonts to my page

It’s quite simple once you know what you’re doing.

A. Add similar to your stylesheets:

@font-face {
font-family: ‘nameOfFont’;
src: url(url-of-where-your-fonts-are-on-your-server.ttf);
}

@font-face {
font-family: ‘nameOfFont IE’;
src: url(url-of-where-your-fonts-are-on-your-server.eot);
}

.nameOfClass {
font-family: ‘nameOfFont’, ‘nameOfFont IE’, sans-serif;
}

eot is for Internet explorer, ttf is for everything else. ttf is more important. You can use a font converter online if you don’t have eot version.

B. upload fonts to your server. Create a file in your text editor named ‘.htaccess’. Add the following code to file htaccess

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

C. push ‘.htaccess’ to your server (it will automatically disappear)

D. Add class=“nameOfClass” (name of class above) to your fonts under ‘view source’ in unbounce editor.

And you’re done!

If you do have any problems, you can contact support… but it’s pretty straight forward if you are a dev.
If you have trouble with your .htaccess file, open dreamweaver or similar and connect to your server. Then you can view the htaccess file (it will disappear on upload because it is a server side file)

Remember to use inspect element and check the console for errors to identify what is going on.