Forbes magazine logo Ranked Best Coding Bootcamps 2023

Adding custom font locally to website in CSS

Altcademy Team wrote on 7 February 2018

I can't seem to add a font to my web page. Am I doing anything incorrectly here?

@font-face { font-family: "Myriad Ultralight"; src: local("Myriad Ultralight"), url("fonts/myriad-set-pro_ultralight.ttf") format("ttf"); } #product-catchphrase { font-family: "Myriad Ultralight", "Garamond"; text-align: center; font-size: 40px; }

Hi Michelle. It looks like there is something wrong with the way you have added the @font-face. I believe you will have to add all of the fonts like so (place it near the top of your CSS file):
/* Font */ @font-face { font-family: "Myriad Set Pro"; src: url("fonts/myriad-set-pro_bold.ttf") format("truetype"); font-weight: 700; } @font-face { font-family: "Myriad Set Pro"; src: url("fonts/myriad-set-pro_semibold.ttf") format("truetype"); font-weight: 600; } @font-face { font-family: "Myriad Set Pro"; src: url("fonts/myriad-set-pro_medium.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: "Myriad Set Pro"; src: url("fonts/myriad-set-pro_text.ttf") format("truetype"); font-weight: 400; } @font-face { font-family: "Myriad Set Pro"; src: url("fonts/myriad-set-pro_thin.ttf") format("truetype"); font-weight: 300; } @font-face { font-family: "Myriad Set Pro"; src: url("fonts/myriad-set-pro_ultralight.ttf") format("truetype"); font-weight: 100; }

When you want to use it, use it like this.
#product-catchphrase { font-family: "Myriad Set Pro" font-size: 100; /* 100 for ultralight */ }

Trusted by

Students and instructors from world-class organizations

Imperial College London
Carnegie Mellon University
City University of Hong Kong
Hack Reactor
Cisco Meraki
University of Oxford
Swift
Bazaarvoice
Waterloo
Uber
AtlanTech
Tumblr
Boston College
Bombardier Aerospace
University of St. Andrews
New York University
Minerva Schools at KGI
Merrill Lynch
Riot Games
JP Morgan
Morgan Stanley
Advanced Placement®
Google
KPMG
The University of Hong Kong
University of Toronto
SCMP
Moat
Zynga
Hello Toby
Deloitte
Goldman Sachs
Yahoo
HSBC
General Assembly
Tesla
McGill University
Microsoft

Join the upcoming Cohort #89

Enroll for May 6th, 2024