Yahoo Web Search

Search results

1. Top results related to can i deliver gotham using @font-face?

   • Using @font-face slows load time. Can I force the client to cache the font?

     Top Answer

     Answered Jun 24, 2009 · 4 votes

     You can never force a browser to cache something, only encourage it. I can think of no reason why a font file with the correct expires headers wouldn't be cached which brings us to:

     • It's a browser bug (you don't say which browser)
     • Your cache control headers are missing or wrong
     • Your browser is configured to not cache anything (do images cache?)
     • Your font URL is dynamic so the browser thinks each request is for a different resource
     • The font face file is actually missing or or the URL misspelt.
     • The delay is NOT caused by the font download (you did say you presume this is the issue)

     I think more information is in order.

     EDIT: To set cache control is a server and language specific thing. Look at mod_expires for information on caching in Apache.

     Check all answers on Stack Overflow

     1/5

   • I have three font type -Gotham-bold, Gotham-medium, Gotham-thin, so do I need to use three times @font-face?

     Top Answer

     Answered Apr 13, 2018 · 13 votes

     That is correct, you'll need an @font-face for each weight of the font you want to use.

     @font-face { font-family: 'Gotham'; src: url('fonts/Gotham-Bold.eot'); /* IE9 Compat Modes */ src: url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/Gotham-Bold.woff') format('woff'), /* Modern Browsers */ url('fonts/Gotham-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/Gotham-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */ font-weight: 700; font-style: normal; }@font-face { font-family: 'Gotham'; src: url('fonts/Gotham-Medium.eot'); /* IE9 Compat Modes */ src: url('fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/Gotham-Medium.woff') format('woff'), /* Modern Browsers */ url('fonts/Gotham-Medium.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/Gotham-Medium.svg#svgFontName') format('svg'); /* Legacy iOS */ font-weight: 400; font-style: normal; }@font-face { font-family: 'Gotham'; src: url('fonts/Gotham-Thin.eot'); /* IE9 Compat Modes */ src: url('fonts/Gotham-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/Gotham-Thin.woff') format('woff'), /* Modern Browsers */ url('fonts/Gotham-Thin.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/Gotham-Thin.svg#svgFontName') format('svg'); /* Legacy iOS */ font-weight: 300; font-style: normal; }

     Then you can use your fonts as so:

     body { font-family: 'Gotham';}-// For normal.normal { font-weight: 400;}// For bold.bold,strong { font-weight: 700;}// For thin.light { font-weight: 300;}

     Check all answers on Stack Overflow

     2/5

   • Can I merge a font-family in CSS to have more font varians via @font-face?

     Top Answer

     Answered Mar 05, 2013 · 14 votes

     It seems that you can, this is from the W3 Spec:

     These descriptors define the characteristics of a font face and are used in the process of matching styles to specific faces. For a font family defined with several @font-face rules, user agents can either download all faces in the family or use these descriptors to selectively download font faces that match actual styles used in document. The values for these descriptors are the same as those for the corresponding font properties except that relative keywords are not allowed, ‘bolder’ and ‘lighter’. If these descriptors are omitted, default values are assumed.

     Take a look at this example from Google Fonts:

     @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');}@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff');}

     A usage example:

     .will-use-the-first-font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400;}.will-use-the-second-font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600;}.will-use-the-third-font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300;}

     Check all answers on Stack Overflow

     3/5

   • Can't get custom fonts to show using @font-face

     Top Answer

     Answered Apr 09, 2020 · 1 votes

     1- Add to the head section of web page.<link href="//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico" rel="stylesheet" type="text/css"/>

     -2 Using @import CSS directive, put the following line in add to your css file.(http | https)

     @import url(//db.onlinewebfonts.com/c/50f290d070f58bdf56e1cc32e5636174?family=Archistico);-

     -3 Use font-face declaration Fonts.(http | https)

     @font-face {font-family: "Archistico"; src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot"); src: url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.woff") format("woff"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/50f290d070f58bdf56e1cc32e5636174.svg#Archistico") format("svg"); }-

     Let me know if this works for you :) Thanks

     Check all answers on Stack Overflow

     4/5

   • How can I use a custom font in Scratch using CSS and @font-face?

     Top Answer

     Answered May 27, 2023 · 1 votes

     There are two things you must fix for your code to work:

     • You applied the style only to h1, not to textarea. I suggest you add the `textarea selector like so:

     h1, textarea { font-family: JuneBug}

     • In the textarea's style attribute, you already have set the font to Arial. Remove the font-family: Arial, Helvetica, sans-serif; part of the style attribute, else the custom font will not show.

     Check all answers on Stack Overflow

     5/5

   Show moreShow less

2. stackoverflow.com › questions › 15098167html - How can I use @font-face with Gotham-Light font ...

   stackoverflow.com › questions › 15098167

   Feb 26, 2013 · I want to show Gotham-Light on the web with css codding but I can't code. I have two fonts named Gotham-Light.eot, Gotham-Light.ttf. Now How can I use on the browser? Please help me.

3. www.kevinpaxman.com › using-gotham-on-the-webUsing “Gotham” on the Web (an unofficial document) | Kevin's ...

   www.kevinpaxman.com › using-gotham-on-the-web

   • Cached

   Using “Gotham” on the Web (an unofficial document) Recently at work, we’ve started using the font Gotham for most publications. We’re not using it on the web, though. At the moment, that’s largely because there’s a big redesign project in the works, and no one wants to make major changes until that’s finalized.

4. css-tricks.com › one-file-many-options-usingOne File, Many Options: Using Variable Fonts on the Web

   css-tricks.com › one-file-many-options-using

   • Cached

   • Performance
   • Animation
   • One Size Fits All?
   • What Fonts Are available?
   • Using Your Font
   • San Francisco
   • Browser Support

   You might download a variable font in TTF format rather than as a pre-compressed file. You’ll definitely want to convert it into .woff2. Google offer a command line tool predictably named woff2 to make it easy. If you cdinto the folder containing your font while in the command line, you can type: We’ve established that we’ll only need one HTTP requ...

   See full list on css-tricks.com

   Variable fonts also mean that, for the first time, font-weight (and any other axis) can be animated. While adding type animationmay sound like a superfluous embellishment a website can happily survive without, something like adding weight on focus, for example, seems like a natural and intuitive way to denote state to the user. In the past, switchi...

   See full list on css-tricks.com

   While Lab DJR and Decovar are excitingly creative, variable fonts aren’t all about avant-garde experimentalism. Optical sizing should bring a better reading experience to the web. Currently, type on the web is size agnostic; you can change the font-size and it will still look the same. Optical sizing means making size-specific optimizations for a t...

   See full list on css-tricks.com

   This technology is quickly making its way into browsers. Making use of it requires you to find a variable font you actually want to use. Google Fonts Early Access has three available, with many more likely to follow. Adobe is remaking some of the most well-known families (i.e. Minion, Myriad, Acumin) to be variable. The open source fonts Source San...

   See full list on css-tricks.com

   Once you’ve found your font, you need to use @font-faceto include it on your site. We don’t want any browsers to download a font they can’t use. For that reason, we should specify the format inside the @font-face rule. Depending on the file type of your variable font, you can specify woff-variations, woff2-variations, opentype-variations or truetyp...

   See full list on css-tricks.com

   While variable fonts bring performance benefits, “web-safe” system fonts still remain the most performant option because the font is already installed and there is nothing to download. If you want to use a variable font without the need of downloading anything, Apple’s San Francisco, perhaps the prettiest of all system fonts, is also a variable fon...

   See full list on css-tricks.com

   Variable fonts have shipped in Chrome and Safari. They are already in the insider preview version of Edge and behind a flag in Firefox. At the current time, not all parts of the spec are fully implemented by Chrome. Using variable fonts in conjunction with font-style, font-stretch, font-weight and font-optical-sizing does not work in Chrome, so usi...

   See full list on css-tricks.com

5. css-tricks.com › snippets › cssHow To Use @font-face In CSS | CSS-Tricks

   css-tricks.com › snippets › css

   • Cached

   Aug 10, 2009 · The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that are already loaded on a user’s computer, which vary depending on the ...

6. developer.mozilla.org › en-US › docs@font-face - CSS: Cascading Style Sheets | MDN - MDN Web Docs

   developer.mozilla.org › en-US › docs

   • Cached

   Jul 26, 2024 · Determines how a font face is displayed based on whether and when it is downloaded and ready to use. font-family. Specifies a name that will be used as the font face value for font properties. font-stretch. A font-stretch value. Accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; font-style.

7. www.w3schools.com › cssref › css3_pr_font-face_ruleCSS @font-face Rule - W3Schools

   www.w3schools.com › cssref › css3_pr_font-face_rule

   • Cached

   Definition and Usage. With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore. In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

8. People also ask

   Do you use the font Gotham?

   • Recently at work, we’ve started using the font Gotham for most publications. We’re not using it on the web, though. At the moment, that’s largely because there’s a big redesign project in the works, and no one wants to make major changes until that’s finalized.

   Using “Gotham” on the Web (an unofficial document)

   www.kevinpaxman.com/using-gotham-on-the-web/

   See all results for this question

   Can I deliver Gotham using @font-face?

   • Delivering Gotham using @font-face is expressly forbidden. However, it is starting to be installed in many computers across campus, so I thought I could specify it as part of the font stack, and if people had Gotham installed, they would see Gotham, and if not, they’d see Arial (as suggested by the Positioning Guide ).

   Using “Gotham” on the Web (an unofficial document)

   www.kevinpaxman.com/using-gotham-on-the-web/

   See all results for this question

   Can I use a different font-family if a file has a 'Gotham' font?

   • Then you can use your fonts as so: font-family: 'Gotham'; font-weight: 400; font-weight: 700; font-weight: 300; Yes, you need to declare each font-type as a separate @fontface. Each would be a different font-family in that case. Like so: font-family: 'GothamThin'; /* links to all gotham thin files, font-weight/style declaration */

   css - I have three font type -Gotham-bold, Gotham-medium, Gotham-t…

   stackoverflow.com/questions/17836956/i-have-three-font-type-gotham-bold-gotham-medium-gotham-thin-so-do-i-need-to

   See all results for this question

   Are all browsers displaying Gotham?

   • Now all the browsers are displaying Gotham. However, Windows browsers, with the exception of Safari, seem to be synthesizing bold and italic fonts instead of using the correct font variant. For some reason, Safari for Windows is doing terrible anti-aliasing, but it is at least getting the bold and italics right:

   Using “Gotham” on the Web (an unofficial document)

   www.kevinpaxman.com/using-gotham-on-the-web/

   See all results for this question

9. www.digitalocean.com › tutorials › css-font-faceHow To Define Custom Fonts in CSS with @font-face and font ...

   www.digitalocean.com › tutorials › css-font-face

   • Cached

   Sep 16, 2017 · Step 2 — Using the @font-face Rule. In this step, we will apply our downloaded fonts using the @font-face property. Using nano or your preferred text editor, create and open a file called style.css: nano style.css. Add the following content, which will define the @font-face rule with paths to our files: style.css.