Using a new font

Report · Feb 10, 2019

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!

Report · Feb 10, 2019

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.

===========

MODERATOR'S UPDATE: 2/27/2022

Effective July 2022, Adobe Edge Fonts will be discontinued.

Please switch over to Adobe Fonts or other suitable font replacement.

==========

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>

<head>

<title>Google Web Font</title>

<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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 11, 2019

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!

Report · Sep 27, 2019

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

Adobe Community

Using a new font

1 Correct answer