Font not rendering properly / font-face not working? - css

I hope I'm asking this question in the right place,
I'm working on a website for a friend, here's the site hosted on my goDaddy acc:
http://www.andkensol.com/rowanWeb/
And here it is on my friends:
http://www.rowanmoore.org/
You can see the clear difference in the title font. If you inspect them you'll see they are both using CODE. I personally uploaded all the files myself and the file structure, layout, file paths are all identical yet the font won't render on my friends site.
I downloaded the font from font squirrel and I'm using #font face to implement it in both sites.
CSS
#font-face {
font-family: CODE;
src: url('font/CODE Light.otf');
}
#nameTitle{
font-size:60px;
font-family:CODE;
color:white;
font-weight:400;
margin-bottom:-3%;
}
The 'font folder' is in the same folder as the stylesheet and CODE Light.otf is in the font folder.
Ive deleted the site from my friends server, downloaded it from mine and then uploaded it to my friends and still no luck.
Could this be a problem on goDaddy's end perhaps?

I recommend you to use some webgenerator to generate css file with different formats of font.
I think your problem is wrong #font-face.
#font-face {
font-family: 'nfs';
src: url('yourFont.eot');
src: url('yourFont.eot?#iefix') format('embedded-opentype'),
url('yourFont.woff') format('woff'),
url('yourFont.ttf') format('truetype'),
url('yourFont.svg#yourFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Diffrenet browser need other format to render and open font.
I'm using mostly those three webfont generators
http://onlinefontconverter.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://convertfonts.com/
But there is more, type to uncle google "font generator"
EDIT: i think blank space in your font/CODE Light.otf is the problem try to use for example something like this font/CODE_Light.otf

I guess it's a matter of access rights of your folders/files.
Something like 644 would be necessary for a file to be able to access the font from the outside web (the last 4 => read access for public). You can either use chmod on the console or change the rights in your ftp-client.
Also, you should support more than otf, or you will most likely lock out a significant amount of Internet Explorer Users.

Related

#font-face only working if the font is installed on the local machine

I am trying to use a custom font, which is not available via Google Fonts. I unzipped the font and put it into src/assets/fonts of my React project.
In my index.css I am loading the font like:
#font-face {
font-family: 'LemonMilk';
src: local('LemonMilk'), url(./assets/fonts/LemonMilk.otf) format('otf');
}
I tested the app both on the localhost and hosted it on the web for testing and it is working fine, since the font is installed locally on my machine, but if I open the app on a different machine it is not working. I also deleted the font from my machine and the fallback font started to show since then. What am I missing ? Thank you
It's looking like Your browser has a problem with understanding the font file. Try to make the webfont package from the font file. There is lot of tools to approach it:
https://www.fontsquirrel.com/tools/webfont-generator
Webfont package will contain the font in all major supported formats and will generate the css #font directive for You.
DISCLAIMER: Ensure that You have the rights to use the font.
well i suggest creating a different css file for your fonts then import it to your main css also this site generate font-face for your font with css file!
The correct font name is Lemon/Milk and you'll need to convert it to other format like WOFF WOFF2 as well.
Please Follow this:
Go the this Website free online font generator
Upload your font and check TTF, EOT, WOFF, WOFF2 (See browser support)
Click Convert > Download
Upload the newly converted fonts to your server
Finally your CSS should look like similar to this.
#font-face {
font-family: 'Lemon/Milk';
src: url('LemonMilkbold.eot');
src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
url('LemonMilkbold.woff2') format('woff2'),
url('LemonMilkbold.woff') format('woff'),
url('LemonMilkbold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
Please Note that you'll need to convert any other font weight too. and don't forget to add the correct path

How can I force my website to use a Google font instead of a locally one with the same name?

I'm using for a website the font Oxygen via GoogleFont. However, for webdesign purpose, I downloaded in my computer the Oxygen font via FontSquirrel.
Apparently it's the same, but it looks different and I have size issues. So I was thinking:
Is there a way to declare "I want to use the GoogleFont font and not the font stored in the computer even if it has the same name"?
Because if someone has a totally different font with the same name, there could be a lot of display problems.
EDIT: What about downloading the font on Google's server and hosting it on my website? (The font is 100% free for commercial use.) But why do a lot of websites use Google Fonts if it could be that simple?
If you have the web fonts you could host yourself and give them any name you want in the css and avoid the potential of the local font loading.
For example:
#font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
url('oxygen-webfont.woff2') format('woff2'),
url('oxygen-webfont.woff') format('woff'),
url('oxygen-webfont.ttf') format('truetype'),
url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}
Just make sure you're pointing the CSS to the correct path for those files (e.g. if you put them in a fonts folder it'd could be "../fonts/oxygen-webfont")
The main reason people use google is they've optimized it for serving fonts, it takes load off your server, and potentially people have the font cached from google making it load faster. If it's an uncommon font and your server is decent these may negligible.

Browser not using the right font on certain server

