The @import line of code should be the very first line of LIVE code in your CSS file otherwise it will not work. You can put comments above without issue.
Embed Server Based Fonts
/* all text marvel-regular */
@font-face {
font-family: 'Marvel-Regular';
src:url('../custom/fonts/marvel-regular/Marvel-Regular.ttf.woff') format('woff'),
url('../custom/fonts/marvel-regular/Marvel-Regular.ttf.svg#Marvel-Regular') format('svg'),
url('../custom/fonts/marvel-regular/Marvel-Regular.ttf.eot'),
url('../custom/fonts/marvel-regular/Marvel-Regular.ttf.eot?#iefix') format('embedded-opentype');
/*font-weight: normal;
font-style: normal;*/
}
body, body #jsn-menu ul.menu-mainmenu a, body #jsn-menu ul.menu-mainmenu li a span, h1, h2, h3, h4, h5, h6 {
font-family: "Marvel-Regular", Verdana, Geneva, sans-serif;
}
/* Add a custom font that is installed locally on your server */
@font-face {
font-family: 'LTKaliberItalic';
src: url('../custom/fonts/linotype/linotypekaliberitalic.eot');
src: url('../custom/fonts/linotype/linotypekaliberitalic.eot') format('embedded-opentype'),
url('../custom/fonts/linotype/linotypekaliberitalic.woff') format('woff'),
url('../custom/fonts/linotype/linotypekaliberitalic.ttf') format('truetype'),
url('../custom/fonts/linotype/linotypekaliberitalic.svg#LTKaliberItalic') format('svg');
}
/* This declares the font aas white on a black background */
body {
font-family: "LTKaliberItalic", Times, serif;
background-color: black !important;
color: white !important;
}
/* Alternative font-face declaration with extra styling in */
@font-face {
font-family: 'Linotype Kaliber Italic';
font-style: normal;
font-weight: 300;
src: url(../fonts/LinotypeKaliberItalic.ttf)format('truetype');
}
Embed Google Fonts
Inclusion Code
There are 2 basic methods to include google fonts and load the assest from Google
- Standard - Which is used in HTML
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
- @import - Which is used in CSS stylesheets
<style> @import url('https://fonts.googleapis.com/css?family=Open+Sans'); </style>
Code that is included
This is example code that is downloaded from google via the @import or stylesheet inclusion.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff>) format('woff');
}
Declaration / Usage
The usage of the fonts is then very easy. you use the standard CSS declaration as noted below
font-family: 'Open Sans', sans-serif;
giving
body {
font-family: 'Open Sans', sans-serif;
}
Add to Joomlashine Framework List
in the custom.css.php i found the following code. Will it allow me to add a custom font in to the /{template}/uploads/fonts/ directory ?
http://www.joomlashine.com/forum/82-jsn-blank/139055-custom-font-code
/* Declare custom font face for use in <?php echo $section; ?> */
@font-face {
font-family: '<?php echo $name; ?>';
src: url('<?php echo $curDocument->templateUrl . "/uploads/fonts/{$name}.eot"; ?>') format('eot'),
url('<?php echo $curDocument->templateUrl . "/uploads/fonts/{$name}.woff"; ?>') format('woff'),
url('<?php echo $curDocument->templateUrl . "/uploads/fonts/{$name}.ttf"; ?>') format('truetype'),
url('<?php echo $curDocument->templateUrl . "/uploads/fonts/{$name}.svg"; ?>') format('svg');
}
Joomlashine Response
If you want to add google font into your template. You can add google font into plugins/system/jsntplframework/Libraries/joomlashine/form/fields/jsnfont.php
protected $google = array( 'Open Sans', 'Oswald', 'Droid Sans', 'Lato', 'Open Sans Condensed', 'PT Sans', 'Ubuntu', 'PT Sans Narrow', 'Yanone Kaffeesatz', 'Roboto Condensed', 'Source Sans Pro', 'Nunito', 'Francois One', 'Roboto', 'Raleway', 'Arimo', 'Cuprum', 'Play', 'Dosis', 'Abel', 'Droid Serif', 'Arvo', 'Lora', 'Rokkitt', 'PT Serif', 'Bitter', 'Merriweather', 'Vollkorn', 'Cantata One', 'Kreon', 'Josefin Slab', 'Playfair Display', 'Bree Serif', 'Crimson Text', 'Old Standard TT', 'Sanchez', 'Crete Round', 'Cardo', 'Noticia Text', 'Judson', 'Lobster', 'Unkempt', 'Changa One', 'Special Elite', 'Chewy', 'Comfortaa', 'Boogaloo', 'Fredoka One', 'Luckiest Guy', 'Cherry Cream Soda', 'Lobster Two', 'Righteous', 'Squada One', 'Black Ops One', 'Happy Monkey', 'Passion One', 'Nova Square', 'Metamorphous', 'Poiret One', 'Bevan', 'Shadows Into Light', 'The Girl Next Door', 'Coming Soon', 'Dancing Script', 'Pacifico', 'Crafty Girls', 'Calligraffitti', 'Rock Salt', 'Amatic SC', 'Leckerli One', 'Tangerine', 'Reenie Beanie', 'Satisfy', 'Gloria Hallelujah', 'Permanent Marker', 'Covered By Your Grace', 'Walter Turncoat', 'Patrick Hand', 'Schoolbell', 'Indie Flower' );
and plugins/system/jsnframework/assets/joomlashine/js/visualdesignstyle.js
var listFont = {
"Open Sans":"Open Sans", "Oswald":"Oswald", "Droid Sans":"Droid Sans", "Lato":"Lato", "Open Sans Condensed":"Open Sans Condensed", "PT Sans":"PT Sans", "Ubuntu":"Ubuntu", "PT Sans Narrow":"PT Sans Narrow",
"Yanone Kaffeesatz":"Yanone Kaffeesatz", "Roboto Condensed":"Roboto Condensed", "Source Sans Pro":"Source Sans Pro", "Nunito":"Nunito", "Francois One":"Francois One", "Roboto":"Roboto", "Raleway":"Raleway", "Arimo":"Arimo",
"Cuprum":"Cuprum", "Play":"Play", "Dosis":"Dosis", "Abel":"Abel", "Droid Serif":"Droid Serif", "Arvo":"Arvo", "Lora":"Lora", "Rokkitt":"Rokkitt", "PT Serif":"PT Serif", "Bitter":"Bitter", "Merriweather":"Merriweather", "Vollkorn":"Vollkorn",
"Cantata One":"Cantata One", "Kreon":"Kreon", "Josefin Slab":"Josefin Slab", "Playfair Display":"Playfair Display", "Bree Serif":"Bree Serif", "Crimson Text":"Crimson Text", "Old Standard TT":"Old Standard TT", "Sanchez":"Sanchez",
"Crete Round":"Crete Round", "Cardo":"Cardo", "Noticia Text":"Noticia Text", "Judson":"Judson", "Lobster":"Lobster", "Unkempt":"Unkempt", "Changa One":"Changa One", "Special Elite":"Special Elite",
"Chewy":"Chewy", "Comfortaa":"Comfortaa", "Boogaloo":"Boogaloo", "Fredoka One":"Fredoka One", "Luckiest Guy":"Luckiest Guy", "Cherry Cream Soda":"Cherry Cream Soda",
"Lobster Two":"Lobster Two", "Righteous":"Righteous", "Squada One":"Squada One", "Black Ops One":"Black Ops One", "Happy Monkey":"Happy Monkey", "Passion One":"Passion One", "Nova Square":"Nova Square", "Metamorphous":"Metamorphous", "Poiret One":"Poiret One", "Bevan":"Bevan", "Shadows Into Light":"Shadows Into Light", "The Girl Next Door":"The Girl Next Door", "Coming Soon":"Coming Soon",
"Dancing Script":"Dancing Script", "Pacifico":"Pacifico", "Crafty Girls":"Crafty Girls", "Calligraffitti":"Calligraffitti", "Rock Salt":"Rock Salt", "Amatic SC":"Amatic SC", "Leckerli One":"Leckerli One", "Tangerine":"Tangerine", "Reenie Beanie":"Reenie Beanie", "Satisfy":"Satisfy", "Gloria Hallelujah":"Gloria Hallelujah", "Permanent Marker":"Permanent Marker", "Covered By Your Grace":"Covered By Your Grace", "Walter Turncoat":"Walter Turncoat", "Patrick Hand":"Patrick Hand", "Schoolbell":"Schoolbell", "Indie Flower":"Indie Flower"
}
Joomlashine Embed Google Fonts Example
JSN Framework physically alters the file below when you make changes to the font styling in the template admin section, and in particular set a Google font.
You can also use this code to make your own google import CSS without needing the JSN-Framework.
templates/{template name}/css/styles/custom.css
/* Google Custom Font for all of the Site */
/* The @import line of code should be the very first line of LIVE code in your CSS file */
/* Import Google font face for use in heading */
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
/* Import Google font face for use in menu */
@import url(https://fonts.googleapis.com/css?family=Lato);
/* Import Google font face for use in body */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* Set font style for body */
body {
font-family: 'Open Sans', Verdana, Geneva, sans-serif;
font-size: 100%;
}
/* Set font style for heading */
h1,
h2,
h3,
h4,
h5,
h6,
#jsn-gotoplink,
.page-header,
.subheading-category,
.componentheading,
.contentheading {
font-family: 'Ubuntu', Verdana, Geneva, sans-serif;
}
/* Set font style for menu */
body #jsn-menu ul.menu-mainmenu a,
body #jsn-menu ul.menu-mainmenu li a span {
font-family: 'Lato', Verdana, Geneva, sans-serif;
}
Other
These are some useful examples I have used.
/* set font in telephone module */
.telephone-font {
font-family: "Eras ITC", sans-serif;
font-weight: 900;
font-size: 150%;
}