Adding custom fonts to my page


#1

Hey there,

I am trying to add custom fonts to my page but I am getting some errors.
Using the @font-face rule I have tried 2 solutions but neither have worked so far.

A. using this CSS
@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;
}

B. Using this same CSS but adding it to an external CSS file and using the @import rule to import the CSS.

You can check the errors using ‘inspect element’ and see them in the console.
As always, any help is greatly appreciated!

Cheers


#2

Nevermind, solved this!


#3

how did you solve this? this is something on my to-do list…


#4

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.


#5

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”