Custom fonts in Jarvis Framework

Balazs Csontos
Topic Author
Offline
Fresh Boarder

10 years 5 months ago - 10 years 5 months ago #7886 by Balazs Csontos

Custom fonts in Jarvis Framework was created by Balazs Csontos

Hello!

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

Best regards,
Balazs

Last edit: 10 years 5 months ago by Balazs Csontos.

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

Linh Robert
Offline
Banned

10 years 5 months ago - 10 years 5 months ago #7889 by Linh Robert

Replied by Linh Robert on topic Custom fonts in Jarvis Framework

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 www.omegatheme.com/member/

Last edit: 10 years 5 months ago by Linh Robert.

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

Balazs Csontos
Topic Author
Offline
Fresh Boarder

10 years 5 months ago - 10 years 5 months ago #7891 by Balazs Csontos

Replied by Balazs Csontos on topic Custom fonts in Jarvis Framework

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: 10 years 5 months ago by Balazs Csontos. Reason: Update

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

Time to create page: 0.197 seconds

Custom fonts in Jarvis Framework

Attachment 20141118b.jpg not found

About Growth

Information

Contact Info

Mobile Menu