Post by pwood » Sat Jun 22, 2013 11:16 pm

So I have this custom font that I want to use for my site. Anyone know how to implement it in opencart?

Thank You!

Active Member

Posts

Joined
Tue May 07, 2013 7:58 pm

Post by george_o » Mon Jun 24, 2013 1:12 pm

Add this code to your header.tpl, before "<body>":

Code: Select all

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=YOUR-FONT-NAME">
.
Then, in styleshett.css, asign font-family to your elements.

dropbox.com - 2GB free online storage.


User avatar
New member

Posts

Joined
Sun Jan 15, 2012 2:28 am

Post by labeshops » Mon Jun 24, 2013 7:03 pm

How custom is the font? If it is one created by/for you and only you have, the only way you can use it is in images since no one viewing your site will have that font and be able to see it. If it is a different font that is on most peoples computers (ie comes with windows), then you can specify it as given above.

Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by Xyph3r » Mon Jun 24, 2013 8:04 pm

Code: Select all

@font-face {
	font-family: yourfont;
	src: url('yourfonturol/yourfont.ttf');
}
have you tried this?

ImageImageImage
Opencart Templates, Modules, Themes & Custom Development | ShopThemer


User avatar
Active Member

Posts

Joined
Sun Feb 10, 2013 1:08 am


Post by dmsims » Mon Jun 24, 2013 9:26 pm

Xyph3r wrote:

Code: Select all

@font-face {
	font-family: yourfont;
	src: url('yourfonturol/yourfont.ttf');
}
have you tried this?
In addition to what other have said - you can do it - you need to make sure you cater for all devices

Using DJGross as an example

font-family: 'DJGrossNormal';
src: url('DJGROSS-webfont.eot');
src: url('DJGROSS-webfont.eot?#iefix') format('embedded-opentype'),
url('DJGROSS-webfont.woff') format('woff'),
url('DJGROSS-webfont.ttf') format('truetype'),
url('DJGROSS-webfont.svg#DJGrossNormal') format('svg');
font-weight: normal;
font-style: normal;

Font squirrel is a good resource

Active Member

Posts

Joined
Sat Apr 13, 2013 6:05 pm

Post by butte » Tue Jun 25, 2013 5:54 am

Okay, let's say you have these:

(1) Your own latest-version .ttf of your own specially tweaked and dearly held LesNessmanRedWigglers1.ttf but browser settings might prevent its being displayed and some older operating systems won't run the newer .ttf anyway;

(2) Fallback to on-line but older version .ttf of original LesNessmanRedWigglers2.ttf but notwithstanding browser settings the wkrp server is usually down because Johnny and Venus spend too much time visiting Jennifer out front, and some newer operating systems won't run the older .ttf anyway;

(3) Preference that people see SOMETHING legible that they will probably but not necessarily have on their own machines, and that probably shipped with their operating systems but owing to personal preferences they may have uninstalled, and some operating sytems won't run any .ttf anyway.

You then need to define some of the fonts (not all) and specify your preferred sequence for
"style='color:#000000; font-family:LesNessmanRedWigglers1,LesNessmanRedWigglers2,TimesNewRoman,Times,serif;'"
or similarly several other fonts ending the train with ",non-serif;' " so that probably all comers will load at least A font.

We cannot control the availability or lack of fonts on the web or in all machines, but we can spell out the sequence of our choices for dealing with the inevitability that even TimesNewRoman and Arial are not everywhere on the electronic planet.

Guru Member

Posts

Joined
Wed Mar 20, 2013 6:58 am

Post by pwood » Thu Aug 22, 2013 7:09 pm

Xyph3r wrote:

Code: Select all

@font-face {
	font-family: yourfont;
	src: url('yourfonturol/yourfont.ttf');
}
have you tried this?
Yes this method works great!
Thank You.

Active Member

Posts

Joined
Tue May 07, 2013 7:58 pm

Post by butte » Thu Aug 22, 2013 11:46 pm

Check it on another machine that doesn't have the font, pwood. You can see it. If it is on-line (G. or anywhere) it will be visible unless its own server is down or slowed by traffic. If it is neither on a user's machine nor accessible elsewhere, it won't show. You want visitors to see something readable even if it is not your first choice. That is the reason for font-family fallbacks through a series of fonts that you can list in decreasing order of your own preference ending in the generic default serif or sans-serif that every machine will have -- a readable traditional font, whichever it happens to be.

Guru Member

Posts

Joined
Wed Mar 20, 2013 6:58 am

Post by fernandozi » Fri Aug 23, 2013 8:20 am

I did not know that I could change the font so easily. And what about changing the font inside the admin? Could I make it more beautiful to my client or it's not possible? Should I just copy/paste the Google Fonts resource?

Faço criação de site e loja virtual


Newbie

Posts

Joined
Fri Aug 23, 2013 8:12 am


Post by butte » Sat Aug 24, 2013 12:01 am

As with Xyph3r's code above, it isn't in admin, it's in files that call the fonts. Those will generally be .css and .tpl files.

If you want your client to see "beautiful" then be sure that "beautiful" is either accessible on-line (such as a G.F. URL) or loaded on your client's computer. The fallbacks work if the URL (G.F. or anything else) is inaccessible or if the client doesn't have the font.

The web does not yet have "embedded fonts" but that is being worked on. Embedding fonts involves not only the technology to do it, but the intellectual property rights in fonts (and those are not at all trivial).

Guru Member

Posts

Joined
Wed Mar 20, 2013 6:58 am

Post by nikosmarinidis » Thu Jan 18, 2018 4:49 pm

Where I must place this code to add a new font in my site ???

Code: Select all

@font-face {
	font-family: yourfont;
	src: url('yourfonturol/yourfont.ttf');
}


Posts

Joined
Tue Sep 12, 2017 4:26 pm

Post by nikosmarinidis » Thu Jan 18, 2018 6:41 pm

Xyph3r wrote:
Mon Jun 24, 2013 8:04 pm

Code: Select all

@font-face {
	font-family: yourfont;
	src: url('yourfonturol/yourfont.ttf');
}
have you tried this?
Where I must place this code to add a new font in my site ???


Posts

Joined
Tue Sep 12, 2017 4:26 pm
Who is online

Users browsing this forum: No registered users and 30 guests