I've used a font-family in css, but the font-family doesn't apply on text on the server. I've applyed the font-family as follows:
#font-face {
font-family: "SultanAdan";
font-style: normal;
font-weight: normal;
src: url("/WebsiteFiles/FontsSultanAdanBold.otf")format("opentype"),url("/WebsiteFiles/Fonts/SultanAdanBold.woff") format("woff"),url("/WebsiteFilesFontsSultanAdanBold.ttf")format("truetype"), url("/WebsiteFiles/Fonts/SultanAdanBold.svg")format("svg");
}
This is the method with the deepest support possible right now. The #font-face rule should be added to the stylesheet before any styles.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Then use it to style elements like this:
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Related
I want to host my Google Font locally. I downloaded the files from Google Webfonts Helper and uploaded to public_html/fonts. I added the given code to my theme's style.css (see below).
Then I turned on "Disable Google Fonts" in the Clearfy plugin which actually removes the gstatic and googleapis requests on GTmetrix. However, my local fonts don't show.
Purging cache and server cache doesn't help. I checked the URL of the font location in my browser, it downloads the font, so I assume the path is correct.
Any ideas where the problem could be?
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-300.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* comfortaa-regular - latin */
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 400;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
/* comfortaa-700 - latin */
#font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
src: url('https://myurl.com/fonts/comfortaa-v28-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://myurl.com/fonts/comfortaa-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.woff') format('woff'), /* Modern Browsers */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://myurl.com/fonts/comfortaa-v28-latin-700.svg#Comfortaa') format('svg'); /* Legacy iOS */
}
body{ font-family:"Comfortaa",sans-serif; }
#font-face{
font-family: myriad;
src: url(myriadpro.ttf);
}
Can anyone tell me which extensions are valid for its usage like this?
You can use all font file format like this:
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
I am currently stuck on my AMP site. I have a CSS file just for my AMP site and i set the font-face below for it.
I have to use the something like this because I need to access those font-files from my assets folder.
I am using Rails 5
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src:font-url('poppins-v5-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Poppins Regular'), local('Poppins-Regular'),
font-url('poppins-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
font-url('poppins-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
font-url('poppins-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
font-url('poppins-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
font-url('poppins-v5-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
#font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src:font-url('poppins-v5-latin-700.eot'); /* IE9 Compat Modes */
src: local('Poppins Bold'), local('Poppins-Bold'),
font-url('poppins-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
font-url('poppins-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
font-url('poppins-v5-latin-700.woff') format('woff'), /* Modern Browsers */
font-url('poppins-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
font-url('poppins-v5-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}
Best regards!
Fonts included via #font-face must be fetched via the HTTP or HTTPS scheme.
Source: https://www.ampproject.org/docs/design/responsive/custom_fonts
Via #font-face (no restrictions, all fonts allowed), You should use the full path.
Eg: http://somedomain.org/VeraSeBd.ttf or https://somedomain.org/VeraSeBd.ttf
<style amp-custom>
#font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://somedomain.org/VeraSeBd.ttf");
}
body {
font-family: "Bitstream Vera Serif Bold", serif;
}
</style>
Fonts included via #font-face must be fetched via the HTTP or HTTPS scheme.
On a website that I'm developing I am able to import and display via #font-face my custom font.
It works perfectly on different browsers
In the specific what I did was:
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
The problem is that when I try to import the .ttf and .svg formats the font is not displayed anymore and the Fallback font will be applied.
This is how I imported .svg and .ttf
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'); /* IE9 Compat Modes */
src: url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('assets/fonts/MyCustomFont.woff') format('woff'); /* Pretty Modern Browsers */
src: url('assets/fonts/MyCustomFont.ttf') format('truetype'); /* Safari, Android, iOS */
src: url('assets/fonts/MyCustomFont.svg#svgMyCustomFont') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyCustomFont', sans-serif;
}
How come is this happening?
Is possible to fix it?
Thanks in advance
Put a comma at the end of each line instead of a ";" and only define the source once.
#font-face {
font-family: 'MyCustomFont';
src: url('assets/fonts/MyCustomFont.eot'), /* IE9 Compat Modes */
url('assets/fonts/MyCustomFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('assets/fonts/MyCustomFont.woff') format('woff'), /* Pretty Modern Browsers */
url('assets/fonts/MyCustomFont.ttf') format('truetype'), /* Safari, Android, iOS */
url('assets/fonts/MyCustomFont.svg#svgMyCustomFont') format('svg'); /* Legacy iOS */
}
I am trying to load a custom font from my server but it's not retrieving the font
I am using the following code, can some body tell me the one which i'm using is in correct format.
Code :
#font-face {
font-family: trcustomfont ;
src: url( http://content.sales-accredit.com/BTGOV/Fonts/Knowledge-Regular.otf ) format("opentype");
}
.customfont {
font-family: trcustomfont;
}
You should write like this :-
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Or Read More About how to use custom fonts for our websites.....