Highlighted

Using a new font

New Here ,
Feb 10, 2019

Copy link to clipboard

Copied

Hello! I'm Marc and I don't know how to do something. Recently, I started working at a project on Dreamweaver and for a header I wanted to use a custom font. I've downloaded "Aqua Grotesque" (link - Behance) and I've put it into my project directory. I opened the file ("aqua.ttf") and I installed the font on my PC. In the css file I wrote "font-family: AquaGrotesque" because I went to "Manage fonts" -> "Local Web Fonts" and I've added it to the "Current list of Local Web Fonts" with this name. What should I do to apply the font to my header? Thanks a lot!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Custom fonts won't work unless the end user has the font installed on their system.  For best results, use web safe fonts that are common on most Windows & Macs.

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

For special situations, you may look at custom web fonts hosted on Google Fonts, Adobe Fonts (formerly Typekit) or Adobe Edge Fonts.   To use custom web fonts, you need to obtain the code from the respective website and paste it into the <head> of your documents. 

Below an example with a Google Web Font.

Google Fonts

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Google Web Font</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

<style>

h1 {

font-family: 'Kaushan Script', cursive, fantasy;

font-size: 4.50vw

}

p {

font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

font-size: 3vw;

}

</style>

</head>

<body>

<h1>This is a custom web font hostted on Google.</h1>

<p>This is a web safe font-family.   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis excepturi sint, tempore asperiores debitis. Inventore aliquam iure autem veniam quisquam, voluptatem nihil tenetur ducimus explicabo dolore voluptatibus molestiae doloribus voluptate.</p>

</body>

</html>

TOPICS
Create menus in Dreamweaver, Create Slideshows in Dreamweaver, Learn Dreamweaver

Views

808

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Using a new font

New Here ,
Feb 10, 2019

Copy link to clipboard

Copied

Hello! I'm Marc and I don't know how to do something. Recently, I started working at a project on Dreamweaver and for a header I wanted to use a custom font. I've downloaded "Aqua Grotesque" (link - Behance) and I've put it into my project directory. I opened the file ("aqua.ttf") and I installed the font on my PC. In the css file I wrote "font-family: AquaGrotesque" because I went to "Manage fonts" -> "Local Web Fonts" and I've added it to the "Current list of Local Web Fonts" with this name. What should I do to apply the font to my header? Thanks a lot!

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Custom fonts won't work unless the end user has the font installed on their system.  For best results, use web safe fonts that are common on most Windows & Macs.

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

For special situations, you may look at custom web fonts hosted on Google Fonts, Adobe Fonts (formerly Typekit) or Adobe Edge Fonts.   To use custom web fonts, you need to obtain the code from the respective website and paste it into the <head> of your documents. 

Below an example with a Google Web Font.

Google Fonts

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Google Web Font</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

<style>

h1 {

font-family: 'Kaushan Script', cursive, fantasy;

font-size: 4.50vw

}

p {

font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

font-size: 3vw;

}

</style>

</head>

<body>

<h1>This is a custom web font hostted on Google.</h1>

<p>This is a web safe font-family.   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis excepturi sint, tempore asperiores debitis. Inventore aliquam iure autem veniam quisquam, voluptatem nihil tenetur ducimus explicabo dolore voluptatibus molestiae doloribus voluptate.</p>

</body>

</html>

TOPICS
Create menus in Dreamweaver, Create Slideshows in Dreamweaver, Learn Dreamweaver

Views

809

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 10, 2019 0
Adobe Community Professional ,
Feb 10, 2019

Copy link to clipboard

Copied

Custom fonts won't work unless the end user has the font installed on their system.  For best results, use web safe fonts that are common on most Windows & Macs.

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

For special situations, you may look at custom web fonts hosted on Google Fonts, Adobe Fonts (formerly Typekit) or Adobe Edge Fonts.   To use custom web fonts, you need to obtain the code from the respective website and paste it into the <head> of your documents. 

Below an example with a Google Web Font.

Google Fonts

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Google Web Font</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

<style>

h1 {

font-family: 'Kaushan Script', cursive, fantasy;

font-size: 4.50vw

}

p {

font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";

font-size: 3vw;

}

</style>

</head>

<body>

<h1>This is a custom web font hostted on Google.</h1>

<p>This is a web safe font-family.   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis excepturi sint, tempore asperiores debitis. Inventore aliquam iure autem veniam quisquam, voluptatem nihil tenetur ducimus explicabo dolore voluptatibus molestiae doloribus voluptate.</p>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2019 2
New Here ,
Feb 11, 2019

Copy link to clipboard

Copied

Thank you very much! This is the right answer I've been looking for. It really helped me to solve the problem. Thank you again!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2019 0
New Here ,
Sep 27, 2019

Copy link to clipboard

Copied

Thank you for such an update. I also looked for some ways to implement new fonts. From my side can recommend you to use this font https://fontsly.com/fancy/eroded/4990810-font. It can have a nice look in your headings

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2019 0