I have some css like this:
font-family: "Open Sans Condensed",sans-serif;
And I'm having a hard time understanding how the displayed font is chosen. I always thought that the browser checks if the client has the first font installed, and if not, it uses the next font in the list. But now I've run into an issue where in my local and testing environments, using Firefox, the first font is used, but in production, using the the same browser on the same machine, the second font is chosen.
Why does the website use one font on one server and the other on a different server?
Is there any way to make it use the same font on all servers without #font-face?
Figured it out...
This line was importing the font from Google:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
On the production server, they've decided to disallow all external requests like this, so it can't load the font. That's not the case on our other servers...
So I donwloaded the font from Google, generated webfonts at http://www.fontsquirrel.com/tools/webfont-generator, and then added the following css:
#font-face {
font-family: 'Open Sans Condensed';
src: url('../fonts/opensans-condbold-webfont.eot');
src: url('../fonts/opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/opensans-condbold-webfont.woff2') format('woff2'),
url('../fonts/opensans-condbold-webfont.woff') format('woff'),
url('../fonts/opensans-condbold-webfont.ttf') format('truetype'),
url('../fonts/opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}
Why not to use #font-face? It is well supported and invented to avoid this kind of problems. Please remember that for security reasons, does not work for subdomains in FF.
Might have to do with the way the browser looks for the fonts in a local server vs live server. I had an issue before with naming a font "Open Sans Condensed" vs "OpenSans-Condensed" (it was a different font, but followed the same rule) which was the font filename. So maybe you could find the filename and add it to your 'font-family' tag.

Using #font-face in tumblr not working with RTL script

I am trying to embed a font file to my tumblr blog using #font-face and Font Squirrel kit, but so far I had no luck. I also used base64 encoding for embedding the font, but neither in Safari nor Firefox I cannot get it to work.
Edit: Uploading files and using them to tumblr's static area works in Safari and for Latin script. The font I am trying to use includes characters from Old Turkic script, and I cannot get these to work. Any advice regarding the complex scripts would be appreciated.
My code is below:
#font-face {
font-family: 'orkunregular';
src: url('http://static.tumblr.com/gaobkbe/d1rn63eux/orkun-regular-webfont.eot');
}
#font-face {
font-family: 'orkunregular';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAACQkABMAAAAASQAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcah97HkdERUYAAAHEAAAAHQAAACAAZwAER1BPUwAAAeQAAAc/AAAK7JAC0rBHU1VCAAAJJAAAACwAAAAwqfy0D09TLzIAAAlQAAAARAAAAGCL8qu/Y21hcAAACZQAAACnAAABmkwoBDZjdnQgAAAKPAAAABYAAAAWCF4DemZwZ20AAApUAAABsQAAAmVTtC+nZ2FzcAAADAgAAAAIAAAACP//AANnbHlmAAAMEAAACxkAAA/089jpb2hlYWQAABcsAAAALwAAADYG+X9/aGhlYQAAF1wAAAAgAAAAJA8qBwJobXR4AAAXfAAAAKoAAADotUgQRGxvY2EAABgoAAAAYQAAAHaV/pI6bWF4cAAAGIwAAAAgAAAAIAFVAL9uYW1lAAAYrAAACoAAACSgltp96XBvc3QAACMsAAAAvgAAAUAeWyOJcHJlcAAAI+wAAAAuAAAALrDyKxR3ZWJmAAAkHAAAAAYAAAAG6o9TgAAAAAEAAAAAzD2izwAAAADOOz1AAAAAAM+mmw542mNgZGBg4ANiCQYQYGJgBEJLIGYB8xgABr0AbAAAAHjaTZZvSJvnGsavpDYmMWrU+Cf+ica4DAmuK0VK8HhyEAkiIiIiIkVEnKd0dOKGDD+UUmSM4WCMQRlFpJRSZJQxRpEiRZDh6UaRIZ2UfRiHUvZtH0rZh8NMnuf8nvfNgfNBYvLez3Vf93Vfz32/CkiK6l39XcHR4sSM6v754Xvvq11V/C5r5Z7///+B99/78AOF3X/eX5WC3mdYgejnXmSvJvVLoDewHLgXeB0cCT46Fz03d26vKlb1QdUv50fOL5//1/nXofbQYmgn9GN1e/U/qheqH1a/Cf8tfDv8n8hs5MfoO1UxpcF8paC5o5Buqtr8qXD5uSL2bdVoU7HSkmrPVlTH83p+j5tnaihfVGNpXk3lfiVK02ouzaqlNKRW/m8rzShZuqJ2Pjv4vdMcq4uzqfJf6i5dU4/JKF0qwv2uMuD0lY6VBbdJAZNT0L5QyH6kGrtPxlbVa4KMY2owy2rUkprsslrsPbVqRG1aVtKeqkOL6ta4ejSljIaUdWeo6SJIj1DrgiIaUK09UYPmQSmCMqkWfm/VZVDG6cEYKAV12iNQxkGZJ3PAbFYQhkAYAuEQhEUQ8iBMKQFqG7+389mhYU4/q3BYctWUo5zeUdTeUq15S3XlE/SLUk2Qag5ByKvF/FutnOq0D9VlR5WygyAU1EtVGV1Tn72JNlEyBcwCaNugbYAWQ5tx1fMXN2HQPgFtELQV0J6Cdh/Fi0qZEXVTdQ/ceu1zEK+CuK4s5zrx0gCIP1HdNNVNgZxTjOhaG1SdXVW9LSoOpwY0aYRfk3mqhP1SzfZrOjBPpj210Yl2+7067AFZc9RwnRqGyJpX2tJfXSfjmLJgNSuAGkH4h2xUYTJH7A/0OYrSg2Q6RtdJ6uinM3k6M4S20/R3E32n0DdHhgNqmQH5Z2VgkuUcOp+9AnGTOgapYxDE76nhCIWSqFOA/wWQx0B+C/5HcL/h9byDbK5jXcT7PS+SNXDWBcc1hcyOwua+IuYeiEkUwf1aA3EKxIcgzqFIXgnzG4qEQFyAawKuo76TzGX12CdwfQLXL+C65hQwUrD8h0LlXVWTO8z3iNlQjXmtWPl3eD8l0y5qXCNDgftVgPMz0ItKmjR859H2CNQkqIPqo942nNYN5wk43/RR+R7BLx6qu0d2xXed3fJR8UzCfKFm81MF+U8498O5CvSv4X2DDA/wzAuyrCoJ72nmwzC838AZv5g5/PKcDJcUw2m1JoQbh+F9wA1Zg/dneHYYRxZAX4f3IW58W93EODemzRDoJ8qYNfWBl+X3DgVK13HlON08opurdHOVLFOo0kg3P8KRC9TRj9+3ceQpdbxBncfof0BXW3HkEY48hq/zyiSdFW6coKZl6jmiw+u4cRE3LrgZenYP1U5QzdDhKbrr+N+B3yzdGna6ltaIWIKP0HUcz97Cs7fgNM+JAtrOwI2bTUw9OsXtgOeNTrrTRY6UvULuUfTcIf88FRfQ81s4rMCB2uCwDXqi4t1LoK6CuI2GC94sSqFxD9PMRd6FyyFs/yBqnNwPiDwl5xMinYMXwD7lZODsEyI/BTcH410Y73JiiRM3ODEN09ucmuHUmLpQqoepkCY+Q7f7nFN5zuw7uwPKASgb1P4CJLcRTkD6DqQDkH4mKg/SdyDtgFIEZR/l8pW6gpxwtdXYq5w4JPoS0ftE3yWanvOduXZ2n6gtFBhGgWG0HeLEEY76lp5ncNUbxcuvvJ532hhz7TFO+h1d2Vug9rpZwBT3+kpsBMQdv6/MsRo7S+5HsGVveZNxn9xLqvaifC1nYTbC0894cgVWI94m2uKp68tFEHNEjcGoAJuPUXiVWzTlbYAW8wCfsO/MDW7+BTw8WtkCzBM4ZL34AHMiVEZDTkV4UkP/a5l/dUTGUaNBbkKxTel+G59J5rY/Rxbx0SlobhoEyiNwusXpTc919eSPex3v52mO086zOU7mOTng7ZQULuxGoR781We/obdwxtfyu+NmHNERqqxhStahe9xMgHbF3284pkXsFDK0oVoSFdq5Hf6ue6qU554ilR4wiQa8SbQO8jrI2zhmA8esgZyA7wvQna/cxvqUW7JLltnKDZ7jBm/5lds4GQqVDI+5Oft0+TEZtujMuDefX9LZfnjPVLbWIRnW6c6X+OU3OuTeUNjT+Mjf03PMhijol0Ed8xzQhSNTlt1o9uA/iTI/0Knn7MQAnPzp8z83LoN8CLJB75j/7sNkaYRPE11KUF8zdbbYNNNnn+nzMfvwNvvwK6bpHm79C7fy3mNeUkvev2co2cc+zILHZC2tMFmvodg3TNYDJuseWY+paY7J+hLlcqpDkXpqbHA+QMkmpmWCjjbjH7cf3S1OccO7yezeHtLM/Yy5TZYLZFl3qpXy9GWZLL/Sl0f05SEZGrkbp/Rlw7/JbKwGlGlE5yamaYJZ2MwsaiHGf0+aINtVry9p935Cje62B3UO3dybaQgXBPktq/R/ASWqSfIAeNpjYGRgYOBi0GHQY2BycfMJYeBLL0rNZpBgYAGKM/z/DyQQLCAAAJ4sB2V42mNgZlZmnMDAysDCasxyloGBYRaEZjrLkMZUzYAKGJmQOAWVRcUMDgy8qn/Y0v6lMTCwrWO8BlKDpESBgQkAS0AL33jaY2BgYGaAYBkGRgYQmALkMYL5LAwVQFqKQQAowgVk8TIoMdgzJDAsYFirwKUgoqCvEK/65/9/sC5eBgUGdYZosByDggBcjvH/1/+P/9//f+R/6//KB+oPlB5w3L95yxZqFw7AyMYAV8DIBCSY0BUAnczCCmKxsXNwcnHz8PLxCwgKCYuIiolLSEpJy8jK4TFeXkFRSVmFgV5AFUyampGmCwAjqyGUAAAAALEAxgDtAOEAxADMANQA2gBEBREAAHjaXVG7TltBEN0NDwOBxNggOdoUs5mQxnuhBQnE1Y1iZDuF5QhpN3KRi3EBH0CBRA3arxmgoaRImwYhF0h8Qj4hEjNriKI0Ozuzc86ZM0vKkap36WvPU+ckkMLdBs02/U5ItbMA96Tr642MtIMHWmxm9Mp1+/4LBpvRlDtqAOU9bykPGU07gVq0p/7R/AqG+/wf8zsYtDTT9NQ6CekhBOabcUuD7xnNussP+oLV4WIwMKSYpuIuP6ZS/rc052rLsLWR0byDMxH5yTRAU2ttBJr+1CHV83EUS5DLprE2mJiy/iQTwYXJdFVTtcz42sFdsrPoYIMqzYEH2MNWeQweDg8mFNK3JMosDRH2YqvECBGTHAo55dzJ/qRA+UgSxrxJSjvjhrUGxpHXwKA2T7P/PJtNbW8dwvhZHMF3vxlLOvjIhtoYEWI7YimACURCRlX5hhrPvSwG5FL7z0CUgOXxj3+dCLTu2EQ8l7V1DjFWCHp+29zyy4q7VrnOi0J3b6pqqNIpzftezr7HA54eC8NBY8Gbz/v+SoH6PCyuNGgOBEN6N3r/orXqiKu8Fz6yJ9O/sVoAAAAAAAAB//8AAnjarVd7cFTVGT/nvvYRsrt3n0kgZDebbBLWZMluknVNJMAwYh0fNITMFi06sGhEEAExLhiTkAYYXtHK8BBEoZbGFuO5G8SQWkmoJk3ba8qgQZQO4xQHa6VjgbGahku/c3bzsPavTvdOdjf37v2ev+/3/S7i0DyEuJi4CPFIh0oUjAJVCZ1guBJUJPFCVYLn4CtSeHpapKcTOsk4WpXA9HxI9sj5Htkzj3NreXifVi8uGvnVPEFFYBLtQwgvEQfBrgF5UQLO+QlWMTEGCBomQpDwKpGCRKcqadiPZpaGykMOXg7JvHdff39/5YLBQYHgTO3yaDdi9mJ8H9cE9kSUhu5ARAwQYwgMEl0QkynMJq92CTzS+4mo0suCSniLImE/MahdRoMEF9JUkgb3qUo6c2mjLr2YvccGSmM4d6B0uXDu6lXtC+yk75AC9Yv9zO8M5pXmIKX8fd+loptkOTZQuSBpDuw0ajXcQ+JZJCMrwsTKLKSpii35+7JwhS0k6eBwWLDXV8A13l17umVNSVW+H/tb9i5/mLP+/ZMrOO3d5W0HT76j5WnTekYxh/6bXW6YpI/bRXJZgQ+OkNPldFjAfiP2+323FT7d8nb03vrYHq0GX8IXTp043Bw9Ozr62SXtq5GvexG1u4Zr4L+S7GA3I2nXzLpmol0bs16MwyIf4vNd6ViXb/PaxDV4qXZoDr5DajTgO+dqL+Flc7VuQ6Ok9fANQ++vOo9XarvPr/7j0Orz2h78xEXqJ47iIhQXuroAERQgOtZVMZhA2Ojvmo2MBn8CI/oV8wY/67VxmHBB6CrEkzAY6SWDDn5lNNCvRmTwj/fXA4DyODyyV47ji4P4ouYZ5KLJT82DU/4R7uY6IITcFEq58Q6LrJ+KiGQr4SIMpLYQ74j3x+NJI/R+Lso18R7A+TQWPwRPISIEFATQ41VFHIvFEeck8D6IWH174G0LUuG+/PHpmJgSYQJhKQN0PnpUVaX3wov3sNmSk/cyf8nfleIQBi83OsTBkTDMTfXNy/yI2IdMKBvdhhJp1INNJVkBMI3JdObHrBKzRXFBvHpVyQEzSpZNtip6FIkQXobUIX6LNVzhclodFk4nFfhsFpczFAxXWAp83lydVP3l1U+bqmd9ce1Pzz53sramacOiurpFz7Tc8QB3Fm/Ej+kN7y7Tbg5pbdpevXToTfyytn9DQ0Mj97vGhvpWhLEJ8vFDjGkoByV0LB9os26YSGxUFUkHDRBoA3D5LBwOQT9hUrBp76cz1x+vXrWGP9I5vz82Ui1srJozF+oTRkhAYC8X3ZmqrVulFm2QsTdALGMZGyBjp0o8QSUPvBjMsvW4aLVNc+e5IkiZ4patXaLZ4oT/oPy+MHiuCFeUl0HGkq5gFnbDSNl1UurwOMJ8Vv7hF/+xsPZgvPUA7rZdxx0bNuZ76mpOv1SWV8gNVcxf3tt4et2Tyx974eB2x5lzDU+/trh2wdIHf7Yp7Ks6RvtaefMzfhTivgU1okQRjRsQAIRpVhNGMwP3FIOfOAJkGiRSzFpH4WYhGe5hmWSqJDNAMugJCluSrxIrPZ+jKiWQnjVDtr5p5KdMyy1i+Rl52QpDlh+BJptlkhshDquSkRmhzQ5baXNZqrowNHpS1qGgU2fCuumY5u7NLfBVvnnbpeZF0SPP3DrfbjKv697y6Iod1uPuz8kJTeIfXrrp+Z3bh083NePWTO1iNNrSeMRxiHuqeVnz5uac7vcu7Y+96M95Z9epLW3rGhjPe6B3LrEHGVE6WowSBloFGCspRNkbBj6NcUEaR7nAFCCGYTIlCLAlfDChZwSgl4ALDHpGC5QLzJC73pCcYCWNjjKmKZbjkBxyeAFKdIVxB3YPDBzXyvEf8JKj/InRu45qR+Abt4fNavjmZYETjyI32oIS2TQigW0SwI4N4ATN8Ew0Q9FD7TNVJRc+KrJ6Zr11rQo5/EZiKTERc68I3Pmtidh7kWK2l5TgLrPFBp8lJWR2Fob1C+G5I0QvJ0zObNqZTKsiWyM0cgHgiLApk8HRFp6Ox1sEfbEBy/EVoSAa60r4N/a9q9qi9x/bVdte8Mud3PkbJxe0tZ/CxvU7r/9+YwtusrS1L330wP6ue6vt3NVjWsMD2tdn3nuha/Va6EEE8qXzMx350XxEigLEzuZHgExvYZnKKpEtig9SdKlET1EGi7yYVlqGMAW7uzA5Q3agEZ2eYcoShvicLp2PUYYJOyiWrA67CdMNFZacqekCOokc3Py3zguu4xn+H6z80az7fzyn+7GE9uSHm/7atmtIPNnw1D01r4zU/JDrxK+/09H7uqm+9O7AnGsfPLQUUth2eatoOHD4jR2f6AwL7395TyJam+TbucAx34gdyIJmooQxhSpKtTJbKAZ1bJXAllGslANZM/hIkrslng65t4IGGZ7Ln9j8/K75Icuv+TlVzz6xWxjp3LlD00a117448eWXVz76BTAz1JDXoIaZqACF0AaUcFKf2SrJCxC/SkoBuuC8jFUzC/jYQgppGZNCopCeUNxQXisMsYWk00slKikJ0N1eDnUuKQSyMpideTwrdF42FBoBUIhfVsw8fJZalXSRFb6sIuwrL6PVZ4Q1Mbm05rNweVmSw232iUGPPLflz2vXn+p7cv3Hm9vb2s5/3NZ6UuxqbD1aV9faVHtfxdYVj2ze+sjD23BHe5934UevrFy9Zu3BDxbOeG/r25uamppPx7sF8XDLpoV1tfdxufU/aX0w1rYJcFWZqkku9GAZSphpRWCG3AFSoFI+o/gqZRXxwmQFidfC8g/AF2UqFAOUWxByn+oFjJkFd5LH3E5I3WqDlAtkMjVCiq3QXjo7SVlFs3Y5ZQsgzpvrK0jODcuanuDCdpeTZp2sQWXrlt9u2/D07fD66kjnx/Zjrnhs35KiMBfuWfXWCGw27eXauifi0Sh/5i+t2+69Z1e7dk270vnzNwCF8ce3V19Y6bBE67F0dtviaNfefUseWLqEchpIWNwmFDCNXTS+7emSFyFj/fcUsWFCEcNft0pffHRoiNpiekUIM13tRpP0NBjUB6mYTgJXouuyEpd7b8dJzdJPVUv/uG6JoRgXFe1Igp2LiS6ld4BGKX8xyaNwQiTCpAuWDViO4etaH66m+uma9rnWq/Vpl2k8uJ6/zPex3DLGFNB4ZqlU6ARhqoD4x0d/yj+O6wcG8HNUCcHOgzgCLI7s8Tj4IN38NA5pXHqFaQzYUYlna734egxn4mo8G2do6YPJ54PFsDemgA72wrwBtvJojfPZ9qSoKmR201WSblGykqzlCxKXheSxgXQlWRtKXwRO89IhedkdiSj6LNiRghHmii7MfMrAOn2KgctSfMbBvDjsFGT0gNny+gpSB320WNzUcu7965ndM//Z8Gp21oNL8kO26dwxPl12Tl+0eUYxXqcK8159av25M3ZceGhF8NZAXY1/dvndK3Iy184I5xTdteGuBaM5VPZBrTq0ONcJmlwHCoFWWmSVxuMYEtWEyNajCCRGdXqq+kwDexwdnKR14KgW1x1o/7ZlZ5IXv6Ml+e9qSTmEvVQwMyn5n/5pqwAvyfqCf0zlWgJLY1KdoDH/LnAOUtxDfUMMN0ZGpKb2b5Yn/ce4t/k28C8hZAPp6k3DMVw8gIsBqnAlffQaN/XGZ/R32ofCuZsPQZwORL2Cb6ROitUFOcaEdf/a+cp2ZjfOe3A3e24rZM9t3KTnNqbqeQotEfrKieOaIOSweam6F9EgPCAk7fyP+n7iPvT/vCbEJ10T0Heu6Sdf00+6NulViv4N7FGh7AAAAHjaY2BkYGAA4gLri5bx/DZfGeQ5GEDg/LLZfAj6XxBHJZsIkMvBwAQSBQAZqQmvAHjaY2BkYGBb90+LgYHjPQPD/3UclQxAERRgBQB+3AU+eNo1jjEKwkAQRf/OjkFEUuUCdnZWskgKQTyDhaXsBSxTpNw72FoI2lmKhYVF8A6eQBCs0vuXbIrHW/h/dka+WMsF6DFXHKSFN0d4CajlhFqn2A/GqKQgLVHc7QxQh6U6k9OOlGSS3guySi7NCzfz5twDXuMfO3YLbKXB2c4Bm9MNs8C9H+bxFu6xIyArmCdLxvsCsR140o7edP0e/aEakpjFvrLyB6JXKSoAAHjaY2Bg0IHCEIYJDFsYHjDyMDowNjAuYNzDeIvxA5MTUxbTMWYP5kksXCwlLGtYzVg3sd5g/cOmwObAlsJ2jZ2BXYzdgT2EPYd9AhCuwQF3sZ9gv8b+hP0TGP4CAG+gIUEAAAAAAQAAADoANAADAAAAAAACAAEAAgAWAAABAACHAAAAAHjatVpLjxvHEe6VnYedjIEAQQ5GDgMJMCyApqW1pADKid7lSgtzyfWSK0VHLjlcTjTkMJwh1wvk6IMR+JI/YBg55hYg/8A5OJcc8otS/VX1Y4YzJC04ELhs9nRXV3317pFS6lfqv+otdfD2O0qphD48PlDv0i8e31HvqbWM31IP1Jcyflu9r/4p45+orvqPjH+q3j/4rYx/pl4cPJHxz9WvD76W8Tvq8OBbGb+r/n5gePiF+uDOn2X8Sxr/TcZB+PWd72X8nnp0byDj79Vv7n0l43+rB/e+UUcqVQt1q5YqVtdqqnIVqg/VSN2n70Pi/qH6hEZXtCJUbTWjVUsa9dWQvv+l/qGa9KtFsif07Whk+BXRd0Tfa/o7ppU9Gr9WKzVXFzRzTaMEdB7Sswf493vhJaORW/1Rab17EpaevMB5GfGR4qlP+Zy4DjE2sw9pdkorc5JXr1/bHU31WD3Zk4MY0g7pk9PskCSNCKchVoREd4KnjNCA9uj5mE4MiaMI6Cf03azBt2qugbVM/xUo5kB6Denr0fF5nUDifKtu9TljaFHrdQ4t7lpfz5c+fe5ZVZMoxbRC0x6RHmKayWnXjOYTWt+EVmZ7rhrgmZbuxErWB/q5ugGHkZU/Af4RrcpEJo3WWLjMiVKE3aeqQ9890lAEzh3lToGClrvK8vQn8Dgrnmu4GcEGYotuROtS4rkBTc0xa/SW0HeK0Zo+MfR6BfsJaUcM3lm/J+SVn2Ocq6f0/Z36Czwzp7Oeqo/pX0Yna49dQEtN8J7Qd0qz1/S8RzQ6xL/D4Zy02wXtHn0PgMMpRRA926e/QQ0KIfmP1vsT7I2I4yUhrnVyK/bwQP2Odp+TvbaJ7zP1KVFuC3Zatmuix9IbjzJa2q0dHc9YlvvAgy0hB44ZLGsmHpILjhqBhHDXiGqrCPB3LZpZ0PpITmJetAYT0UWKGKCprkHN+dmCnqTqjzQ7AuINj4sVPV1gb+7J5vaOwDXT1XMB/Zrg+VKirYkzIxuBOMYYC0rgfToWxCL1SDifQf65eFkknJl9zCHzvhY8TATRPEV2bQBsWBcToKBxYjRfW++/gTeMYKdGPs2/jpi3Yv8akaloalzwgpnlJJKZObgbAoe5WN8UVh14HpEKpktYurMrtgsTn7XXZR7+m3HC55iRYX5XsqIhNrWicWxnZrRS/55YLzeIsYSsEe2LV7Qzt2cxvglwGUoESaFF85s5vfXseg5ZQ8SJxIvXvHIGPhPglyHnMBKBJ1lDcB3ROpbDnDgHJY6TMSKQs3OjZ94/wmqDzpXE18QiEiF+619jO7cdDUbsY5ziS+dHPeYv24j6ResdCxpD4GR2lauVgObZgrMKdFfWIq72wsQhXbQhY9lV+zWSAeqTG5tDHbaGE0Z4Ca1GsIrNjGZkdF6gEbiFt5rIUbR13zI07T8hbiyhNxP7JqKLTZ9YSgXE3lnOrdW5cEw7GWsj2RAxUVt/IHSdBaa0d+Xx4uKjkT6zdptX4J56mZ6rmGoN6FhxTJnohPJclz4D+vSQ7QJ1d0ulcVdQmEjMMcgYXrTMLn9MkHkjWzUXNen7b1hRrwfquXiDPutD2nd/b9SN/Y3kzKVEG1O/Gt/LJEvpuG1sI/bidlCIGJF4oa4AR4K9kbAh8SAW/y1WIb5HFHXscl8T2F+U/NXP/13x3DotGDvyPTyDN4xKUdqXW/+ewMKc7QRSvRX7p0z4dd7CWmHOe7I2xvnJRu24y3ZMtcF1hKm02JK21b6c6xdYEXkRKEN9Ux11d9leWGF7LOXZRs7bT8rtWWYm1Y3hbIgM4jw9tT1LAg/jJw3UJkvR5ZXUPznkNHu/U3/dqCdMnHCVSyq1Nq92cXVS0s8mzv6aYKcNNKyEI2Squay9tnF3BlxcLOPVpoYsx75tdmFwD8DvDbLzHNlyiV3GhlmvLaA2xTn76ND1jkvJ/EaWyM5xfr6WmnFm53PY+BS16Qg46ZpuCd2xF6by1+W1hfCSejoLpb/ftO+iZ9Wj1ER30qaoc0YZoI+eqIde6AP4hR4fl/LDOTiZwbNcR8RRk7mNRGss+Vy4ahRqa9NhcD18Ld1mEeeizClRzSX7sh0EqNdNpCrba73U7qSV7XNNdXsrtQjT5Co38jh0FV6xAr6FN9ZVen7nwZVqsqV+5iy3+dR11FmttEGltBwfTI9Wto+JRN4UVSd7GFvWWLqnFJn1KVF/iCzcRX3hV127/XEuVl2MLrF4eyyncTW7kuhRFXMakpXDimjDJ+yK0ZnortiZFfuKWO54EqKiveQQcr/5iftbZ5mzcpfx/+onGjs6ighd+NTzjsDGH/ZKv8fkO4O1zRzl/MrVcCx1lOvKqys6V7dnQtH1YeUabQxefes09U4u53wE3bFNcTT+Qip/v5qbokob4paUq/Cxdys1lRmTITTexi4dBgtBdAHZzU3MTJDkbFFFfYYsz3O53ErEsMYxTjPaNOcZCZiLK7FPvofyq/D6bjsVZIvnFPtdrt5jqaXXWHlTWVGtpIbVnvOJRIx0Dz95Ey9ZCedmT30FHdgK2u8mGJsM8n2BzixGvZwDZ87Kudz/LLbkvmK2KyMygm64G1/Y2MpZbFf9WexMmAZ7frFSnts7lYXIEVXU2WyLM88+DMambzDV88LeHsxrKgujZ+4oHwFTcx8wL2Fd1Ox+NXexow0LVVo13fo8aG7fOPcW7xncvYd/LzjDmsjWd2Ocm0n9spQ6nW8wcmgnsvE12GnrDbE4HeUWXlbWseE1+LuRmH9dsO/Nmo/pVeER7I2zH4HrkV4WMol/z7DLd4JK39FW87hgNdurts2aiHmqqpcae/c9OqfOYAPOIuryK/tCLPcZt3veSPj1nzvJt8H6XnXXjVddpgx/8A1X8KPfcIU/8IYrqLzh2t6/DGz/0iWrNZ3KtvdTV6iDU3tHMsd7ksTT0ZqexnITP6ntiMs1TrleNvergUWG8zrfvul+60h1iOdT4l7LoHl+TiP/TVQfd/kD9ZLWXeDZKd736ndKPYoop7jHO6YZ3cP25fldWNxLdG7Pad0laDGNC/qrab+S9wQhfutfnwHDY/hDW/1B3lv1QbVH4xCcnuPtWBvrQuzQUlxCoq56RnOfynld2mXepp2BF+Z0QPPu1CJXpziROQsElyOSgZ+2iPYp6Gn+G0BKj7uWzxPhtAWMNOUB3uVdAukLzF7S9zmt6wPPFmRmbruQ4YSesyxtcKBPDgSrI7wvfIUVz4ivAbg4h+XxygYk1PIcY78+9TPMMmc90fIFahVDpSlYMh/6ffMLoadtQMvfwRsd3htU8BFC0x2cegEttAX7lrx39NFh7J39af6O8Y6yBbn7lfwaar4OgkobMCc8gxRt4NHBKX3cOByBUsfakN55gfmBZ1ds3az5jofhkdxGtNXndGpbLKeF97pFKdgPNP9OCsa5JX+PbMwIPR13RYdHVqM92NImKi/hcW2sakEffUEhgCX1BF3jhXyG8fRLscKe5ayIr/EWs26fCMG0zNlBQYPHeBPdEQ77Fo3ddJtv9J79JW6DXI3J/w+lLz3lmdTwh1Q76mePiPZj6hie0ppD+38qHv0PPTs983jabczJTgJRFIThvxilmUdFUMEn6NvSCCzUFsJ7mChDYgzRsPC15AHRcM/S2nypc5IixSnHESv+ywyUUpo0GbIEFClRpkKVGnUaNGnRpsM5F3S5pEefK665YcCQWx545ImEZ+bKKKuc8jpTQYGKKqmsiqqqqa6GmvxwUEttdXLr9+/dxuX3H9swDBfeJDRPPfp7mM6MzDtzZMbm2Lw3J+bUTLzOdp0LVtv1/vPt9eVr40/R0ht74+X8F+k2Nv0AALgB/4WwAY0AS7AIUFixAQGOWbFGBitYIbAQWUuwFFJYIbCAWR2wBitcWFmwFCsAAAABU4DqjgAA) format('woff'),
url('http://static.tumblr.com/gaobkbe/xtgn63ewo/orkun-regular-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/gaobkbe/nZcn63ey6/orkun-regular-webfont.svg#orkunregular') format('svg');
font-weight: normal;
font-style: normal;
}
How to proceed from now on?
Don't try to store and serve the font files on tumblr itself. This is likely not permitted by Tumblr TOS.
Put the font files somewhere else and it will work.
What you have done so far is, you defined the font-family. That will not make the browser use it.
Add this to your current custom css.
section.post {
font-family: "orkunregular";
}
You need to apply that Font to the HTML-Elements you want to use it on.
section.post would be only your own blogposts.
if you want everything to use that font, try:
* {
font-family: "orkunregular" !important;
}
Please check the TOS of Tumblr if they allow that kind of customization, or atleast host those Fonts on a seperate webserver.
Okay, I've solved it. When generating the font kit, I chose the Unicode range of the Old Turkic script, then when used the new kit, it displayed without any problems.
Here's the blog page, http://bitigchi.tumblr.com/indiriler1
Thanks for all the answers.

