normal Custom fonts in Jarvis Framework

More
9 years 4 months ago - 9 years 4 months ago #7886 by Balazs Csontos
Hello!

How can I add custom (own) font to the Jarvis Framework (Common Style)?

Best regards,
Balazs
Last edit: 9 years 4 months ago by Balazs Csontos.

Please Log in or Create an account to join the conversation.

More
9 years 4 months ago - 9 years 4 months ago #7889 by Linh Robert
Hi,
If you use Google Fonts, please add this css code into "Custom CSS" at Advanced section in Styles tab:

@import url(//fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext);

You can add more subset of font by going google webfont to choose.

If you use your own fonts, you first need to upload font files. Then use css to embed fonts like this:
Code:
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

Change the url to match your font file url, then paste above code into "Custom CSS" at Advanced section in Styles tab.


Thanks

If you need to send us FTP access / host access, administrator access or any private information:
services(at)omegatheme(dot)com or drop a ticket Notice: Undefined variable: target in /home/omegatheme/public_html/components/com_kunena/template/aurelia/layouts/bbcode/url/default.php on line 32
> www.omegatheme.com/member/
Last edit: 9 years 4 months ago by Linh Robert.

Please Log in or Create an account to join the conversation.

More
9 years 4 months ago - 9 years 4 months ago #7891 by Balazs Csontos
Unfortunately, it didn't work. These were my steps:

1. I downloaded Cantarell font from www.fontsquirrel.com/fonts/cantarell website.
2. I converted to webfont compatible version from www.everythingfonts.com/font-face website.
3. I added these files to \templates\ot_dulcet\fonts\ directory:
  • cantarell-regular.woff2
  • cantarell-regular.eot
  • cantarell-regular.svg
  • cantarell-regular.ttf
  • cantarell-regular.woff
4. I added these CSS lines to Custom CSS filed in Advanced section:
Code:
@font-face { font-family: 'CantarellRegular'; src: url('../fonts/cantarell-regular.eot'); src: url('../fonts/cantarell-regular.eot') format('embedded-opentype'), url('../fonts/cantarell-regular.woff2') format('woff2'), url('../fonts/cantarell-regular.woff') format('woff'), url('../fonts/cantarell-regular.ttf') format('truetype'), url('../fonts/cantarell-regular.svg#CantarellRegular') format('svg'); } body {font: 12px/18px CantarellRegular !important;} h1, h2, h3, h4, h5, h6 {font-family: CantarellRegular !important;}

I refreshed my site, but the Cantarell webfont didn't appear. Any idea?

Attachment 20141118b.jpg not found

Attachments:
Last edit: 9 years 4 months ago by Balazs Csontos. Reason: Update

Please Log in or Create an account to join the conversation.

Time to create page: 0.254 seconds

About Growth

Innovative tech for eCommerce growth

Contact Info

Head: No. 3, 175/55 Lane, Lac Long Quan St., Nghia Do Ward, Cau Giay District, Hanoi City, Vietnam