google fonts

How can add and use Google fonts on dolphin.

Thank you

Add the font to your CSS file. If your are pulling a font off google you will need to add:

*        @Import Fonts & CSS       *
************************************/
@import url('https://fonts.googleapis.com/css?family=Bungee+Inline|Berkshire+Swash');
@import url(https://fonts.googleapis.com/css?family=Chewy|Metal+Mania|Oregano);
@import url('https://fonts.googleapis.com/css?family=Passion+One|Permanent+Marker|Philosopher|Yantramanav');
@import url(https://fonts.googleapis.com/css?family=Lobster);

Then when you call a font:

.disignBoxFirst .boxFirstHeader .dbTitle {
    font-family: Chewy;

}

Here is a good link to learn about them:

https://www.w3schools.com/css/css_font.asp

I suggest any fonts you want to add to your site that you store them locally on your server.  What do you think would happen if google removed the fonts; and yes, google has been known for removing things.  The answer is that your font disappears and is replaced by one of the base fonts such as arial.

 If I wish to get those in dolphin templates (select font type), where should I keep them?

 You can read how to do that here:

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Geek_Girl is right about Google. Plus if you want to use a bunch of different kinds of fonts for different parts of your site. Pulling them from google will slow down your site. It is always best to pull them locally. The down fall from that is that all browsers can not read all font types that you may wish to use.

The main poster was asking how to use Google fonts.

I'm raising this because I'm a bit out of touch and an answer may also help me.

In the olden days, a font would only render correctly if the end user already had the same font stored on their computer. Most operating systems install a limited number of fonts; Times, Arial (Swiss), Comic Sans, Courier and a few others and these are commonly called "Safe Fonts". If a webmaster chooses to design a site using non-safe fonts, there's no guarantee the end user will see the page properly because their browser could use a "safe" substitute if the font isn't already available on their computer. Therefore University Roman or Old English may end up looking like Courier or Times.

Google found a solution to this problem by developing Google Fonts, but as far as I know and as @TruckingSpace suggests, these fonts probably need to be downloaded so that the end-user's browser can render them. This could indeed slow your site down and place an additional burden on the server.

I can't see that storing the fonts on a server would make any difference, but I stand corrected. As far as I can figure out, the fonts still need to be downloaded for the end user to get an exact reproduction of the site unless he or she already has the fonts loaded on their computer. In the case of exotic fonts, that could be unlikely.

I'd love to use the "Technical" font for my site, but I'm not prepared to do so for the sake of speed and delivery. Also, people react to fonts differently. Some can read exotic fonts okay and some can't. That's why the publishing industry has used the same fonts for almost 200 years.

But my question to @geekgirl is: Will the end user be able to view the page correctly if XXX font is stored on the server, but not on his or her computer? Or, does Dolphin automatically download the font?

There are plenty of tutorials on using web fonts.  There are several web formats so when I include a font, I included the main ones to make sure that it will be rendered correctly for different browsers.  As for Google fonts, I suggest you avoid them; Google is no one's friend and you can probably find the fonts to store on your site.  Just create a directory (folder) in the Dolphin root "fonts"; without the double quotes of course; and store your fonts there.  I am not going to go into the whole method of doing it because there are plenty of tutorials on the net and I would just be repeating those.

With CSS3, you can include a font that has to first be downloaded to the user's browser so the font can be rendered.  On slow connections you will first see the text in the standard fonts and then replaced when the downloaded font has been downloaded by the user's browser.  On fast connections you won't see any time lag.

My users wanted different fonts so I added several; with some you will want to be able to add more font sizes to the font size selector in TinyMCE; there are tutorials on the net for this as well.  There is also a converter; free, that will convert regular TTF fonts to web ready fonts for you to use.  Just search for web font converter and you will find some.

I have both, the font file,and embd code

which is

Embed Font

To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document.

Specify in CSS

Use the following CSS rules to specify these families:

Take a look at this website, it explains both linking to a font file that is remote and having the fonts local on your server.

http://www.zingdesign.com/how-to-install-custom-web-fonts-on-your-website/