Joomla Templates Club 406,261 posts

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#1067278

Hi,

I am trying to change the font on Ja Restaurant with another google font.
Despite the fact that I have read the documentation provided by Google, the documentation regarding implementing Google fonts on T3 Framework. I was unsuccessful.
I have chosen the Philosopher font on google fonts, copy the code an paste it to the assets.xml file.
I had to adapt a bit the path in order to look like this:

<?xml version="1.0" encoding="utf-8"?>
<assets>
    <scripts>
        <file>js/owl-carousel/owl.carousel.js</file>
        <file>js/skrollr.js</file>
        <file>js/script.js</file>
    </scripts>

    <stylesheets>
        <file>fonts/font-awesome/css/font-awesome.min.css</file>

        <file>fonts/ionicons/css/ionicons.min.css</file>
        <file>js/owl-carousel/owl.carousel.css</file>
        <file>js/owl-carousel/owl.theme.css</file>
        <file>//fonts.googleapis.com/css?family=Philosopher+Text:400,400i</file>
        <file>//fonts.googleapis.com/css?family=Teko:300,400,500,600,700</file>
        <file>//fonts.googleapis.com/css?family=Noticia+Text:400,400i,700,700i</file>
        <file>//fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700</file>
    </stylesheets>

</assets>

I have saved, cleared cache, and nothing.
I’ve been to the theme magic and tried to change it from there, but I was unable to see it on the drop down menu.
Please tell me how to change this; it is very frustrating.

Also (I do apologize if I should write another topic; I write another one, if needed) how can I possible change the size of the H1, please?
This is because, if I change the font size on the font on Theme Magic, automatically the size of the H1 will change.
I can have it changed, if I leave the site on ‘developer mode’, but this is not something I should do.
Can you please give me some advice on this.
Is it possible to have control of the H1 on Theme Magic, please?

Thank you very much for your time,

Leonard

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1067446

Hi,

You can change it via LESS file:

Look for the declaration for ‘Typography’:

@font-family-sans-serif:  "Teko", sans-serif;
@font-family-serif:       "Noticia Text", serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-serif;
@font-family-roboto:      "Roboto Mono",sans-serif;

@font-size-base:          16px;
@font-size-large:         ceil(@font-size-base * 1.375); // ~22px
@font-size-small:         ceil(@font-size-base * 0.875); // ~14px

@font-size-h1:            floor(@font-size-base * 3.625); // ~58px
@font-size-h2:            floor(@font-size-base * 2.25); // ~36px
@font-size-h3:            ceil(@font-size-base * 1.375); // ~22px
@font-size-h4:            ceil(@font-size-base * 1.125); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil(@font-size-base * 0.875); // ~14px

You can change the font family base or size of heading tags.

If your site is running with Development Mode (Admin panel > Extensions > Templates > JA Restaurant > General tab), just refresh to see the change.

If the Dev mode is OFF, you need to compile less to css (Remember to backup all current CSS files first)

Hope this helps.

1 user says Thank You to Saguaros for this useful post

1. leonardcraciun

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#1070508

Hi,

Thank you for your response.
I have tried to find ‘typography.less’ on Ja restaurant/less
I have found the file, however, I haven’t found any of the above code to replace.
Could you please tell me where to find the declaration for Typography?
Thank you very much,

Kind regards,

Leonard

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1070720

It should be there, you can share the URL, Admin + FTP account and tell me the font family + H1 size you want to change, I will try to take a look.

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#1070743

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1070878

Hi Leonard,

As I can see that you’re using a custom theme, you can change via file: /local/less/themes/themeredmezestyle/variables-custom.less

I just updated to Philosopher font family, you can backup all current CSS files first, then go to template manager > JA Restaurant (your default template) and compile LESS to CSS.

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#1070901

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1071241

Hi Leonar,

It looks like you miss to provide the password for FTP account.

Also tell me the place you want to apply the new font so I will check.

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#1071273

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1071484

Hi Leonard,

As I still can’t access FTP account with above info so let me take an example of this ‘Turkish traditional cuisine’:

This belongs to JA ACM : slideshow type module, so you can open the file: root/templates/ja_restaurant/acm/slideshow/less/style.less

Look for this declaration:

.slide-content {
      color: @white;
      font-size: @font-size-h1;
      line-height: @font-size-h1;
      font-family: @font-family-sans-serif;
      font-weight: @font-weight-bold;
      text-align: justify;
      text-transform: uppercase;
      position: absolute;
      padding-right: @grid-gutter-width/2;
      padding-left: @grid-gutter-width/2;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);

Here you can see the font-family and font-size property and change to your desired value.

[leonardcraciun Friend leonardcraciunJoin date: April 2011Posts: 88Downloads:20Uploads:34 Thanks: 12]

#1072121

Hi, thank you very much for your response.
The last solution did work! Thank you!
One last question, if you don’t mind, in regards to the same issue. Which file controls the font family of the masthead ‘About Us’, ‘Menu’ (please see the attachment).
I would like also to change that, please.

Thank you very much,

Leonard

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1072521

Yes, you can see this declaration:

.t3-masthead {
  .ja-masthead {
    background-image: url('@{t3-image-path}/masthead-default.jpg');
    background-attachment: fixed;
    background-size: cover;
    &::before {
      .opacity(0.2);
    }

    .ja-masthead-detail {
      padding: (@t3-global-padding * 4 + @navbar-height / 2) 0 @t3-global-padding * 4;
      max-width: none;

      // Mobile view
      @media (max-width: @screen-xs-max) {
        padding: @t3-global-padding;
      }

      // Title
      .ja-masthead-title {
        font-size: @font-size-h1;
        font-weight: @font-weight-bold;
        font-family: @font-family-serif;
        text-transform: uppercase;
        letter-spacing: 4px;
        margin-top: 0;

        // Mobile view
        @media (max-width: @screen-xs-max) {
          font-size: @font-size-h3;
        }
      }

      // Description
      .ja-masthead-description {
        font-size: @t3-font-size-bigger;
        .opacity(0.7);
      }
    }
  }
}

in the file: root/templates/ja_restaurant/less/modules.less

[Author]

Posts