Welcome, Guest
Username: Password: Remember me

TOPIC: Custom fonts in Jarvis Framework

Custom fonts in Jarvis Framework 1 year 10 months ago #7886

  • balazs
  • balazs's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 2
  • Karma: 0
Hello!

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

Best regards,
Balazs
Last Edit: 1 year 10 months ago by balazs.
The administrator has disabled public write access.

Custom fonts in Jarvis Framework 1 year 10 months ago #7889

  • linh_omg
  • linh_omg's Avatar
  • OFFLINE
  • Moderator
  • Posts: 910
  • Thank you received: 568
  • Karma: 25
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:
@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 www.omegatheme.com/member/
Last Edit: 1 year 10 months ago by linh_omg.
The administrator has disabled public write access.

Custom fonts in Jarvis Framework 1 year 10 months ago #7891

  • balazs
  • balazs's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 2
  • Karma: 0
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:
@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?

This image is hidden for guests. Please log in or register to see it.
Last Edit: 1 year 10 months ago by balazs. Reason: Update
The administrator has disabled public write access.
Time to create page: 0.158 seconds