how did you solve this? this is something on my to-do list…
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.
Can you help me work through this on a landing page? I need to finish it for a client and cant figure out how to name or give something a “class”
Thank you. This is what I was looking for. 🙂
Did any one else have a issue with the font’s only loading on the preview, and not in the editor?
