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.
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; }
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 have developed a small engine that produces PDFs using wkhtmltopdf.
While working on my PC (Fedora 24) the generated PDF looked ok. After installing the software on a test server (CentOS 7), I found that the generated PDFs are slightly different.
I'm using a standalone (not installed via package manager) version of the tool. More precisely I'm using version wkhtmltopdf 0.12.3 (with patched qt)
After some investigation I noticed that the PDFs produced on my system contained these fonts:
Instead the PDF generated on the server contains these:
In the CSS I'm using these fonts for the whole document:
/* open-sans-300 - latin */
#font-face {
font-family: 'Open-Sans-Light';
font-style: normal;
font-weight: 300;
src: url('../fonts/open-sans-v13-latin-300.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../fonts/open-sans-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
#font-face {
font-family: 'Open-Sans-Regular';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans'), local('OpenSans'),
url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
#font-face {
font-family: 'Open-Sans-Light-Italic';
font-style: italic;
font-weight: 300;
src: url('../fonts/open-sans-v13-latin-300italic.eot'); /* IE9 Compat Modes */
src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'),
url('../fonts/open-sans-v13-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-300italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
#font-face {
font-family: 'Open-Sans-Bold';
font-style: normal;
font-weight: 700;
src: url('../fonts/open-sans-v13-latin-700.eot'); /* IE9 Compat Modes */
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('../fonts/open-sans-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v13-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v13-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
So why is wkhtmltopdf embedding extra fonts?
How can I make sure that wkhtmltopdf uses Open Sans only and that I can obtain the same PDF no matter which system I run the software on?
Right now it seems to pick randomly fonts it finds available in the system, besides the ones I specified :|
On Windows I had the opposite: on the development machine fonts were embedded in the PDF just fine, but on other machines (For example the production server) fonts were missing and not embedded.
I investigated the log files and all fonts were properly downloaded from the machine as expected when a PDF was generated.
As last resort I installed all fonts on the system of the server (via control panel). This resolved the issue....
I think this has to do with a difference in the fonts installed on the system.
I'm having trouble getting a font to display in Google Chrome (Version 51.0.2704.106 (64-bit))
Safari and Firefox work fine.
Here is the code I am using as an example.
#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 */
font-weight: normal;
font-style: normal;
}
I have converted the font to woff2 on multiple sites. What might the problem be?
I recently had browser issues implementing #font-face on a website. Here were some of the solutions that worked:
Try using "" instead of '' for the url and format
Try not calling .svg last
Try specifying font-weight and font-style for each #font-face reference
Did you correctly reference the font-family later in the CSS?
With all the above changes, your code might look 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.svg#svgFontName") format("svg"); /* Legacy iOS */
url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
url("webfont.ttf") format("truetype") /* Safari, Android, iOS */
font-weight: normal;
font-style: normal;
}
Later on in the stylesheet:
body {
font-family: "MyWebFont";
}
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;
}