You simply add another @font-face rule: @font-face { font-family: CustomFont; src: url(‘CustomFont.ttf’); } @font-face { font-family: CustomFont2; src: url(‘CustomFont2.ttf’); } If your second font still doesn’t work, make sure you’re spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn’t messing around with a font of the same … Read more
If you want to check for local files first do: @font-face { font-family: ‘Green Sans Web’; src: local(‘Green Web’), local(‘GreenWeb-Regular’), url(‘GreenWeb.ttf’); } There is a more elaborate description of what to do here.
Note, you may also be interested in: Custom web font not working in IE9 Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on IE6-9). @font-face { font-family: ‘Bumble Bee’; src: url(‘bumblebee-webfont.eot’); src: local(‘☺’), url(‘bumblebee-webfont.woff’) format(‘woff’), url(‘bumblebee-webfont.ttf’) format(‘truetype’), url(‘bumblebee-webfont.svg#webfontg8dbVmxj’) format(‘svg’); } @font-face { … Read more
Since nobody mentioned that, I believe this question needs an update. The way I managed to solve the problem was using the “preload” option supported by modern browsers. In case someone does not need to support old browsers. <link rel=”preload” href=”https://stackoverflow.com/questions/4712242/assets/fonts/xxx.woff” as=”font” type=”font/woff” crossorigin> some useful links with more details: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content http://www.bramstein.com/writing/preload-hints-for-web-fonts.html
There’s a working example of this in this project. It boils down to: In your assets/fonts folder, place the desired OTF or TTF font (here MyFont.otf) Create a HTML file that you’ll use for the WebView’s content, inside the assets folder (here inside assets/demo/my_page.html): <html> <head> <style type=”text/css”> @font-face { font-family: MyFont; src: url(“file:///android_asset/fonts/MyFont.otf”) } … Read more
So what you do is… In the font files folder put an htaccess file with the following in it. <FilesMatch “\.(ttf|otf|eot|woff|woff2)$”> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin “*” </IfModule> </FilesMatch> also in your remote CSS file, the font-face declaration needs the full absolute URL of the font-file (not needed in local CSS files): e.g. @font-face { … Read more
Drawing on canvas has to happen and return immediately when you call the fillText method. However, the browser has not yet loaded the font from the network, which is a background task. So it has to fall back to the font it does have available. If you want to make sure the font is available, … Read more
Put the font-family declaration into a body selector: body { font-family: Algerian; } All the elements on your page will inherit this font-family then (unless, of course you override it later).
Since 2017 you have preload MDN: The preload value of the element’s rel attribute allows you to write declarative fetch requests in your HTML , specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser’s main … Read more
I can only explain you how to fix the “CSS3114” error. You have to change the embedding level of your TTF file. Using the appropriate tool you can set it to installable embedding allowed. For a 64-bit version, check @user22600’s answer.