I am looking to utilize the @font-face feature and have my fonts stored in TrueType (TTF) format. Can anyone advise on how to convert TTF to OpenType (OTF) format?
I am looking to utilize the @font-face feature and have my fonts stored in TrueType (TTF) format. Can anyone advise on how to convert TTF to OpenType (OTF) format?
If you're utilizing a Linux operating system, FontForge is a valuable tool that can be automated using Python scripts.
#!/usr/bin/python
import fontforge
font = fontforge.open("STIXGeneral.otf")
font.generate("STIXGeneral.ttf")
For those looking to convert multiple fonts in a directory all at once, check out this comprehensive Python script:
Finding the correct way to accomplish this task was quite challenging. Here is the method that finally worked for me on my Mac operating system.
$ brew install fontforge
$ fontforge -c 'Open("my.ttf"); Generate("my.otf")'
I had originally been searching for pip install fontforge, only to discover it does not actually exist. I couldn't get it to work with python either - it seems like you may need to compile it with --enable-pyextension or something similar.
By utilizing the TTF file format directly in CSS, you can achieve the following:
@font-face {
font-family: Mustard;
src: url(http://www.4bit.co.uk/testing/design01/mustard.ttf);
}
h3 {
font-family: Mustard, "Times New Roman", Times, serif;
}
Success!
Alternatively, try using this link to create your own custom font face!
After a speedy search on Google for converting ttf to otf files, I found several options to explore:
I can't guarantee their effectiveness, but they might be worth checking out.
To ensure compatibility across browsers and mobile devices, it is essential to have three different font formats:
Embedded OpenType: eot for Internet Explorer 6-8.
Utilize a command line converter like the one available at: http://code.google.com/p/ttf2eot/
Web Open Font Format: woff abiding by W3C recommendations for webfonts found here: http://www.w3.org/TR/WOFF/
Explore a conversion tool accessible at: http://people.mozilla.org/~jkew/woff/
TrueType: ttf ideal for Safari and Opera users.
(Consider adding Scalable Vector Graphics: svg for older iOS versions…)
The reliable @font-face Syntax consists of:
@font-face {
font-family: 'Vinegar';
src: url('vinegar.eot?') format('embedded-opentype'),
url('vinegar.woff') format('woff'),
url('vinegar.ttf') format('truetype'),
url('vinegar.svg#svgVinegar') format('svg');
}
Additional references:
You may also find this tool useful:
https://github.com/zoltan-dulac/css3FontConverter
It has been noted by others that fontforge scripting now utilizes python instead. I discovered the simplest method was to run python from the command line.
I successfully converted multiple ttf fonts to otf on Arch Linux using this approach, but it should be applicable to other distributions by installing fontforge with your preferred package manager.
[user@host]$ sudo pacman -S fontforge
[user@host]$ cd /path/to/your/fonts/folder
[user@host]$ python
>>> import fontforge
>>> import os
>>> fonts = [f for f in os.listdir('.') if f.endswith('.ttf')]
>>> for font in fonts:
... f = fontforge.open(font)
... f.generate(font[:-3] + 'otf') # modifies extension from ttf to otf
...
>>> exit()
Check out the Font Squirrel @font-face generator for all your font needs!
Perhaps you could give this a shot as well:
After playing around with the bootstrap grid system, I ran into a problem with the "col-xxl" class. Can anyone help me figure out why this issue occurred and how to fix it? <style> [class*="col"] { padding: 1rem; background ...
Having some trouble customizing my Mailchimp form a bit and could use some assistance. Snippet of the code: <!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type=" ...
Is it possible to achieve this using CSS3 alone? var inputs = document.getElementsByTagName("INPUT"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "text") { if (inputs[i].value != "") { inputs[i].s ...
I am currently learning SCSS and I have successfully converted the CSS code below to SCSS, but now I am struggling with completing the rest. I have tried looking for help online, but so far no luck. Can someone please assist me with this? .par-1 { wi ...
I recently incorporated a Material UI library into my React project (material-ui.com) and I've been trying to center my logo within the appbar component. Here is the code that I attempted: <AppBar position="sticky" > <Toolbar> ...
After downloading a Template + CSS File for the website I am working on, everything was going smoothly until I decided to break down the template into separate files for easier modification and editing in the future. However, once I cut out the head sectio ...
Chrome is working perfectly for me, but when I switch to Firefox it behaves differently than expected I am attempting to create a simple animation (utilizing transitions) that continuously runs on mouseover and smoothly returns to the starting position on ...
I want to display two sections of text that take up the full width of the screen and resize automatically when the screen size changes. Currently, I am using percentage widths to achieve this. However, when the text inside a section exceeds the available ...
Having an issue with a Skeleton component not taking full width inside an Alert component. It seems to be occupying less space than expected. https://i.stack.imgur.com/cMLEy.png Here is the relevant code snippet: <Alert icon={<NotificationsIcon s ...
I created an input field with a hover effect that reveals an edit button upon mouseover. After clicking the button, I disabled the hover event using jQuery. However, I am unable to re-enable this hover event by clicking the same button. Here is the code s ...
I'm currently following a tutorial on creating an RPG game using React. The tutorial can be found at this link. I am trying to replicate the presenter's code by typing it out myself. However, I'm running into an issue when attempting to add ...
Hey everyone, I've been attempting to center my text using Bootstrap, but for some reason it's not working. Can someone help me figure out what's going on? <footer class="row p-1 mt-3 bg-primary text-white"> <p class= ...
Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...
I have a scenario where students need to pay monthly fees for their classes. My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month The code I am using: $(document).ready(fu ...
I am looking to display a canvas that may be larger than the viewport size. The layout structure will include navigation on the left and controls on the right, with the canvas positioned in between them. When the canvas is too large for the screen, I wan ...
Hey there! Can someone please help me figure out what's going on? I'm trying to create a Tic Tac Toe game, but instead of using "O" and "X" to mark the fields, I want to use different colors. Specifically, one player should be able to mark with b ...
In my code, I am utilizing two media queries within a bulleted list li tag. The issue arises when both queries, clearing every nth-child(2n+1) and nth-child(3n+1), are active on the same page in Chrome's device views. This causes the grid layout to ap ...
Want some help with a website I'm working on? Check it out here: I managed to align the product image with the green section using a negative padding-bottom value like this: img.img-with-animation { opacity: 0; position: relative; padding-bottom: -7 ...
I have an HTML div that is styled using the Bootstrap class span9. <div class="span9"> <div id = "selectedtags" class="well"> </div> <button class="btn" type="button" id="delegatecontent">Generate report</button&g ...
Currently, I am working with a div container (utilizing bootstrap.min.css) that contains another class called divborder. The length of the border-bottom in divborder is quite long and I'm wondering how I can adjust it to be shorter. Below is a snippe ...