Can I replace a reference to https://fonts.googleapis.com/css?family=Karla|Ubuntu to read all the contents from our server

I am working on a web layout template which I have downloaded, and I noted on some CSS files there are references to external links to load fonts and themes, such as the following line of code at the beginning of a .css file:-
#import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu)
When I open the link inside my browser I noted it will load the following:-
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400;
src: local('Karla'), local('Karla-Regular'), url(https://themes.googleusercontent.com/static/fonts/karla/v2/azR40LUJrT4HaWK28zHmVA.woff) format('woff');
}
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu'), url(https://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
}
My problem is that I am using this template for our intranet, so users might access the intranet even if they do not have access to the internet. So my question is how I can add these fonts and themes inside my asp.net mvc project , so that the contents will be loaded from our server and not from Google site ?
Thanks ?
EDIT
I replaced the following :-
#import url(https://fonts.googleapis.com/css?family=Karla|Ubuntu);
with :-
#font-face {
font-family: 'Karla';
font-style: normal;
font-weight: 400;
src: local('Karla'), local('Karla-Regular'), local('/Content/fonts/azR40LUJrT4HaWK28zHmVA.woff');
}
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src: local('Ubuntu'), local('/Content/fonts/_xyN3apAT_yRRDeqB3sPRg.woff');
}
but i did not get the font effect ?
BR
You may want to see this section from the Google FAQ on the subject
Can I download the fonts on Google Fonts to my own computer?
Yes. To
download the fonts, simply add fonts to your collection and click the
"Download your Collection" link. You can download the fonts to use
them for your mockups, in your documents or to host them on your own
server.
This article goes into further step by step detail about how to do this, it should solve any issue with end users not having access to the internet- as long as you're local references to the fonts are correctly defined in your CSS.
You should download the font from the Google site, then process it with a font file generator like the FontSquirrel generator, which also produces a CSS file you can use.
The point is that different browsers need different font formats, served using a suitably crafted #font-face rule.
When you use the fonts using a URL like https://fonts.googleapis.com/css?family=Karla|Ubuntu, the Google server recognizes the browser and sends just CSS code tailored for that browser. If you just copy that onto your page, it will only work on that browser and sufficiently similar browsers.
You can self-host Google Fonts, read Self-host web fonts quick guide:
https://fonts.google.com/knowledge/using_type/self_hosting_web_fonts
Here you can find a practical example of how this can be done:
https://developers.google.com/fonts/docs/material_icons
Setup Method 1. Using via Google Fonts - provides an example of how the Google Material Icons font can be used via fonts.googleapis.com.
Setup Method 2. Self hosting - provides an example of how the same Google Material Icons font can be self hosted.

Resources