Topic: Custom fonts in Jarvis Framework (1/1) - Forums

TOPIC: Custom fonts in Jarvis Framework

Custom fonts in Jarvis Framework 8 years 6 months ago #7886

balazs 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: 8 years 6 months ago by balazs. The administrator has disabled public write access.

Custom fonts in Jarvis Framework 8 years 6 months ago #7889

linh_omg
OFFLINE
Moderator
Posts: 908
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: 8 years 6 months ago by linh_omg.

The administrator has disabled public write access.

Custom fonts in Jarvis Framework 8 years 6 months ago #7891

balazs
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: 8 years 6 months ago by balazs. Reason: Update

The administrator has disabled public write access.

Forum

OmegaTheme Public Forums

Jarvis Joomla responsive framework

Custom fonts in Jarvis Framework