I'm trying to edit my vimeo ott site with custom adobe fonts.
I've added the following:
#font-face {
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;;
src: url(https://use.typekit.net/him0mtg.css);
}
.gigantic {
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 50px;
}
but it is not showing up. I've tried adding the stylesheet <link rel="stylesheet" href="https://use.typekit.net/him0mtg.css"> to the top of the custom css box but it keeps auto deleting.
Any help would be so appreciated.
As the TypeKit url is a CSS file, and not a font, you would need to use #import and import it into the top of your existing CSS like this:
#import url('https://use.typekit.net/him0mtg.css');
.gigantic {
font-family: din-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 50px;
}
Related
#font-face {
font-family: 'helvetica_ce_35_thinregular';
src:
url('Font/helvetica_neue_ce_35_thin-webfont.woff2') format('woff2'),
url('Font/helvetica_neue_ce_35_thin-webfont.woff') format('woff');
font-weight: normal;
font-stretch: normal;
font-style: normal;
font-display: swap;
}
html, body {
margin: 0 auto;
color: white;
letter-spacing: 1px;
font-family: "helvetica_ce_35_thinregular", Helvetica, sans-serif;
background-color: #242529;
}
Ok so I'm trying to load Helvetica, whilst my custom font downloads so it doesn't show up as the yucky Times New Roman loading font.
I've tried with and with out font-display as well as font-display: swap and fallback and still no luck!
Additionally I've used:
<link rel="preload" as="font" href="path/to/font" type="font/woff2" crossorigin="anonymous">
I'm tryin' to change font-family in a laravel-mix project, but this code doesn't work.
Any help?
Thanks!!
#font-face {
font-family: Montserrat;
src: url(../font/Montserrat-Bold.ttf);
}
body {
font-family: Montserrat;
}
please try. do with ttc, not ttf. if don't have no ttf, then use online convert tool.
#font-face { font-family: yourFontName; font-weight: normal; src: url('./asset/fonts/meiryo.ttc') format('TTC'); } #font-face { font-family: yourFontName; font-weight: bold; src: url('./asset/fonts/meiryob.ttc') format('TTC'); } body{ font-family: yourFontName; font-size: 25px; }
please check this again. jhon sammie
I have a html form generator like this. In this form generator users only can select a font icon from list. I did like it but I need to add new option that user can add custom font icons and uses it.
For implementing this option I try to do it like The Beginner's Guide to Icon Fonts in WordPress but I encountered a issue.
In downloaded custom icon font files exist a style.css file that I added content of them to my website CSS file (I have one CSS file and I can't add two css file for custom icon file) like this:
#font-face {
font-family: ico1;
src: url('fonts/ico1.eot?411a7m');
src: url('fonts/ico1.eot?411a7m#iefix') format('embedded-opentype'),
url('fonts/ico1.ttf?411a7m') format('truetype'),
url('fonts/ico1.woff?411a7m') format('woff'),
url('fonts/ico1.svg?411a7m#ico1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: ico2;
src: url('fonts/ico2.eot?gz3b2b');
src: url('fonts/ico2.eot?gz3b2b#iefix') format('embedded-opentype'),
url('fonts/ico2.ttf?gz3b2b') format('truetype'),
url('fonts/ico2.woff?gz3b2b') format('woff'),
url('fonts/ico2.svg?gz3b2b#ico2') format('svg');
font-weight: normal;
font-style: normal;
}
i {
font-family: ico2, ico1 !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
If user generates multiple icon fonts with same content ("\e901") like below:
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And uses this html file:
<i class="icon-comprehensive"></i> // First font icon (ico1)
<i class="icon-document-center"></i> // Second font icon (ico2)
Only the first one ("ico1") is applied for both of i tags. I think this issues related to
font-family: ico2, ico1 !important;
Is there any way to do it?
Thanks advance.
I found a solution for you.
i {
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon1{
font-family: ico1 !important;
}
.icon2{
font-family: ico2 !important;
}
.icon-comprehensive:before {
content: "\e901";
}
.icon-document-center:before {
content: "\e901";
}
And in HTML:
<i class="icon1 icon-comprehensive"></i> // First font icon with .icon1 class
<i class="icon2 icon-document-center"></i> // Second font icon with .icon2 class
My file structure
diary:
diary.html
css
diary.css
sources
fonts
EmblemaOne-Regular.woff
My css code is:
#font-face {
font-family: 'EmblemaOne-Regular';
src: url('../sources/fonts/EmblemaOne-Regular.woff') format('woff');
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, h2 {
color: #cc6600;
text-decoration: underline;
}
h1 {
font-family: 'EmblemaOne-Regular', sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
The problem is, that this font didnt apply to my h1 title? Can someone explain, why?
Btw I tried to remove quotes, use double quotes, remove "format", use full internet path. Thank you in advance.
From the start I need to say that I know what I'm trying to do is not "the right way to do it", but the client I'm working for desperately wants THIS specific font.
So, I need to use on a client's website the exact font as VOGUE uses. So I took the .eot & .ttf and uploaded them on my server. Then I added the CSS definitions:
/*fonts fonts for IE*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
/*fonts for other browsers*/
#font-face {
font-family: VogueDidot;
src: url('font/FBDidotL-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "VogueDidot Light";
src: url('font/FBDidotL-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And the CSS for my element is:
.post h1 {
display: block;
height: 100%;
font-family: VogueDidot;
font-size: 55px;
text-transform: uppercase;
overflow: hidden;
line-height: 58px;
}
And, normally, I expected to see everything working like a charm.
But it's not...
Here's how it should look like:
And that's how it looks on my website :
Any ideas?
Looks like the browser is trying to display the font bold and repeating the gray pixels (from the thin lines) next to each other. Try using font-weight: normal (The font-weight:bold is inherited from the h1 element).