- WebFont Proxima Nova
- How to Use
- Reference link
- Centrally managed Typekit webfont
- Notes to consider when using the centrally managed webfont project.
- Managing your own project
- Global settings
- Native Fallback Fonts
- Instructions
- Proxima Nova Bold
- Proxima Nova Bold Italic
- Proxima Nova Regular
- Proxima Nova Italic
- Proxima Nova Extra Condensed Bold Italic
- Proxima Nova Extra Condensed Bold
- Proxima Nova Extra Condensed Italic
- Proxima Nova Extra Condensed Regular
- Proxima Nova Condensed Bold
- Proxima Nova Condensed Bold Italic
- Proxima Nova Condensed Regular
- Proxima Nova Condensed Italic
- Examples in CSS
- Hello World!
- Hello World!
- studiopress / style.css
- Saved searches
- Use saved searches to filter your results more quickly
- elliakou/proxima-nova-web-fonts
- Name already in use
- Sign In Required
- Launching GitHub Desktop
- Launching GitHub Desktop
- Launching Xcode
- Launching Visual Studio Code
- Latest commit
- Git stats
- Files
- README.md
WebFont Proxima Nova
The Proxima Nova font suite is available for official use by University of Arizona employees through a license with Adobe.
If you’re using Arizona Bootstrap, Proxima Nova will still need to be added to your project.
How to Use
The Proxima Nova font suite is available for official use by University of Arizona employees through a license with Adobe Typekit.
Reference link
Arizona Bootstrap uses an Adobe Typekit account with shared governance to manage our font reference links within Arizona Bootstrap.
Put this within your tag above the reference to Arizona Bootstrap.
link href="https://use.typekit.net/emv3zbo.css" rel="stylesheet" crossorigin="anonymous"> link rel="stylesheet" href="https://cdn.digital.arizona.edu/lib/arizona-bootstrap/2.0.24/css/arizona-bootstrap.min.css" crossorigin="anonymous">
Centrally managed Typekit webfont
For ease of integration into web projects around campus, the Arizona Digital team manages a Typekit webfont project that can be referenced by your site.
Notes to consider when using the centrally managed webfont project.
Our license with Typekit allows anyone with a NetID to create their own webfont project in Creative Cloud Typekit and use it in all of their web projects.
Managing your own project
- You can tailor your font project to only include the fonts that your web site or app uses, minimizing the number of assets an end-user has to download.
- Faster page load if your site uses a smaller subset of font variants than what are included in the shared library.
Disadvantages
- You have to manage your own font in Typekit using a NetID.
- If the NetID is tied to one person, it creates a single point of failure if that user leaves the University.
- If the NetID is a shared “test NetID” you have to manage credentials, and sign it up to use Adobe products.
Note If you choose to manage your own web font project, it is strongly recommended that you go through the effort to use a test NetID, which is shared with your department. Note Our license agreement with Adobe does not allow us to self-host font files.
Global settings
Follow these instructions on how to add Proxima Nova to your website.
Native Fallback Fonts
The fallback webfont for Arizona Bootstrap is Calibri. Additional fallbacks follow Bootstrap 4’s use of “native font stack” for optimum text rendering on every device and OS. Read more about native font stacks in this Smashing Magazine article.
$font-family-sans-serif: proxima-nova, calibri, // Safari for macOS and iOS (San Francisco) -apple-system, // Chrome 56 for macOS (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android Roboto, // Basic web fallback "Helvetica Neue", Arial, sans-serif, // Emoji fonts "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
This font-family is applied to the and automatically inherited globally throughout Bootstrap. To switch the global font-family , update $font-family-base and recompile Arizona Bootstrap.
Instructions
The following istructions are for adding specific CSS classes for font weights or styles. If using Arizona Bootstrap, you will most likely not need to do this unless you are trying to use a specific variant. Important
Proxima Nova Bold
.proxima-nova-bold font-family: proxima-nova, sans-serif; font-weight: 700; font-style: normal; >
div class="proxima-nova-bold"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Bold Italic
.proxima-nova-bold-italic font-family: proxima-nova, sans-serif; font-weight: 700; font-style: italic; >
div class="proxima-nova-bold-italic"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Regular
.proxima-nova font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal; >
div class="proxima-nova"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Italic
.proxima-nova-italic font-family: proxima-nova, sans-serif; font-weight: 400; font-style: italic; >
div class="proxima-nova-italic"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Extra Condensed Bold Italic
.proxima-nova-ec-bold-italic font-family: proxima-nova-extra-condensed, sans-serif; font-weight: 700; font-style: italic; >
div class="proxima-nova-ec-bold-italic"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Extra Condensed Bold
.proxima-nova-ec-bold font-family: proxima-nova-extra-condensed, sans-serif; font-weight: 700; font-style: normal; >
div class="proxima-nova-ec-bold"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Extra Condensed Italic
.proxima-nova-ec-italic font-family: proxima-nova, sans-serif; font-weight: 400; font-style: italic; >
div class="proxima-nova-ec-italic"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Extra Condensed Regular
.proxima-nova-ec font-family: proxima-nova-extra-condensed, sans-serif; font-weight: 400; font-style: normal; >
div class="proxima-nova-ec"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Condensed Bold
.proxima-nova-c-bold font-family: proxima-nova-condensed, sans-serif; font-weight: 700; font-style: normal; >
div class="proxima-nova-c-bold"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Condensed Bold Italic
.proxima-nova-c-bold-italic font-family: proxima-nova-condensed, sans-serif; font-weight: 700; font-style: italic; >
div class="proxima-nova-c-bold-italic"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Condensed Regular
.proxima-nova-c font-family: proxima-nova-condensed, sans-serif; font-weight: 400; font-style: normal; >
div class="proxima-nova-c"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Proxima Nova Condensed Italic
.proxima-nova-c-italic font-family: proxima-nova, sans-serif; font-weight: 400; font-style: italic; >
div class="proxima-nova-c-italic"> span class="text-uppercase">abcdefghijklmnopqrstuvwxyzspan> span>abcdefghijklmnopqrstuvwxyzspan> br /> span>0123456789span> br /> span>!@#$%^&span> div>
Examples in CSS
Below are two examples of how you would use the Proxima Nova fonts in your code.
Hello World!
h2 class="pn">Hello World!h2> div class="pn"> em>Hello World!em> div> div class="pn"> strong>Hello World!strong> div> div class="pn"> strong>em>Hello World!em>strong> div>
.pn font-family: proxima-nova-condensed, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; > // Not strictly necessary, since Arizona Bootstrap already sets em> to italic. .pn em font-style: italic; > // Not strictly necessary, since Arizona Bootstrap already sets strong> to bolder. .pn strong font-weight:700; >
Hello World!
h2 class="pn">Hello World!h2> div> em class="pn">Hello World!em> div> div> strong class="pn">Hello World!strong> div> div> strong class="pn">em>Hello World!em>strong> div>
p font-family: proxima-nova-condensed, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; >
studiopress / style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
body background-color : # fff ; color : # 000 ; font-family : ‘proxima-nova’ , sans-serif; font-size : 18 px ; font-size : 1.8 rem ; font-weight : 300 ; line-height : 1.875 ; margin : 0 ; > Proxima Nova Is not a featured font at Google Fonts?
https://fonts.google.com/?query=proxima+novaProxima Nova is premium font. You need to buy the font. This gist is just misleading
You can get it with adobe fonts
Dear sir,
I have tried yours, but only work for regular font, but bold style doesn’t show at all. I hope to see you reply me back as soon as possible. ThanksDear sir,
I have tried yours, but only work for regular font, but bold style doesn’t show at all. I hope to see you reply me back as soon as possible. ThanksDid you fix this issue brother? I am facing same problem! Could you please tell me what to do?
________________________________ From: AnmAsifurRahman ***@***.***> Sent: Wednesday, August 4, 2021 3:26:08 PM To: studiopress ***@***.***> Cc: kirikroem ***@***.***>; Comment ***@***.***> Subject: Re: studiopress/style.css @AnmAsifurRahman commented on this gist.
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
elliakou/proxima-nova-web-fonts
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
#####The package contains 5 variants of the proxima nova web fonts.
- Proxima Nova Thin [ ‘proxima_nova_scosfthin’ OR ‘proxima_nova_ltthin’ ]
- Proxima Nova Regular [ ‘Proxima Nova’ ]
- Proxima Nova Semi-Bold [ ‘proxima_nova_ltsemibold’ ]
- Proxima Nova Bold [ ‘proxima_nova_altbold’ ]
- Proxima Nova Black [ ‘proxima_nova_altblack’ ]
To use the «Proxima Nova Web Fonts» Download the package as a zip file and extract the fonts folder.
- Put the fonts folder anywhere on your server
- In your html file include the fonts.css or fonts.min.css as follows: