Link to home
Start Free TrialLog in
Avatar of douganfarms
douganfarms

asked on

Can you use custom fonts, embedded as live text?

I want to use a custom font in a navigation bar, that is fixed to the top of the page, because it is the clients font. You all tell me I can't use roll over images to use CSS for the bar, so how do I use a custom font?
Thanks,
John
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image
As you would a normal font. You include it in your CSS - which refers to a woff / ttf /eot /svg file on your server (where the font file is located) then you simply give your style the font name.

For example 

@font-face {
  font-family: 'My Clients Font';

  src: url('../fonts/myClientsFont-regular.eot');
  src: url('../fonts/myClientsFont-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/myClientsFont-regular.woff') format('woff'), url('../fonts/myClientsFont-regular.ttf') format('truetype'), url('../fonts/myClientsFont-regular.svg#glyphicons_halflingsregular') format('svg');
}

.myMenu li a {
  font-family: 'My Clients Font'
}

Open in new window

This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.