Increase/Decrease font size

[randyrie]

@Printninja

Font Awesome is built into Pinegrow.

https://pinegrow.com/docs/guides/font-awesome/index.html

Is there a tutorial that details what this screen does to an existing site when applied? Screens like this make me nervous when I don’t really understand what they’re asking.

Not too worried about the small resize tool since most know about using the finger-pinch on their mobile devices, not? I should learn how to have the resize tool (or any other item I choose) ‘disappear’ when viewed on small viewports. Does someone know where there is a good tutorial/example to how this can be done using PineGrow?

[schpengle]

first

second

have you checked out the Introductory vids and stuff for Pinegrow @randyrie?
mind you the interfaces do change quite a bit so it can be confusing.

so do that .activate, it will ask about activating with javascript as they recommend (which @matjaz doesn’t see the point of) or with CSS.
I don’t know the benefits of either, so went with his advice as it seems less bloat and clicked css.
follow the instructions about Saving file, adding resources etc and go wild and crazy and knock yourself out.

[schpengle]

then…

which means you can do this

which shows you this

go on GO ON!!! CLICK IT to style it…

oh yes, now you are presented with
THIS!

[randyrie]

WOW you’re fast… I updated my post within a minute of locating the manager… do I need both versions of Font Awsome (4 & 5)? And adding the plugin pops up a warning NOT to use non-PG plugins. So how do I proceed from here? (You’re right, the tutorials don’t cover any of their these options clearly. I really don’t want to experiment on an existing site).

[schpengle]

nope. one or the other, they are different. it depends…
which …icons you want to use!

If they are in 4 use that
if in 5… guess what? yep ,use that

or yes ,both, if you are insane and covering your website like a Teenage Girls Icon appreciation fan club with every variation you have ever seen.

have you seen these Randy?

Pinegrow

or grouped in playlists…

Pinegrow

[randyrie]

These icons are neat… now how do I get the font to become an option in the font panel?

[schpengle]

oops sorry I was off doing other things prior to bed. 3am here now I am afraid I’m off.
I shall leave you in the capable hands of other Forum dwellers… Night night

[Printninja]

@randyrie

now how do I get the font to become an option in the font panel?

You don’t. Font-awesome is not structured the same as regular web fonts. That’s why Pinegrow has the special icon options panel. But you can style it with CSS like any other font.

[randyrie]

This is interesting. I removed the " ’ " form the title in the pages where it was used. Wonder if this will make a difference?

[Printninja]

I just tested it without the ’ and it no longer crashes the program.

A good rule is to always be wary of using anything other than regular a to z text and 0 to 9 numerals in file names.

[randyrie]

Definitely good to know… thanks for finding this out.

[randyrie]

So how do I convert the Actor and Acme fonts to Font Awsome so I can test how this font behaves for me? And if it proves to be a superior web font, how do I get it to be the default font for new websites/webpages?

[Printninja]

Randy, you seem to be confused. Font Awesome is a third party icon toolkit. It’s not a “font” in the traditional sense (like Google fonts.) There are no letters. It’s more like a library of vector icons that behave like a font.

https://fontawesome.com/?from=io

The Actor and Acme fonts you are using on your website are part of a online library of fonts served through Google’s CDN. Pinegrow has made it simple to access them through the Pinegrow interface, but you can also go directly to Google to get the embed code for any of their fonts…

Google Fonts

There’s nothing to convert.

Websites display by default either a serif or san serif font (typically Times or Arial) depending on how the browser is configured, unless you declare an alternate font in your CSS. The web uses 15 standard fonts (web safe fonts) that are typically installed on almost all computers…

https://www.w3schools.com/cssref/css_websafe_fonts.asp

Prior to services like Google Fonts, web designers stuck to the 15 web safe fonts, or they had to deliver fonts which had to be downloaded to the users machine in order to display properly on websites. Google Fonts made the web a lot more interesting.

[Thomas]

@randyrie

I really miss my ‘font guy’ since he left the staff - he KNEW fonts!

@randyrie Regarding the FONT stuff, there might be one or two golden rules:

1. If you want a handful of variations, you need to pick up FONTs which are showing all required things within the font-family. This is how a “complete” family might looking like

The Problem on both of your FONTs is, that they don’t have something like “variation” such as bold or italic. The figure is showing this on the example of ACME

This forces browsers to “simulate” semi-bold or bold or italic and may or may not work (proved by @Printninja) .

2. Using all font-styles requires two things: Loading them correctly

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700" rel="stylesheet">

and using them correctly which could look something like this

html {
font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
font-weight: 700;
}

Some additional infos to this can be found here: CSS Property: font | HTML Dog

By default, the i-Tag IS italic, but only when the font-family shares it OR as @Printninja already mentioned if you use default FONTs such as Helvetica (Arial), Georgia (Times).

Cheers

Thomas

[schpengle]

Nicely put Thomas.

and a stupid few words since I can’t simply say that in this forum, as it MUST be over 20 characters.
Tosh!

[randyrie]

Thanks for this, @Thomas. I now know enough how to look for font help and get complete web-font families.

[randyrie]

@Printninja

• Change to a different font. This font (Actor) is simply not rendering well at certain sizes (see attached image). I don’t know why, but my guess is it’s not a well designed webfont. Also, since this is a single weight, single style font, you’re ending up with browser-created faux-italic and faux-bold styles. It’s better to use a font that actually has different weights and a dedicated italic version.
• Same issue with the Acme font. It has no dedicated italic style, so you’re getting the browser’s faux-italic version.

Since the Google font tool does not show how the fonts will actually display (with various font-sizes, styles, variants, or decorations) I’ll never know if it displays properly unless I run around and try it on other devices, browsers and platforms. I can’t believe that ALL the Google fonts available in PineGrow aren’t web ‘safe’?

@Printninja

There’s nothing to convert.

Websites display by default either a serif or san serif font (typically Times or Arial) depending on how the browser is configured, unless you declare an alternate font in your CSS. The web uses 15 standard fonts (web safe fonts) that are typically installed on almost all computers…

So then, is Acme & Actor not properly displaying an issue with your browsers on your platform not properly displaying font alternates - - which is a user issue not a font choice issue by the designer?

Am I on track here?

[schpengle]

just another 20 characters

[randyrie]

UPDATE: @Printninja, @schpengle, @Thomas
I’ve finally gotten the resize tool to disappear on mobile devices. I’m using this CSS:

and using id=“mobileContent” in the resize tool’s div tag.

[schpengle]

Well done! I got this wrong in my attempt as I was falling asleep last time I replied
There is some rhyme and reason in no longer using ID’s but rather using specific class targeting, but hey what the hell. it works.

ie, ID’s can only EVER point to ONE Thing only. Slightly different things or another instance of it, you cant.
So if you ever want to do the same thing to something else…you cant!
you have to create ANOTHER ID tag… for the 2nd thing.

So if you are sure you will NEVER EVER EVER use that style EVER (enough times?) in the future, go ahead and use and ID.

otherwise…well, classes all the way.
I did read up on that somewhere…once…and practice it until I forgot.
either Paul Irish or Chris Coyer I think.

But well done! it works.

Now about all your inline styles…er…you MIGHT…want to move them to an external style sheet.

…really… like yesterday.
ummm… and
your

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

thing… well you know, thats what css is for now, with regards, divs and layout and MARGIN and PADDING and all that goodness.

as you move through this design, start to try and integrate MARGIN and PADDING not your design by using them instead of countless line breaks.

even though its quite often easier for prototyping