Custom font for menu?

[pamelina]

Hello,

Would it be possible to use custom font for menu.
If yes, where to upload font file, and how to link it with menu?
Would this solution work with all website visitors or only those ones who would
have same font installed?

[Dr.CSS]

Typically there are only so many fonts used in web sites if you want more then web safe fonts you can use a font replacement technique such as sIFR or cufon, I've had no luck getting cufon to work limited luck with sIFR as it has strange ideas about font size etc...

I've never really liked these types of font replacements as they most times trigger adblock and such in my browser...

@font-face has come to be my font replacement of choice, totally css driven, at least it is set in the style sheet, and it understands and uses most all common css calls...

http://www.fontsquirrel.com/fontface

[pamelina]

@ Dr.CSS

Thank you for a quick reply. I'm fine with http://www.fontsquirrel.com/fontface fonts.
What would be the easiest way to get it in CMS Made Simple and how to use it for menu?

Where to upload, how to call it in menu? In pages, I guess it would be easy to use it by selecting
in wysiwyg editor, but how about in menu do I just use CSS and call for right font?

[Dr.CSS]

I just put the css calls in a style sheet, of course you will have to adjust the path to the fonts...

Here is what I do...

@font-face {
font-family: 'BIRTHOFAHERORegular';
src: url(uploads/burn/font/BIRTH_OF_A_HERO.eot);
src: local('BIRTH OF A HERO'), local('BIRTHOFAHERO'), url(uploads/burn/font/BIRTH_OF_A_HERO.woff) format('woff'), url(uploads/burn/font/BIRTH_OF_A_HERO.ttf) format('truetype');
}

NOTE: the paths, I make a new folder in the themes folder called font and put the fonts in there...

Wherever I want to use the font I just add this to it's css call, lets say the menu and it is using #primary-nav...

#primary-nav li a {
font-size: 1em;
color: #fff;
padding: 0px 10px 0px 0px;
display: block;
text-decoration: none;
line-height: normal;
font-weight: normal;
font-family: 'BIRTHOFAHERORegular', sans-serif;
}

[Metal]

Hello!

I want to use the fontsquirrel thing for my regular body text! But I Don´t know how to do it!
I added the @font code in a new stylesheet and added it to the template, I uploaded the fonts to uploads/images/... and made the new path in my stylesheet, I tried to give (in the template) the class for the body as my new stylesheet is called - but it wont find the fonts? Anyone knows?

CSS:
@font-face {
  font-family: Equality-BookItalic;
  src: url('uploads/images/equality-bookitalic-webfont.eot');
  src: local('☺'),
    url('uploads/images/equality-bookitalic-webfont.woff') format('woff'),
    url('uploads/images/equality-bookitalic-webfont.otf') format('opentype'),
    url('uploads/images/equality-bookitalic-webfont.svg#equality-bookitalic-webfont') format('svg');
  }

[uniqu3]

Do you also use p styling or how do you call the font in your body style?

I wouldn't recommend you to use @font-face for the whole content text, this would cause longer loading times.
Use it only for headings.

[Metal]

thank you for your fast reply!
But I have only very short texts in my content sites - so that would not be the problem!

It´s just vey hard (at least for me) to get it into the system!

[Metal]

Oh I did not see your first question!

I tried to give all fonts in the

{* main content *}
           
              {title}
            {content}
           
... but this does not work - also not this in the main css:

body {
/* default text for entire site */

font: normal 0.8em Equality-BookItalic, ...}

[uniqu3]

Well basically it's easy to do, did you check read/write permissions for the font files? You did upload all font files like .eot, .woff, .otf?

First you need to call your @font-face stylesheet after it the rest.

@font-face {
  font-family: 'BIRTHOFAHERORegular';
  src: url(uploads/burn/font/BIRTH_OF_A_HERO.eot);
  src: local('BIRTH OF A HERO'), local('BIRTHOFAHERO'), url(uploads/burn/font/BIRTH_OF_A_HERO.woff) format('woff'), url(uploads/burn/font/BIRTH_OF_A_HERO.ttf) format('truetype');
}

body {
font-family: 'BIRTHOFAHERORegular', Helvetica, Arial, sans-serif;}

Edit:

{* main content *}
            {title}
            {content}
           
... but this does not work - also not this in the main css:

body {
/* default text for entire site */

font: normal 0.8em Equality-BookItalic, ...}

[Metal]

Thank you!
Yes its just that I tried with:

@font-face {
  font-family: 'EqualityItalic';
  src: url(uploads/images/equality-bookitalic-webfont.eot);
  src: local('EqualityItalic'), local('Equality-BookItalic'), url(uploads/images/equality-bookitalic-webfont.woff) format('woff'), url(uploads/images/equality-bookitalic-webfont.ttf) format('truetype');
}

body {
font-family: 'EqualityItalic', Helvetica, Arial, sans-serif;}

... and just because of despair I alos tried it with: Equality-BookItalic and with EqualityItalic and with those: ' ' and those " " and without ...

the chmods of the fonts is 777

... it does not work - but thank you - but I hope I have not wasted your time!


but I saw you made this: http://www.i-arts.eu/typofolio/ ... mybe I ´ll download it and get enlightment!

[Metal]

For those who are interested!

I managed, that in the backend the desired font is shown - not very helpful - because in the frontend it is not shown - I think it depends on those lines:

@font-face {
  font-family: 'EqualityItalic';
  src: url(uploads/images/equality-bookitalic-webfont.eot);
  src: local('EqualityItalic'), local('Equality-BookItalic'), url(uploads/images/equality-bookitalic-webfont.woff) format('woff'), url(uploads/images/equality-bookitalic-webfont.ttf) format('truetype');
url('(uploads/images//equality-bookitalic-webfont.svg#webfontJjeaD3Kn') format('svg');
font-weight: normal;
font-style: normal;
}

[uniqu3]

In backend? What stylesheet do you edit?
You do edit stylesheet in "Layouts -> Stylesheets -> your stylesheet"?

[Metal]

yes - I made a new template and only attached one stylesheet for testing - everything works - fontsize, borders but not my equality font ... but in the backend - everything I type in is in the right equality font! The CMS is the freshest - installed today with the newest version!

[uniqu3]

Is your site somewhere online? Are you 100% sure that your fonts are located in that path and also the names for the fonts are correct?

[Metal]

Listen People! The Answer is there!
Applaud to: uniqu3

Be aware in version 1.8.1 you have got to make sure, that you have the correct path:

../../uploads/images/deinfont.ttf

you see: this is wrong in the new version:

@font-face {
  font-family: 'EqualityItalic';
  src: url(uploads/images/equality-bookitalic-webfont.eot);
  src: local('EqualityItalic'), local('Equality-BookItalic'), url(uploads/images/equality-bookitalic-webfont.woff) format('woff'), url(uploads/images/equality-bookitalic-webfont.ttf) format('truetype');
url('(uploads/images/equality-bookitalic-webfont.svg#webfontJjeaD3Kn') format('svg');
  font-weight: normal;
  font-style: normal;
}

but this is right:

@font-face {
  font-family: 'EqualityItalic';
  src: url(../../uploads/images/equality-bookitalic-webfont.eot);
  src: local('EqualityItalic'), local('Equality-BookItalic'), url(../../uploads/images/equality-bookitalic-webfont.woff) format('woff'), url(../../uploads/images/equality-bookitalic-webfont.ttf) format('truetype');
url('(../../uploads/images/equality-bookitalic-webfont.svg#webfontJjeaD3Kn') format('svg');
  font-weight: normal;
  font-style: normal;
}

THANK YOU VERY MUCH "uniqu3"!!!